UX|UI case study: Udacity Café App
01 challenge
An online educational organization is considering opening a digitally enabled café experience. As part of this experience, students will be able to use an application located separately from the online classroom, to place drink orders, motivate them to progress through the curriculum and facilitate a productive study environment. For students of online courses, it can often be difficult to find a place to focus and progress steadily through course work. Udacity cafy app is designed to address this issue.
My goal in this project is:
User interviews provide insights into beverage ordering behavior, which are subsequently used to generate proven low-fidelity product concepts for a beverage ordering application.
There are numerous methods to customize a drink ordering experience, as well as numerous app features to consider.
After observing user interviews, I narrowed down some my research to focus on some areas of design, then implemented those designs in Figma.
Tools used: Figma, Miro ,Mobbin, Lookback, Zeplin.
Pictures from Pexels and Unsplash.
02 main tasks
- Research synthesis: User interviews , Affinity mapping
- Ideation: feature ideation , feature prioritization, paper sketches
- Implementation: low/high-fidelity prototypes and usability testing
03 discover and define
Following the creation of a research plan, I began obtaining information from the target audience by listening to 3 recordings of coffee drinkers semi-structured interviews their café experiences and habits, as well as identifying the issues customers confront and how they are addressed on sticky notes.
I synthesized the data I gathered from the interviews write them on sticky notes using Miro then regrouped sticky notes by attributes on an affinity map. This gave me the opportunity to look at possibilities for a mobile app project, which I turned into “How Might We (HMW)” questions:
- How might we propose a creative environment in the coffee?
- How might we have clients using loyalty cards/programs?
- How might we propose a collective but isolate environment?
- How might we create a personalized service?
Users were divided according to their daily routine, the reason for their interest in the drinks available in coffee shops, their experiences in choosing coffee shops and choosing those drinks and where they chose to enjoy the drinks.
After completing my research I was particularly surprised with these insights :
- Quick drinks are ritual drinks for people who have very limited time in the morning to get ready for work
- 80% of the users need applications to check the menu and benefits
- Users don’t have a loyalty card in cafes but they appreciate the incentive
- 67% of people love to be treated with consideration of personalization
- Most of the users appreciate the high-quality of the content and they love to try new things
- Drink is the incentive
- Most users were frustrated when they did not find a suitable environment when they went to coffee shops to work
- Going to the suggested cafes to work or at least to be social
04 ideation and prioritization
There are so many different ways to create a drink ordering experience, and so many different features of the app that I documented in little cards in a brainstorming session.
Then I attempted to choose the most appropriate features , All features found were not necessarily good or easy to implement. That is why I had to evaluate them objectively through the process of feature prioritization .For this, I used the complex value matrix , which helped me prioritize these four primary features: personalized menu, allow choice of environment for working/mood, gamification/Loyalty programs , and rating & reviews.
05 Design: Concepts & Sketching
Solution:
The application aims to promote these location-based cafes and enable users to place orders efficiently; They can choose and buy their drinks in advance.
To encourage users to buy locally, a reward-based system is implemented: with each order, the user gets discounts on other products or free drinks after a certain number of visits.
I created an initial paper sketch with “Crazy 8 method” to help my organize my ideas into real features . The crazy-8 technique used to develop a large number of distinct ideas in a short period of time to increase creativity.
To avoid getting caught down with anything other than the feature I was designing for, I kept my sketches minimal and rudimentary.
The idea of drawing was a good step to start focusing our attention on a personalized application approach, choosing the environment/mood of the coffee customer, and choosing the delivery or pickup of the order. In addition to the great feature, which is to track the progress of training courses.
Home screen idea that suggests re-ordering the last drinks and foods ordered by customers. I also added the possibility for the client to choose the environment in which they would like to sit. Work, leisure or relaxation environment. In the event that he wants a quiet place to work or prefers the presence of other people near him.
User Flow:
After the feature prioritization , I planned the visual representation of the many avenues that can be taken when using an app. I used a case flow for drink ordering, with notations based on participant data, to highlight feature enhancements.
LO-FI wireframes : After that, I used Figma to create the low-fidelity wireframes. This stage aids with the overall flow and structure to see how simple the user flow was and to identify any conversion roadblocks before any effort is spent on the visual interface, allowing time and therefore costs to be saved during work on it . It is a vital step in developing a high-fidelity prototype. I ran a two remote usability tests after developing a low-fidelity prototype. Menu layout, navigation, and order customization were among the usability tasks.
I did 2 iterations for the Lo-fidelity wireframes to settle on the final MVP (Minimal Viable Product)
06 Develop
Inspiration :10 applications were installed and checked during the design process to take inspiration from it and see the creative features in it that may help me build my application. Inspirations feed :Mobbin ,Behance ,Pinterest.
Style guide: I started designing the look and feel once the user flow went well by producing a style guide that defined font, color palette, and picture styles. I used the style guide to create the initial iteration of the prototype and tested it for accessibility as well as usability. The style guide help to create consistency between UI and UX making it easier for designers and developers to communicate and collaborate .
Prototyping:
The most successful concepts were then improved further by creating high-fidelity wireframes and connecting them to build a clickable prototype for Udacity students to test the application. The information received was utilized to analyze the issues and contribute to the general enhancement of the Udacity café app’s user experience.
07 Test :Validation & Feedback
I iterated the design first based on the results I got it from Webaim site for measures sites accessibility. Accessibility has always been important in the design so that most people can get the most out of the app. This is healthier than ever today. By spending some time evaluating accessibility on the screens, I’ve seen some significant “bugs” like the contrast between the background color and the foreground text was insufficient,, or on my CTA button. As well as mistakes in select the size of text . and the WCAG criteria were not met with a ‘AAA’ rating.
Second I iterated the design based on Data and Key performance indicators(KPI). I wanted to evaluate if this digital prototype was easy to use, if it had any difficulties, or if there were any pain points. In order to accomplish this, I jotted down some usability tasks while following the flow of my design.
The tasks were:
- Understand the home page
- Navigate in delivery option
- Select user location
- Select primary item/card to order
- Send item to shopping cart
- Confirm order
On my validating testing on 10 participants using “Lookback” service I got these insights :
1- On the registration page, it seems that users prefer to register with Google because it is faster. The results indicate that the Sign in with Google option was important to include. It is important that the designs are intuitive so that the user does not get confused, but instead complete their journey without any hesitation.
2- We found that some details such as the change button next to the location on the “shopping cart” page are important and have a significant impact on the success of the task.
3-We found that our application form was very simple. We’ve kept it as simple as possible, because we don’t want users to get confused which could lead to them dropping out of the user journey.
4- The Shopping Cart page has content stacked on top of each other just to make use of the space. But we put the price and method of payment at the forefront, because often this is important to the customer, and then the rest of the information is sequenced according to its importance.
5- The home page contains a re-request of the latter, a feature that has won the admiration of some users who constantly drink their favorite type of coffee or tea and do not usually change it.
6- Most of screens are understood by users
7- Users would like to see reviews / ratings
08 Digital prototype
After taking notes and ideas from my testing phase, I went back to refining my designs. I have updated my personalization screen by providing the user with a clearer layout and adding social proof as other users’ comments on the product. The size and color of the text and buttons have been changed. A “Change Location” button has also been added on the shopping cart page.
The final prototype can be found here: https://www.figma.com/proto/lD7HdAkx7uo1syHCbBM9Tr/Udacity-Reem-Ahmed-p2?node-id=242%3A2646&scaling=scale-down&page-id=242%3A2365
09Solution and impact overview
This latest project was my user experience case study in the User Experience Designer program. I was excited and nervous about this. I realized that it is very important to prioritize the user’s needs towards the set goals. It is important to keep asking why? And don’t be afraid of irritation designs. Another challenge was to match Udacity’s current aesthetic but still play with the visuals. Finally, I got a simple, custom-made coffee ordering app for Udacity students, allowing loyal customers to quickly order regular coffee and choose the best place to enjoy it. It also allows students to track their progress in courses It motivates them to finish it.
This project was a great opportunity for me to push myself and hone my design skills.
Thanx for reading :) .your feedback and appreciation are always welcome 🙏
My linkedin account : https://www.linkedin.com/in/reem-bahathiq-ab4080147/
My email: reembahathiq@gmail.com
