Case Study 2 | Food Quiz App
Project Overview
A food quiz” application that could also be implemented into a cooking school’s website or equivalent to help improve the learning/user experience such as engagement, fulfillment and results while increasing customer retention.
CHALLENGE
Learning about food, recipes and how to prepare and cook meals is cumbersome whether you are a busy person or someone that don’t want to spend a lot of time searching for information.
GOAL
To bring collected research data/information and convert that into a more optimized, pedagogic, fun experience that make the users feel they have actually learned something at the end.
MY ROLE/RESPONSIBILITIES
UX- and Visual Designer for the “Food Quiz app” from conception to delivery.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on low- and high-fidelity designs.
USER RESEARCH | SUMMARY
I conducted interviews, empathy maps and secondary research to better get an understanding of the users (demographic/s) buying patterns on- and offline for art related items.
My assumptions about “food quiz” takers/users that would appreciate a more optimized version of a food quiz application, were all dependent on a how the quiz was designed, conducted, and if the process itself was pedagogic enough to convey a satisfactory experience for he user/learner at the end.
Pain Points
I conducted interviews, empathy maps and secondary research to better get an understanding of the users (demographic/s) buying patterns on- and offline for art related items. My assumptions about “art interested” users that would appreciate an online auction/bidding service were all dependent on a secure, simple and safe purchase process. So, not only the bidding part itself but how the payment and shipping could be fulfilled satisfactory.
ACCESSIBILITY
All users have different (pre)conditions which needs to be taken into consideration for both design and functionality including necessities like help and support.
TIME
Users have different schedules and living patterns and there is also a lack of time when learning and converting accumulated knowledge into practical skills for many users.
SIMPLICITY
Many users find it difficult and sometimes confusing finding quizzes that match up to their expectations. This is most or many time dependant on the lack of a well-thought filter functionality, a busy website with too much content or bad grammar.
Exploration/Discovery
PERSONA
All users have different (pre)conditions which needs to be taken into consideration for both design and functionality.
USER JOURNEY MAP
Users have different schedules and living patterns which means the user experience should be the same despite time of the day.
Sitemap
The menu feature for the low-fidelity web version fell short initially not adding in a sub-menu/dropdown with appropriate sub categories. The users were more interested in scrolling or “navigating” through the different sections manually rather than using the topnav. (Good and bad). Once a dropdown or any top nav category “button” with visible feedback (hover or equivalent) were added, the attention towards the topnav section increased.
UX Design Process
PAPER WIREFRAMES (Web)
Drafting different screens on paper, here the “Home/Dashboard screen”, ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the “Home/Dashboard screen”, I wanted it to be clean, simple and easy to interact with make sure the quizzes were categorized and layed out hierarchically.
I also emphasized on the hero banner area trying to making it more engaging. The color-framed versions below, #4 and #6, were the ones i ended up finalizing on when moving on and converting them to a “digital format” in Adobe XD.
DIGITAL SCREEN VARIATIONS (Web, Tablet & Mobile)
Making sure i covered as many users as possible i wanted to include other devices/platforms and screen sizes as well.
LOW FIDELITY PROTOTYPE
Using the completed set of digital wireframes, I created a low-fidelity prototype. I wanted to convey user tasks/flows that was relevant to the results from my user research and to be used further in any usability tests or iterative processes.
View the Food Quiz app | Low-fidelity prototype
DIGITAL LOW-FIDELITY WIREFRAMES
For the Home/Dashboard screen (on the left) as the other screens created I wanted to make sure I implemented as much as possible from feedback and findings from the user research, as well as my secondary research.
The goal here was to meet expectations early on as well as minimizing any further time constraints for future rounds of iterative processes.
USABILITY STUDY | FINDINGS
I conducted two rounds of unmoderated usability studies with 5 participants in both US and Sweden for a length of about 15-20 min.
Findings from the first study, using the low-fidelity prototype, helped guide the designs from wireframes to mockups and to focus on specific areas that needed a more user-friendly and better solutions.
The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
ROUND 1 FINDINGS
Non-clickable areas
The lack of guidance on last quiz page
Topnav is missing or lacking sub nav
ROUND 2 FINDINGS
Use more micro-interactions”
Payment method/card should be indicated
Final Designs
Through user- and secondary research i got some of the features I wanted, already in place, in the early version or before the usability study for the “quiz section” screen (below). These were mainly a “step-by-step process indicator/progress bar” and a “multiple-choice format” which were further enhanced after the usability study, making it more clear on where in the process the user is and with the option to toggle back and forth if necessary. Some of the confusion during the usability study was the lack of “selective modes” for the different answers which I added for the high-fidelity version.
MOCKUPS | QUIZ - PROGRESS BAR
DIGITAL SCREEN VARIATIONS (Web, Tablet & Mobile)
Making sure i covered as many users as possible i wanted to include other devices/platforms and screen sizes as well.
HIGH-FIDELITY PROTOTYPE
The final high-fidelity prototype presented offer a more engaging and functional user experience such as more ways to navigate to the “quiz section” as one example. More real estate allowed for some imagery to be added in the quiz section to make it a bit more visual appealing, still not too overwhelming taking the user’s attention away from the content.
View the Auction app | High-fidelity prototype
Accessibility Considerations
Expand on inclusive design, adding an accessibility menu, to embrace diversity as well as a search bar.
Mark/tag visited links or items to facilitate user interaction and speed up accessibility for newer or not yet visited pages/quizzes.
Add options to not only retake a quiz but also to be able to see in-/correct answers and at the same time add in a customized result page.
Conclusions
IMPACT
It seems the app can help (art interested) customers to easier make a purchase in a secure way after going through an engaging experience putting the user in the center.
”Quick, easy process and helpful step-by-step process indicator for payment.”
WHAT I HAVE LEARNED
One of the most important things i have learned working on this project is the importance of collecting data/information (user- ux-/secondary research studies, competition analysis) at the beginning of the project and all along the road to make any iterative process/es as smooth and optimized as possible.
Next Steps…
Another round of usability study making sure the app corresponds to any changes and updates that have been done and meeting up with user/customer expectations.
Implement additional features that would facilitate the user experience even more through design and functionality.
Conduct another round of user research to see how most recent (Next steps #2) works out before “finalizing” the app and ship it to the developers.