UX Design Week 1 - Week 15

25.9.2024 - 03.01.2025(week1 - week15)

Name: Itani Karen / Student ID: 0377243 / Course: Bachelor of Design in Creative Media

UX design

LECTURES

-Week 1 / Introduction of the module

 In the first week, Mr.Hijjaz gave a briefing of this module and  the detail of projects we will progress. Mr.Hijjaz showed each works of previous students as a sample. We were also asked to register figma and read chapter 1 of  "The DESIGN of EVERYDAY THINGS" by next week.

-Week 2 / UX Design Introduction

 In this week,  through two exercises and lecture, we clarified what UX design is and learned about the UX design process. What particularly impressed me was that UI design and UX design are not only differences in appearance and functionality, but also include materials.  Also, Mr.Hijjaz briefed the first assignment in the end of the class.

-Week 3 /  UX Design Audit - Bad vs Good UX Design

 We learned four characteristics of good UX design: Usable, Equitable, Enjoyable and Useful through the lecture and UX wishlist activity. 

• Usable

         the design, structure, and purpose of the product is clear and easy to use

• Equitable

         a design is helpful to people with diverse abilities and backgrounds

• Enjoyable

         the design delights the user

• Useful

         it solves user problems

 Also, some of students shared individual application analysis and Mr.Hijjaz explained the second task in the end of the class.

Here is my slide

-Week 4 / UX Market Segmentation

 In this week, we learned the importance of market segmentation in UX design and Mr.Hijjaz introduced the data of social media users and share in Malaysia.

 

-Key elements of Market segmentation

• Demographic

          Properties like age, gender, education level, occupation, or income level 

• Geographic

          Geographic areas, such as countries, regions, or cities

• Behavior

          Behavioral patterns that users experience toward using a particular product. These can              include buying behaviors (spending and consumption) and desired benefits

• Tecnology

        The level of user's tech savviness

  Also, we did a presentation session to share the project Exercise2, and gave some feedbacks.

Here is my slide

-Week 5 / Empathy

 In today's class, the theme was empathy. We learned about the role of user personas, user journey maps, and how to create them in order to conduct research from now on. Mr.Hijjaz introduced the samples of empathy map, user persona, user journey map and UX requirements table. Also, we worked on  the empathy map activity and figma exercise.

-Week 6 / User Journey

  Continuing with user personas, to clarify the target users, we learned that what kind of experience the user goes through until reach their goal. Afterwards, we were briefed on Project2 - Task2, User journey map report, and took some time that discuss project2 in the group.

-Week 7 / Lows of UX Design

 In this week, the class took place via Teams, then we were briefed the submission of project 2 and received a lecture. In the lecture, the topic was Lows of UX Design and we learned some of the common rules of UX design such as Hick's Law,  Jacob's Law,  Fitt's Law, Von Restorff Effect and Zeigarnik Effect.

• Hick's Law

         The time it takes to make a decision increases logarithmically as the number of choices increases. 

• Jacob's Law

         It helps to reduce the cognitive load on users by making interfaces more intuitive and          familiar. This allows users to focus on the task at hand instead of learning how to use the interface.

• Fitt's Law

         The time it takes to move to a target is a function of the target's size and distance. Larger targets that are closer to the user's starting point are easier to reach and lead to faster and more accurate interactions.          

• Von Restorff Effect

         It is the proven psychological theory that the more something stands out from the crowd the more likely it is to be seen. For example in a bucket full of green apples we’ll remember the red one. And be more drawn to it.

• Zeigarnik Effect

         The Zeigarnik effect is a psychological principle that states that people are more likely to remember tasks that are unfinished or interrupted than those that are completed. This effect can be used in UX design to increase user engagement and task completion. 

INSTRUCTIONS

PLACTICAL

Week 2 

-Exercise1

 We divided into groups of 3 people and did this exercise to get clear understand the value of UX. Our group was assigned JBL headphones and discussed the purpose of UX, issues and suggestion to improve about the product. We found that wearing the headphones for a long time caused pain in the head and ears, as well as slight delay in the sound, and proposed solutions to these problems such as changing the materials, size and improving the sound quality. After discussing, we summarized our findings and ideas by using miro.

Exercise1 (week2)

-Exercise2

  First,  Mr.Hijjaz asked  us to write down the processes required for UX design on the cards and arrange them in appropriate order.

 we arranged the cards in the order below

•  Listening
• Analyze
• Design
• Testing

 Secondary,  Mr.Hijjaz removed one process from the four phases and we discussed what would happen. Our group considered the case of without testing and here is what we noticed:

