UX/UI & Graphic Design
UX/UI & Graphic Design
Selected Work on Design Projects:
Selected Work on Design Projects:
CORONALERT
Client: UXPA Mentorship Program Project
Timeline: November 2020 - January 2021
Keywords: app design, UX design, UI design, interaction design, product concept
Tools: Adobe XD, Figma, Sketch, Invision Studio, Photoshop, Mural, SurveyMonkey, Google Forms, Keynote, etc.
INTERACTION DESIGN
I. DEFINE THE PROBLEM
PROBLEM STATEMENT
During the pandemic, people worry about the risk of infection whenever they go outside. They want to be better informed about a place’s risk of the Covid-19 spread so as to make wiser decisions on venues to conduct various outdoor activities. They also want to double-check whether a place would be overly crowded at the time of their presence so as to avoid arriving at a high-risk time.
That’s what I aim to achieve in my design of the Coronalert app. On the app, users could quickly check a location or an area’s risk score on their mobile devices and make outdoor-going decisions accordingly. The app helps its users move one step closer to a safer and less worried life during the quarantine.
Target Users: people who are concerned with the risk of Covid-19 spread when conducting outdoor activities during the pandemic
II. RESEARCH THE PROBLEM
USER SURVEY
To know more about my target user's needs and painpoints, I designed a survey on SurveyMonkey and collected 56 responses from participants located in different regions of the US.
The following charts summarize several most important results I've got from the survey regarding people's outdoor activities during the pandemic and their interest in the Coronalert app.
USER NEEDS CONCEPT MODEL
Based on the survey results showcased above, I boiled down my most important get-aways into the user needs concept model on the right. As you can see, user's primary needs when using such a Coronalert app include four aspects:
1) to check whether a place-to-go is safe or not;
2) to compare multiple locations' risk levels and make better decisions;
3) to pick a safe location for grocery shopping;
4) to pick a safe outdoor location for family/friends gathering.
USER PERSONA
In order to narrow down the scale of this project, I then chose to focus on one individual user persona in the discovery stage of my design: busy working moms who need to grocery shop regularly for the family during the pandemic and quickly search for safe places for their grocery shopping. Such a persona meant at least three things for my Coronalert app:
1) The whole user journey should be as straightforward and simple as possible.
2) The navigation system should be intuitive, effcient and easy to understand.
3) The interface and its information architecture should also be simple and clear because this user group wouldn't want to be bombarded by overloaded information.
III. IDEATE THE SOLUTION
WIREFLOWS
Based on the results of the above pre-design research, I went on to create some simple wireflows for the core user journey: picking a safe grocery store near my home. The key questions I aimed to answer in this ideation process were:
1) How do users search for the information they want on the Coronalert app and how should the search results be presented?
2) How does the app indicate to the user whether a place is safe or not? How can I present the results in a clear and intuitive way?
3) What information should the app give to users and how can this information be visualized effectively?
4) How can the app help users compare the risks of various places when they want to pick the safest ones from multiple choices?
SCREENFLOWS
After finishing the wireflows, I shared it with my UXPA mentor and several potential users. Based on their feedback, I could tell that the above design was still not simple enough. Some users felt that extracting useful information from data charts was too complicated, and my mentor also challenged me to think more thoroughly about whether a map view was truly necessary for the app.
In order to further simplify my design and test whether a map interface is needed, I came up with two different ideations for the higher-fidelity screenflows: one with the map and the other without it. In my new designs, instead of overwhelming the users with a series of complex charts, I chose to present the risk levels of different locations via a straightforward five-star-scale "Coronalert score," which is followed by a simple "evaluation form" containing multiple subcategories. The safe categories would be marked with ticks and the disqualified ones would be marked with cross icons.
Design A - without map
Design B - with map
Also, in the revised screenflows, I discarded the feature of "comparison mode" in the previous wireflows. I replaced it with the simpler process of searching a keyword and getting the search results of safe places to go, sorted from the safest to the least safe ones. No separate comparison would be needed because the search results' order will suffice to indicate such comparison results. Users' further need for personalization can be achieved by changing the filter and sort settings.
If users want to check whether a particular store-to-go is safe or not, they can simply search the grocery store's address or name using the same search bar. But in this scenario, the search results would be a list of relevant grocery stores for users to pick from. Users can then identify the place they're looking for and check its score to see whether it's safe or not.
IV. PROTOTYPE THE SOLUTION
DIGITAL PROTOTYPE
In my interviews with several potential users, I found that most of them preferred the list format to the map view when it comes to the presentation of the search results. However, one participant reminded me that it might be even better if users could have both options and check the map view when needed. Another important feedback I got was about the layout of the list format. Users hoped the Coronalert scores of places could be larger and clearer.
Apart from the points mentioned above, I also made other four major changes when translating the sreenflows to the digital prototype:
1) I added the time slider to the top of the search results pages and enabled users to check the places' safeness at different times;
2) All search results are ranked by safeness and their rankings are marked by numbers, whether in the list format or the map view;
3) Users will see an expanded view when tapping on the list items;
4) In the map mode, when users tap on a certain location mark on the map, the bottom section will immediately locate the corresponding place card and show its information.
V. TEST THE SOLUTION
USABILITY TESTING
After completing the digital prototype, I recruited 5 participants for my usability testing sessions and collected their feedback on the app's design.
Research method: remote moderated usability testing via Zoom (Participants shared their desktop screens when doing tasks.)
Probing technique: concurrently think aloud while working on the tasks + survey questions + retrospective verbal probing in the debriefing interview
Please see below for the summary of my usability testing results.
What went well?
1. The app's overall satisfaction rating was high; most users reported that they would like to download and use the app when it becomes available.
2. Users found the app's visual design simple and clear and the greenish color palette quite fitting.
3. Generally, the app's navigation system was effective and users could easily get the information they need.
4. The information architecture of the place's page was simple and understandable.
5. Most users found the searching process straightforward and easy.
What didn't go well?
1. Some users said the app should provide more information about how the Coronalert scores were calculated, which would make the scores seem more convincing and reliable.
2. Some users found the "user feedback" factor included in the place's evaluation details confusing. They wondered how the app collected users' feedback and to what extent they would be useful.
3. Some users felt that the time slider might not be as intuitive and user-friendly as scroll wheels when picking dates and times.
4. Some users questioned whether the search results' rankings were necessary or trustworthy, and they felt that those rankings might need more justification and data evidence.
