Timeline: 2 Weeks
Materials: Cards, Sticky Notes, Pen, Paper, Balsamiq, Figma/XD
UX Techniques Used: Competitive/Comparative Analysis, Mind Mapping, Card Sorting, User Personas, Systems Map, Site Map, User Flows, Wireframing, Prototyping, Usability Testing
For this project I was provided with a brief to design a brand new on-campus e-food delivery mobile application website for University of Portharcourt, the pioneer University in Rivers State. While the primary goal of the food delivery application was to take food to students and give them variety in food options, they also wanted to broaden their customer reach beyond delivery, by allowing food items to be purchased online for delivery or for in store pickup, and also creating a community on the app where students can post reviews and feedbacks.
The app needed to reinforce values: traditional, fun, and creative. The app also needed to distinguish iDelicacy from other food delivery apps by emphasizing their community features.
The primary business goals for this app included:·
Having clear ways of locating specific food vendors
· Ability to support pages for registered vendor
· Having an efficient means of purchasing one or more products· Steering customers towards popular products in their area
· Tracking food delivery
· Membership functionality enabled
User Research User Personas
Who are we really designing this application for? With the brief I was given, the client had already defined 3 user personas, each with specific needs and pain points that needed to be addressed in the application.
Based on the three user personas, I identified the main user needs I wanted to address in the application while also taking into consideration the needs of studentson campus.
The primary needs I defined were:
1. Clear product organization for a seamless shopping experience
2. Product search to easily find products
3. Helpful Product Suggestions that reflects iDelicacy's goal
4. Customer brand relationship to establish trust
5. Detailed product information to ensure proper product selection
6. Product reviews to help make informed buying decisions and allow for user input
7. Efficient checkout process to save users time and allow for easy purchase of products
Competitor Research/Comparative Research
To gain inspiration for my food delivery app, I began by identifying 3 main competitors, specifically food vendors platforms in the Niger Delta of Nigeria, and 3 main competitors came up.
The direct competitors I analyzed included cuisine-in-minutes and Go Food Nigeria. The indirect competitors were Jumia Food.
My goal was to compare and identify common features across these platforms and potential opportunities for iDelicacy to differentiate itself.
The most important takeaway from this activity was learning how different platforms organized their food vendor selection and the overall layouts they used. This was helpful information that helped solidify the stage for my second phase of research.
Mind Mapping and User Journey
After completing my competitor/comparative research, I then went on to complete a mind map. For this project, the needs of the business and the needs of its customers/user personas were all laid out. This activity helped me organize the information into more defined ideas, and then establish relationships and hierarchy amongst those ideas.
Once I organized all my insights from the exploration phase, I began to design the app. To start this process, I began to sketch several of the app main screens, using my userflows as a guide. This allowed me to quickly explore several concepts for the app layout.
I then tested this with 3 participants to validate whether these solutions addressed both the user and business needs.
Based on the feedback and personal insights I learned from the sketching phase, I began to design my first wireframes using Balsamiq. I made sure to prioritize the features that would best address the needs of the users throughout the application.
I kept the homepage clean and simple, similar to Uber, users can see themselves on the map. To allow users to easily locate and find products I included a search bar. Users are able to see existing vendors registered on the app as well (pointers).
2. Product Page
Users are able to search through different vendors profiles and average prices on the app. On clicking on the Vendors profile, the user can see vendors profile page, and menu too.
4. Cart Summary Page
Once the checkout now button or cart icon was selected, a user would be led to the cart summary page pictured below. This was the first step in the checkout process where users could review and make changes to their cart as appropriate. Users can include their details for delivery.
6. Community Feature
This is an area where users can post content and engage other users contents. Basically, building an online community on campus.
Once I completed my wireframes, I created a prototype of iDelicacy to begin usability testing. This would allow me to evaluate how students would engage with the proposed app solution and validate whether it was addressing their needs. It was important to test with mid-fidelity, greyscale wireframes to gather honest, critical feedback from potential customers and to solidify the functionality of the app before addressing the visual design. I conducted a usability test with 3 participants and asked them to complete three different scenarios to put themselves into the shoes of my user personas.
These three scenarios included:
1. Your in student hall, you just heard food has finished in the main cafeteria. Show me how you would find food outside usual serving time and successfully purchase it.
2. Show me how to find other food options stress-free.
3. How can I find out the best rated food vendors around my area?
These were my key findings from the tests:
Overall users were able to easily navigate the app and locate products and information
Some users found the community feature a bit distracting
Some felt there could be alternative methods of making payments e.g. USSD codes
The Next Steps
This case study represents the start of a bigger design process for the development of this food delivery app.
The next steps I would like to take for this project would be to continue to conduct usability testing and further iterate on my designs.
After defining the “bigger picture” of the experience I needed to provide the users, I created a user flow having the personas in mind, to make this experience more specific to each of their goals. The point of this was to define the intended steps users might take through various sections and actions on the application in order to complete their goal.
Not only would this allow me to focus on what users needed to accomplish, but also how to deliver that experience in the most effective yet simple manner.