• Without testing, some hidden problems will not be identified.
• You can not get feedback and reviews to improve the product.
• You will leave client unsatisfied.

 Finally, we were asked to add a new process in the existing design process. We appended "Launching" phase to get more review and rating. Mr.Hijjaz told us that launching is a strategy and that you can earn money by doing this.

Week 3

-Exercise

UX Whishlist:

  We opened our most recently-used app each and wrote down three requests for that app by using Miro, then we shared each wishlist in the class. My most recently-used app was Instagram and I wrote down these wish.

• Reduce ads in Stories and Timeline.

• Attach a camera in QR code screen.

• Make more easy to make stories.

Here is the our wishlist.

(UX wishlist)

Week 4

-Exercise

Segment Matrix:

 choose one app which we want to redesign and consider geographic, user's behavioral, psychographic and demographic of the app in each group. We chose streaming service app, in concrete Netflix.

Here is our Segment Matrix

(Segment Matrix)

 Target Audience:

　Furthermore, we were assigned to conduct target audience research to analyze users' empathy as homework. In this assignment, we generated a user model and considered demographics, psychographics, roles, and activities. Then, we discussed the type of app we would create and decided on a shopping app for cosplay items.

Here is our group's target audience research.

(Target Audience)

Week 5

-Exercise

Empathy map:

 In this activity, we thought question agenda which based on the user's empathy. We thought of each question based on the four items: says, thinks, does and feels on the empathy map and filled it out in Miro.

 After doing that, we gave a feedback from Mr.Hijjaz and we were pointed out that we should standardize the way we ask questions.

(Empathy Map)

Figma warm up:

  Next, as a warm-up for using figma, we engaged in an activity where we opened favorite app, took a screenshot, and recreate that screen in figma.

(figma warm-up)

Week 6

 In group work, we discussed UX research,  decided question items, and considered a user journey map.  We then consulted with  Mr.Hijjaz about our progress, and he provided with us feedback and explained the types of questions in detail. Afterward, we refined some question items and decided specific schedule of this research.

Figma warm up:

 In this week, we did another exercise of figma and made a mockup including header, footer and a frame that can be scrolled horizontally.

 

Here is my final outcome.

Week 7

　Mr.Hijjaz provided every group with feedback of each project2 documents. As far my group, we share our question items, UX requirements, and User Journey map, then we gave some advise and we were told to progress the interview phase.

Figma warm up:

   week7's topic was "Component" and "Auto-Layout". Especially, we focused on the component in this time. First, we made a main component and copy it and placed in a row like a Instagram layout. A feature of the components is that we you operate the main component, you can edit other components at once, and when you select subcomponent, you can edit them individualy.

Here is my final outcome of component.

Week 9

 In this week, we conducted presentation of UX design documents (User persona, UX requirements and User journey diagram) by group. After our presentation, Mr.Hijjaz suggested researching other apps to increase unique sales points and add it on UX requirements. Then, we researched other cosplay market and added some feature.

Week 10

 In week10, we didn't have a physical class, and were instructed to proceed with the final project in our respective groups.  Our group began by a creating user flow chart that was based on the user journey map before starting the actual app design. This helped us clarify the page structure, align our vision for "Cos Cart," and gather references to make the app design process easier.

Week 11

Low Fidelity Prototype

 In this week, our group kicked in making prototype of the app "Cos Cart", we divided our task into three and first I took charge of user journey2, Browsing products part, and I created home, brand new market, preloved market and filter section. Then we showed all of our progress to Mr.Hijjaz and he gave some feedback such as narrow bottom icons into key features, make more emphasis on review and so on.

Week 12

Low Fidelity Prototype

 Based on the feedback, we decided to place Home, Market place, Notifications and Profile buttons at the bottom of the screen, so I edited home bar at first. Also, I changed the Market pages, placed the Market home page to make users can choose "Brand new market" or "Preloved Market" on the same page.

(Market home page)

  In the market home page, users can choose and jump to specific market place "Brand new" or "Preloved" directly, so I created wireframe to put some products images and banner later.

Week 13

Low Fidelity Prototype

 In this week, I finalized my design work of Low Fidelity prototype. In addition to Home and Market section, I took part of payment, order tracking and profile pages.

(Overall Payment process)

 In the payment process, enter user's shipping address, contact number and email address first. Then, choose payment method, and if you want to register a new credit card, tap plus button and fill up the information. Afterward, you will reach to the confirmation page where can check order detail, then if the information is correct, tap "Confirm Order" button and the payment will be proceeded.

(Payment method)

 We wanted make overall design simple, so I made payment page with simple shapes and simple fonts, and I searched payment page reference at figme community.

