Giving the users a solution and flexibility to discover locations to have a quick lunch, dinner, or have a coffee date. If a person met with uncertainty, by giving them options and keeping accessible and simple tags to meet their preferences, the app 'Munchies' gives the opportunity to users to quickly find something without having to browse all over the place.
As it was an individual project, I designed and created elements, components, conducted usability testing, interviews and a design system in Figma
"How might I enable users to discover restaurants that cater to their dietary preferences, and in instances where they are unsure about their dining choice, how can I assist in making recommendations on their behalf? "
Through user interviews, I identified a consistent pattern of users seeking restaurants that cater to specific dietary needs, often influencing their decision-making. My solution was to incorporate dietary and cuisine tags for streamlined searches, forming the app’s core feature. In addition, I introduced a randomiser to assist users in making a decision in selecting a cuisine to go to.
"I have a lot of gluten-free and dairy-free friends, so whenever I go somewhere, I always keep an eye out to see if there were options."
To begin with concepting, I designed a site map to clearly outline the main features and their interconnected paths. Given time constraints, I prioritised essential features, allowing for focused attention on detail and refinement. The features being the search function, randomiser, and the results. I was able to expand the features into more paths allowing more interactivity and detail.
The search function was straightforward, however I considered with previous feedback from user interviews what tags would be used to help the users with their dietary requirements and how it will it determine their result. I thought of how large the tags would be, how much space there should be between the borders and names, font size, and how it appears on a mobile screen. The search function, when the user taps on the search bar triggers a pop-up with tags that have dietary requirements and cuisine type. Users are limited to two tags as I discovered in the data collected most people only have one or two requirements when it comes to dietary and cuisine types. If there wasn’t a tag that the user was searching for, users are able to search up whatever they want. Affordances and signifiers were crucial to help users recognise if that feature is active or not, for example, the ‘discover’ button is greyed out implying that it’s inactive which means the users are unable to search until they pick a minimum of one tag. I considered how users interacted with their phones, what gestures would be used to complete an action or navigation and wanted to see if I would be able to achieve something like that in the design.
After finalising what was going to be included in the app, I begun sketching where features will be located. In this demonstration there will be an existing user logging in. Then creating multiple iterations of the features until I was satisfied, applying UX and UI principles to make it accessible and easy for users to use.
After doing rough concepts and sketches, figuring out the navigation with wireframing, what colours will be used I begun building the prototype keeping in mind with the data, feedback, UX/UI principles and methodologies that will create a successful app. I began with several ideations with low-fidelity prototyping organising the layout and navigation of where pages will be leading to. I kept it simple to focus on features than aesthetics as that will be refined in hi-fidelity prototyping.
Wanting to minimize the tasks, I focused on what features and actions should be prioritised and why it should be there and taken into usability testing. In this version the first feature allowed users to use dietary and cuisine tags to simplify discovering restaurants with multiple results. In this concept, tags exhibit different states: when untouched, they display a colour indicating readiness for selection. Upon selection, a tag appears in the search bar, denoting it has been chosen and can be removed. The discover button becomes active, enabling users to find results aligned with their preferences.
The second feature assists users who are undecided about what to eat, open to any option, or seeking something new. It generates a random restaurant choice, making a decision for them.
The search bar being the main feature, I placed the randomizer below because it wasn’t what I wanted the users to first see when the first get onto the homepage. A pop-up appears when the user decides to use the feature and I used approachable language to set a friendly and fun brand, this will be consistent across the whole app.
There is a loading screen because I wanted to add a bit of realism where users will have to wait for the app to discover restaurants, the circle is bouncing meaning it is still searching and once it’s finished it will lead to the result page.
The result page will primarily show tags that matched with what the user searched for and below will have the contents of the restaurant. There was a lot of consideration with this, since I wanted to decide for the user. Choosing the option of only the result being one option and not multiple because with my own assumptions, I believe it would result into more thinking and hesitation with the user to select a restaurant. After finalising the low-fidelity prototype I then took it to usability testing.
For usability testing, I had three participants who come from different backgrounds of profession who love to go out and eat. I chose these participants because I wanted to explore if people from different backgrounds and knowledge on these apps would affect the way they interact with the app. My initial assumptions were most participants would smoothly navigate through the flow and get to their given tasks which are,
Task one is to find a restaurant that suits your dietary requirement or if you are looking for a cuisine type. Using the “Pizza & Italian”tag or any of the dietary tags.
Task two is if you’re unsure of what to eat, I want you to find the option where you can be randomly given a restaurant to dine at
I carefully observed how they interacted with the app without my instruction and found that it was really straightforward for users to complete to the task. However, out of several findings one stood out to me as it influenced my design decisions.
The feedback closely aligned with my initial concerns about the cleanliness of the tags. Issues with spacing and font size contributed to screen clutter, creating a messy appearance. Among various findings, one standout was that all participants faced in recognising the second feature of the app. There was plenty of feedback on the user interface, it was expected as the prototype was built to test ideas, identify gaps, understand user behaviour, and uncover opportunities to improve.
The usability testing allowed me to make my final decisions and take it to take my prototypes into my hi-fidelity prototyping, refining the details and adding key components that allowed the app to be interactive reaching my goal.
The final design was carefully crafted by feedback that was provided by participants and by applying UX methodologies. The main goal of the app was to provide a service where people can easily find places to dine and drink at, however also keeping the app user friendly was also at priority. With primary focus on user interface, I learned important design principles as follows:
Consistency, by maintaining unified theme and navigation structure throughout all sections of the app. Ensuring the visual elements, such as colours, fonts, and design elements remain seamless, reducing cognitive load for users.
Feedback, providing clear guidance for users who are met with errors and then informing them with next steps.
Simplicity, minimising the amount of tasks and flows the user has to travel to efficiently reach their destination.
Accessibility, using triple-A standards for colour contrast to enhance visibility for users with visual impairments, ensuring readability, and reducing eye strain.
In this assignment, learning about how accessibility can impact user engagement on a service or product made me realise how crucial it was to the design process. Coming into this project, I initially had ideas that user interface was as simple as making the app look aesthetically pleasing, however I discovered that there was a side that was never explored. I never considered the importance of making the app accessible for users who may suffer from physical or cognitive abilities and upon realising that, it was so impactful that it changed the way I design. Always keeping in mind at the early stages of the design process that accessibility is one of priority in my designs.
This project allowed me to showcase my skills in user interface design, creating aesthetically interactive prototypes in Figma. I personally find a lot of interest and enjoyment creating interactive prototypes and testing it with participants, receiving feedback and having the opportunity to discover holes that I may have missed and improve from there.