.png)
SANDWICH SHOP RESPONSIVE WEBSITE
Designed a menu and ordering responsive website for a sandwich business, that aims to deliver customizable healthy sandwiches at competitive prices. Users are busy individuals and working professionals who lack the time for basic needs like preparing healthy food.
Overview
Duration
August 2023 to September 2023
Goal
Design a Responsive Website for Sandwich Shop that allows users to easily order customized healthy sandwiches as per their needs.
Role
UX designer
​
Conception to Delivery
Responsibility
Conducting interviews and competitive audits, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
Understanding users
By understanding the potential user groups through research, it could be derived that the users invested more time in long work hours, career upgrades, exercise, hobbies and interests, personal obligations which made it difficult to plan and cook healthy meals. Due to monotonous routines, they also tried to focus their energy more on personal interests rather than utilize their time on basic needs.
Designing
1
Sitemap
Goal was to design a clear and intuitive navigation using a well planned information architecture.
I focused on incorporating the user’s need and usability to achieve a simple and effective website structure.
2
Paper Wireframes
Drafted paper wireframes most effective in resolving user needs
​
To access the website through different devices, additional screen sizes were considered during the design to ensure that website would be completely responsive.
3
Digital
Wireframes
Considering the pain points of the user collected during research, digital wireframes were implemented to resolve them.
​
Digital wireframes were also created for multiple screen sizes
4
Low Fidelity Prototype
The Low Fidelity Prototype considered a basic user flow of quick and customizable ordering process, so prototype could be tested and analysed by users.
5
Usability
Study
Study findings were conducted based on low fidelity prototypes, which helped to transform the designs from wireframes to mockups along with incorporating insights of the study.
Mockups
Initial design had the customization page with multi-column layout. After usability study, the design was changed to single column, so that users can navigate better. Also, to ensure smooth login flow, I made the layout clear and intuitive for the users
Key Mockups
Desktop version
Tablet and Mobile versions
Based on wireframes, additional screen sizes were considered during mockup as well. This was a necessary step to ensure that website would be completely responsive. So that user can access the website through different devices like mobile and tablets as well.
Takeaways
Impact
The website makes users feel that the Sandwich Shop really focuses on their customer’s need for customizable healthy food options along with having a simple ordering user flow
What I learned
During the website designing for Sandwich Shop, I learnt that though the initial ideas lay a foundation for the design, it is only the start of a process. Plenty insights can be acquired during usability studies and peer feedback which can influence the design iterations.