I started sketching out user flows and brainstorming how a user would interact with the app before they go to SF MoMA and during the visit.
.png)
I started sketching out user flows and brainstorming how a user would interact with the app before they go to SF MoMA and during the visit.
Under the pandemic, the government releases the Name-Based Mask Distribution System to prevent people from stockpiling face masks. Citizens can use their National Health Insurance card to purchase masks at local pharmacies.
But the problem shortly occurred after the policy. Local Pharmacies were packed and people have to line up for almost half an hour to purchase masks.
Thus the government issued another solution, citizens can purchase masks from the National Health Insurance Express App. However, users experienced certain pain points while using the App.
This case study aims to better the user experience while ordering masks and looks forward to making the process easier.
This is a self-initiated project so I only chose to redesign the flow of ordering masks on order to keep the scope smaller and create an MVP version.
I immediately started interviewing and record users navigate through
the original app to complete tasks.
These are the tasks I asked users to complete during interviews:
From the insights I gain from usability testings, I made some changes of the tasks flow:
My next step is to do another user testing for the two concepts and one variation I came up with:
Conduct concept testing - I presented two ordering flow concepts.
Uncover user expectations - users were asked how would they expect the order status to be presented on the app.
Test big picture usability flows - observing the tap interactions.
Usability Testing DocumentationHere are the main design changes I've made for the project for now.
(I also included the Chinese version for comparasion)
The original homepage presents too many CTAs and is sometimes confusing for users at first glance.
So I redesigned the icons and put some functions that aren't use as frequently into the hamburger menu.
I use tabs to categorized "Past Orders" and "Place Order", to make the page easier for users to order masks. I designed the "Place Order" page to be the default when starting the "Mask Order" user flow because this function is for now user's main purpose.
The original wordings of the order status are misleading for most users, resulting in high error rate when performing task#3 (Look for order numbers for pickup validations). So I adjusted the wording on number of action buttons based on user feedback, in order to clarify the expected action.
1) Fast iteration promotes design learning
It was incredibly helpful and rewarding to conduct usability testing, hearing from my participants about the problems they encountered and their opinions about my design solutions.
2) No problem is too big or too small
Even though I chose to redesign a single flow in this case I still found a lot of small details that could be improved.
Rather than coming up with the ”best solution” and spending more time perfecting it, exploring more solutions allowed me to consider different concepts and take action on what design would work best in the existing information architecture.
I was in charge of designing the product browsing pages and user profile pages.
And I'll focus on these for ideation and just show the big decisions we had.
I came up with three concepts about how we can emphasize values during the browsing experience.
After some deliberation, we decided to focus on Idea B. We found that Idea A does not have enough recognition and might be mistaken as an ad. Idea C might be hard to navigate through.
We eliminate Idea C due to technical complexity. Then we decided to try out both Idea A and B!
One of our stakeholders wanted to integrate the gaming experience onto the platform. However, this was quite a challenge for me.
For the following reasons:
So I brainstormed on how the page could look like and came up with 2 options on user profile and 2 options on gaming profile.
My goal here is to provide a fun and exciting experience with easy wayfinding and no confusion.
After discussions, we decide to test these combinations out internally and gather feedback.
I asked users to perform 2 tasks in order to ensure the quality of wayfinding experience on user profile pages:
Task1: Look instructions on how to use your game tokens
Task2: Look for leaderboard
I recorded time-on-task and observed errors made by users.
I also gathered feedback from usability testing:
Based on the feedback and testing results, wayfinding experience is a crucial factor to providing a good UX. In order to achieve the goal we've set, I made the page less complicated and also consider technical constraints.
Now that the design team handed off the designs I got time to dig deeper on the colors. The current colors are providing insufficient contrast between foreground and background.
When I audited color usage on the website, I discovered that most of the default text colors and we were using did not meet the WACG contrast threshold.
I then tried to darken the colors by 20%, but here's the horrifying result I got:
I refuse believe we have to choose between accessibility and pretty, there must be another solution...
After research, I learned that material design uses luminance rather than hue to create an accessible color palette. I created a tonal palette and examine color contrast.
Fortunately, all of the colors passes the WCAG 2.0 compliance now!
The Solution (for now)
While color contrast is crucial for accessibility and needs to be resolved, we decided to focus on improving the navigation bar and main button colors.