(Payment process)

 In payment processing and results page, I created these page with intention of giving a lot of Feedback to users, and wanted to allow users to pay with peace of mind.

(Order Tracking)

 I also made this page with refer to a reference which I found at figma community. In order tracking page, user can monitor order detail and situation. In addition, they can manage their order such as return or consult to customer service team.

(User Profile)

  In User Profile page, users can edit their information, check purchase history, request returns, access FAQ section and check privacy policy. Also, users can log out from this page. Furthermore, I placed username and icons at top of the screen, and the user status is also displayed there.

Logo

 We also, decided logo of Cos Cart. I created logos for 4 patterns by using canva templates, and we decided together the hanger one.

Week 14

  In week 14, we created High Fidelity Prototype, did usability testing and finalized task3 and task4 documentations.

High Fidelity Prototype

   

(Home page)

  I added images First. I created two banners of market by using Canva and gathered images at a cosplay shopping site, Doki Doki Mart. Afterwards, applied color, and our main color were light blue, green. So I applied blue color to background and home bar, and changed search bar into pale yellow not to stand out too much.

(Market Home page)

(Market pages)

(Payment process)

   We unified function button color with light green, so I applied it into payment process.

(Order confirmation)

(Payment processing / results)

(Order Tracking)

(Request Returns)

(Profile)

Usability Testing

  Then, we started usability testing and gather user comments with sending both figma link and google form link.

(Google form)

  I divided the section into four: user demographic, functionality, user experience and app usage, and set the questions. Then, my group member Agnes and Adora decided 2 user flow and sent links to their cosplay friends.

Design Documentation

<Task 3>

 In task3 we just copy and paste user persona, UX requirement and user journey map, then filled up proposed idea section.

(Propose idea)

  In this section, introduce two user journeys which used usability testing and attached some screenshots.

<Task 4>

 After conducting usability testing, we kicked in creating design documentation together. In particular, we took long time with data analysis, attached graph and summarized results respectively.

 After we done analysis, we divided remaining tasks, and I was in charge of key finding and limitations. 

First, I reviewed the data and found 3 key findings

・Our product has accessibility problems in some areas
・Users highlighted the clean and minimalist design
・Participants expressed strong emotional reactions to the product design, both positive and negative

Then, I described 4 limitations in the documentation

・small sample size

The usability testing involved a relatively small sample size. While this is sufficient to uncover many common usability issues, it limits the ability to generalize findings across a larger user base. This small sample may not represent the full diversity of  audience, such as varying demographics, technical skill levels, or specific needs.

・limit the scope of evaluation

Also, the usability testing typically focuses on the specific features, pages or tasks within the product, often considered most critical or problematic. While this process can efficiently uncover design flaws and usability barriers, it will limit the scope of evaluation.

・The short-term behavior

The short-term behavior is also a limitation of usability testing, because it often focuses on the immediate user reactions and short-term interaction with a product. This approach can collect and identify usability issues quickly, but it may overlook the long-term challenges or behaviors that arise with sustained use.

・usability testing biases

 there are biases which can arise both of facilitator and participants, as well as the testing environment. For example, The facilitator may change the user's attitude depending on the wording when asking questions, the user may try to be a good user or give socially desirable answers, or users use the product seriously to try to avoid errors keeping in mind the testing situation. 

Week 15

 In this week, we conducted final presentation one by one group, and introduced the research data and prototype respectively. As far the presentation of design documentation, I was in charge of talking about a part of data analysis(section1-3d), key findings and limitations. For prototype demonstration, I played a role in explaining process to achieve a goal of home, market place, payment process, request for returns and profile page where I was in charge of creating prototype.

REFLECTION

 Through this class, I was able to acquire some essential elements(Affordances, Signifier, Feedback and Mapping) or laws(Hick's Law,  Jacob's Law,  Fitt's Law, Von Restorff Effect and Zeigarnik Effect) to providing a good user experience . I kept these elements in mind when designing the final project. In particular, on the payment screen, I was able to use symbols such as pluses and checkmarks to clearly communicate where to press to add a new card or whether the payment was successful. 

   

  In addition, by actually surveying users in the form of questionnaires or interviews, and analyzing a lot of the results, we were able to understand the trends in the market for the cosplay app created by the group and what factors users consider important. From this experience, I I realized the importance of market segmentation in UX design, which involves creating user personas and clarifying the user's graphical, geographic, behavior, and technological level to narrow down the target.

　If I were involved in app or web design in the future, I would like to use the research methods I learned in this class and the elements that increase UX satisfaction to aim for even more equitable and enjoyable designs.