%202.png)
Timeline
4 weeks
January 2023
Solo
Role
UX/ UI Designer
Context
Sprightly Salads
A healthier alternative to fast-food! Sprightly Salads offers custom salads, wraps, smoothies desserts and much more. For busy people on-the-go who prefer to skip the line and order ahead for easy pickup and convenience.
Goal
A convenient online food-ordering experience
With the launch of the Sprightly Salads mobile app, we hope to bring an easy and convenient online food ordering and restaurant pickup experience to our target audiences.
User Needs
-
Quick ordering process
-
Good overall flow and organization of app
-
Easily able to customize an item or choose from the pre-made options
​Business Needs
​
-
Increase customer acquisition
-
Improved customer loyalty
-
Increase revenue
To keep in mind who we are designing for, a persona was created representing the primary target audience's demographics, behaviours, pain points and needs.
Persona
Meet Ella!
.png)
Development
Mapping Out Task Flows
A user flow has been created to map out the different pathways of ordering a meal. This will guide us in the development of sketches without having to backtrack and reiterate.
Full view:
.jpg)
Development
User Flows
Close ups:
.jpg)
.jpg)
Development
Designing the Interface
Once the task flows were decided, sketching began to show what each interface in the process would display. This particular flow is a walkthrough of ordering a salad for pickup.
Development
Wireframes: Paper to Digital
.png)
The initial sketches were then converted into low-fidelity wireframes using Figma. Early usability testing was conducted, which identified and resolved usability issues.
Design
Bringing the Design to Life
To add visual appeal to our design, a moodboard and style tile were created to get a better look and feel for what the interface would look like. From these visual guides, the wireframes were then updated to high-fidelity mockups demonstrating what the final product would look like.
%201.png)
.png)
Introducing
Sprightly Salads
_edited_ed.png){kind=small}
Healthy eating on the go, made simple
.png)
1- Sign Up/ Log In
2- Log In
3- Sign Up
4- Home
_edited.png){kind=small}
5- Order
6- Recent Orders
7- Customize Item
.png)
8- Cart
.png)
.png)
9- Order Details
10- Payment Method
11- Order Confirmation
12- Tracking Order
Final Look
_edited.png){kind=small}
Conclusion
Reflecting Back
Overall, I enjoyed going through process of this project and am proud of the final product, however if I would have done it all again here are my key takeaways:
Iterate, Iterate, Iterate: Although I am happy with the end result, I wish I would have explored more solutions instead of deciding on my first iterations from the start. This would have been most beneficial at the sketching stage of the process where the interfaces where taking place.
​
Embrace Feedback: I’ve come to see mistakes as stepping stones rather than setbacks. I wish I had sought more feedback from others throughout each phase which can be crucial in spotting UI flaws and deeper UX issues, pushing me to improve continuously.
​
​
​
​
​
Next Steps
The next steps for the development of Sprightly Salads would involve conducting additional usability testing on the mockups and iterating based on the feedback.
Thanks for reading
Check out my other work!
.png)