"When is this going live? I will totally sign up!"
~ Usability study participant
Overview
Jraf was my very first design. It was my course project for the Google UX Design Certificate course.
Jraf is a platform that allows people living around the same area to collaborate on meals, so that everyone can get cooked or raw meals delivered to them for much better prices.
Prototype is temporarily unavailable
The Product
The Jraf app connects people with special dietary needs with each other, and then with chefs willing to cook for them. The giraffe app targets working class people, with special dietary needs, who lack the time to make their own meals.
Project duration
5 months
The Problem
People with special dietary needs (due to their health or choices), who don’t have time to make their own meals, struggle to find suitable meals at local restaurants.
The Goal
An app that allows people with special dietary needs access meals that suit their dietary needs.
My Role
I conceptualized and designed this idea from start to finish.
My Responsbilities
UX Research, Ideation, Wireframing, low and high-fidelity prototyping, branding, design system, conducting usability studies, accounting for accessibility, and iterating on designs.
Foundational research
I conducted a survey using Google forms, and I conducted interviews over Zoom to get a deep dive into the thoughts of my potential users.
User groups identified through research were single working adults who don’t have time to cook meals; Students who needed a cheaper option for quality meals; and family people who needed cheaper options to get quality food for their family.
I Then empathized with users by creating user personas, empathy maps, and user journey maps, to understand the users I’m designing for and their needs, and to better put myself in their circumstances.
I also conducted a competitive audit to understand what players in the industry are already doing: What they are doing well, and what could be improved upon, based on feedback from their users.
Paper Wireframes
My goal with the wireframes was to design a flow that is familiar to users, intuitive and easy to navigate. I also wanted to discover all possible obstacles that could hinder a smooth flow.
Home Timeline
Food Description Page
Check Out
Profile Page
Digital Wireframes
Changes were made based on feedback from study participants.
Paper Timeline
Digital Timeline
Paper Profile
Digital Profile
Low Fidelity Prototype
Using the completed set of digital wireframes, I created a low fidelity prototype.
Usability study
I conducted two rounds of usability studies. Findings from the first study guided the designs from wireframes to mock ups. The second study used a high fidelity prototype and revealed areas that needed refining.
I organized my data in tables, and synthesized my data into themes using sticker notes. This affinity diagram helped me develop data based insights about my design.
Mockups
The first round of usability studies revealed that users wanted to know how far their vendors were from them, and how previous customers felt about their food/service. So we included proximity indicators, and star ratings for vendors in the later designs. We also improved the create meal button on later designs...
Digital Timeline
First Review
Second Review
Third Review
More usability studies and feedback led to a decision to review the layout to reduce cluttering. I also reduced the amount of colors used on the cards to reduce visual load; altered icons to make the product neater and more ergonomic.
Accessibility Considerations
I ensured that the color combinations I used are in line with the WCAG guidelines for more accessibility.
I also ensured that warnings are made with both color codes and words.
I ensured the posts are designed in such a way that all pictures are described.
All our warnings are also accompanied with screen-readable texts, so they are accessible to people with visual impairment.
In creating meals, I ensured there’s an option for speaking, for those who are unable to type.
There are also suggestions while creating meals, to reduce the need for users with motor disabilities to have to type.
Impact
I have gotten a lot of positive feedback from users who have not only found the app intuitive and enjoyable to use, but are also looking forward to see it launched so that they can use it.
Takeaway
What I learned from the process of building this app is that there is no substitute for usability studies and feedback. I have realized that no matter how great i feel my design is, implementing usability studies and feedback always makes it better.
Please take out time to take this short feedback survey. I would love to know what you think about my portfolio.
Thank you for your interest in my work. If you like what you see, do not hesitate to contact me:
