A concept food delivery app that delivers delicious vegan meals and also gives you the option to pick up your meal from anywhere in your city.
Introduction
OVERVIEW
VegaVerde is a restaurant concept represented through a mobile app. The users can order online and have the food delivered in an eco-way (by bike) or they can pick it up themselves. None of our products contain or are packaged in plastic. All of the packaging is reusable, recyclable, or compostable.
The fact that you can order your meals and pick them up from the closes point to your location gives a unique character, along with the bike delivery mode - we care about our planet and the carbon footprint left behind!
BUSINESS GOALS
- create a network franchise-type for VegaVerde to ease access to vegan meals
- cook, prepare meals, and deliver in an eco way, protecting the environment
- recreating traditional meal recipes in a vegan and healthy way
- a dense net of pick-up points to reduce to shorten the distance between clients and the pick-up restaurant,
and also minimize the carbon footprint impact
- increase the order frequency
- increase the conversion rate for returning users
MY RESPONSABILITIES:
-
Determine user priorities and tasks
-
Create and post user surveys online
-
Determined user problems
-
Created user persona
-
Competitive analysis
-
Conduct card sorting
-
Prepare IA, flow chart, and task-flow
-
Designed UI and the design system
DURATION OF THE PROJECT:
October 2022 - February 2023
TEAM INVOLVED:
Jo Ionescu - UX/UI Designer
Hanka Adamczyk - Senior Graphic Designer signet collaboration and creative development of the online marketing presence and marketing campaign
Work Process
CREATIVE PROCESS
USER SURVEYS
To discover the vegan’s pain points, I conducted a survey and interview with vegan people, which helped me create something more helpful for them and the business.
The survey:
I created a survey using Google Forms to collect quantitative information on my target audience: Vegans and Plant-based eaters. I distributed this survey via multiple methods to maximize our reach.
I began to understand what types of people are likely to be in the Vegan audience, and what their primary motivations are.
The followings are the problems and pain points that users encounter when ordering from a vegan restaurant online for pick-up:
1. Availability of menu items - If menu items are frequently sold out, this could frustrate users and cause them to seek alternative options.
2. Accurate menu information - If the menu information online is incorrect or outdated, this could lead to confusion and disappointment for users.
3. Convenient pickup locations - If the closest pickup location is too far away or difficult to find, this could discourage users from using the service.
4. Order accuracy - If orders are frequently incorrect or not prepared as requested, this could cause dissatisfaction among users.
5. Wait time - If the wait time for pickup is too long, this could lead to frustration and inconvenience for users.
6. Technical issues - If the website or ordering platform is slow, buggy, or prone to errors, this could create difficulties for users trying to place an order.
7. Payment issues - If the payment process is confusing, slow, or prone to errors, this could be a source of frustration for users.
8. Quality of food - If the quality of food is inconsistent or not up to the standards, users may not return to the restaurant.
By creating these personas, the franchise can better understand the needs and motivations of its target customers, enabling it to develop more effective marketing and product strategies. By focusing on the pain points and goals of its customers, the franchise will be able to create a more satisfying and relevant customer experience.
AFFINITY MAP
I used a visual tool used to organize and group information, in the form of user research findings, into related categories and themes. To create an affinity map, I needed to first gather data, such as the answers to the survey, and then sort the information into categories based on similarities or themes.
The categories and their related information can then be represented visually, through post-it notes on an artboard in Figma, to create an affinity map.
The goal of an affinity map is to identify patterns and relationships in the data and make it easier to understand and use in decision-making.
This affinity map will help prioritize the features and solutions that need to be developed, to ensure that the app meets the users' needs and pain points, and provides an overall good experience.
COMPETITOR ANALYSIS
A competitor analysis involves evaluating the strengths and weaknesses of existing businesses that offer similar products or services to VegaVerde. Conducting a competitor analysis helped me you understand the market, identify opportunities, and make informed decisions about your business strategy.
Competitor 1: Plant Power Fast Food
Website: https://www.plantpowerfastfood.com/
-
Product/Service Offerings: Plant Power Fast Food is a vegan fast food chain that offers a variety of menu options, including burgers, tacos, and salads. They offer take-out and delivery services and have a mobile app for online ordering.
-
Customer Segments: Plant Power Fast Food targets busy individuals who are looking for quick and convenient vegan meal options.
-
Marketing and Promotion Strategies: Plant Power Fast Food uses social media platforms, influencer partnerships, and targeted online advertising to reach its target audience. They also offer discounts and promotions through their mobile app.
-
Brand Reputation: Plant Power Fast Food has a strong brand reputation for its delicious and affordable vegan options, but it may not appeal to those who are looking for healthier options.
-
Strengths: Plant Power Fast Food has a mobile app for online ordering, a variety of menu options, and affordable pricing.
-
Weaknesses: Plant Power Fast Food's menu may not appeal to those who are looking for healthier options, and its online ordering system may have limitations for those who are not tech-savvy.
Competitor 2: The Green Lion
Website: https://www.thegreenlion.com/
-
Product/Service Offerings: The Green Lion is a high-end vegan restaurant chain that offers a variety of menu options, including entrees, appetizers, and desserts. They offer take-out and delivery services and have a mobile app for online ordering.
-
Customer Segments: The Green Lion targets health-conscious individuals who are looking for upscale and high-quality vegan meal options.
-
Marketing and Promotion Strategies: The Green Lion uses social media platforms, influencer partnerships, and targeted online advertising to reach their target audience. They also offer catering services and private events.
-
Brand Reputation: The Green Lion has a strong brand reputation for their high-quality and delicious vegan options, but they may not appeal to those who are looking for more affordable options.
-
Strengths: The Green Lion has a mobile app for online ordering, a variety of menu options, and a strong brand reputation.
-
Weaknesses: The Green Lion may not appeal to those who are looking for more affordable options, and its menu may not appeal to those who are looking for fast food-style options.
Competitor 3: The Happy Cow
Website: https://www.happycow.net/
-
Product/Service Offerings: The Happy Cow is a vegan restaurant that offers a variety of menu options, including appetizers, and desserts. They offer take-out and delivery services, and have a mobile app for online ordering.
-
Customer Segments: The Happy Cow targets health-conscious individuals who are looking for affordable and high-quality vegan meal options.
-
Marketing and Promotion Strategies: The Happy Cow uses social media platforms, influencer partnerships, and targeted online advertising to reach their target audience. They also offer catering services and special promotions to attract customers.
-
Brand Reputation: The Happy Cow has a positive brand reputation for their affordable and high-quality vegan options, but they may not appeal to those who are looking for more upscale options.
-
Strengths: The Happy Cow has a mobile app for online ordering, a variety of menu options, and a positive brand reputation for their affordable and high-quality options.
-
Weaknesses: The Happy Cow may not appeal to those who are looking for more upscale options, and their menu may not appeal to those who are looking for more unique or creative meal options.
Competitor 4: Vegan Bliss
Website: https://www.veganbliss.com/
-
Product/Service Offerings: Vegan Bliss is a vegan restaurant that offers a variety of menu options, including entrees, appetizers, and desserts. They offer take-out and delivery services and have a mobile app for online ordering.
-
Customer Segments: Vegan Bliss targets individuals who are looking for creative and unique vegan meal options.
-
Marketing and Promotion Strategies: Vegan Bliss uses social media platforms, influencer partnerships, and targeted online advertising to reach their target audience. They also offer catering services and special promotions to attract customers.
-
Brand Reputation: Vegan Bliss has a strong brand reputation for their creative and unique vegan meal options, but they may not appeal to those who are looking for more affordable options.
-
Strengths: Vegan Bliss has a mobile app for online ordering, a variety of unique menu options, and a strong brand reputation for their creative and unique meal options.
-
Weaknesses: Vegan Bliss may not appeal to those who are looking for more affordable options, and their menu may not appeal to those who are looking for more traditional or fast food-style options.
Based on the competitor analysis, I can differentiate myself from the competitors by:
​
-
Focusing on affordability: I can offer a similar quality of vegan options as your competitors but at a more affordable price point.
-
Catering to those who prefer fast food-style options: I can offer menu items that are quick and easy to eat on-the-go.
-
Enhancing the customer experience: I can focus on creating a unique and personalized customer experience, such as offering custom ordering options or a loyalty program.
-
Offering more convenient pick-up options: I can focus on offering more convenient pick-up options, such as drive-thru or mobile ordering, to appeal to those who are looking for a fast and easy experience.
-
Improving your marketing and promotion strategies: I can use new and innovative marketing and promotion strategies, such as virtual events or augmented reality experiences, to reach your target audience and stand out from the competition.
BUSINESS REQUIREMENTS
By understanding the problems and pain points of users, along with who the market and the competition are, the business can prioritize and implement solutions to address these issues in their app.
Business requirements for the vegan restaurant franchise's online ordering app include the following:
-
User-friendly interface: The app should have a user-friendly interface that is easy to navigate and use, allowing users to quickly and easily place orders.
-
Multiple payment options: The app should offer multiple payment options, including credit cards, debit cards, and online payment platforms.
-
Real-time menu updates: The app should have real-time menu updates, allowing users to view the latest menu offerings and availability.
-
Location-based ordering and pick-up: The app should allow users to place orders and choose the nearest location for pick-up, based on their current location.
-
Customization options: The app should allow users to customize their orders, such as selecting the size, ingredients, and spiciness level of their meals.
-
Secure data storage: The app should store user information and payment details securely, using encrypted data storage and secure payment processing.
-
Analytics and reporting: The app should provide analytics and reporting features, allowing the franchise to track customer behavior, order patterns, and overall sales.
-
Push notifications: The app should offer push notifications, allowing users to receive updates on their order status, promotions, and other important information
-
User feedback and support: The app should have a feedback and support system, allowing users to provide feedback and receive support if they encounter any issues with the app.
These requirements can guide the development and design of the app to better meet the needs of users.
The SITEMAP
A site map is a visual representation of a website's structure, which includes all of its pages and the relationships between them.
In VegaVerde's site map, I included the main pages such as the homepage, menu, location, and contact page, and additional pages such FAQ and about.
This site map will serve as a roadmap for the development of my app, helping me to ensure that the user experience is intuitive and all information is easily accessible. Additionally, the site map helps to communicate the overall architecture and content organization of the app, making it a valuable tool for everyone involved in the project.
Crazy 8s
For the main page of this application, I needed to generate as many ideas as possible, so we decided to do it with the Crazy 8 method.
Crazy 8s is a user experience (UX) design technique that involves generating multiple ideas in a short amount of time. The goal is to rapidly come up with as many creative solutions as possible in a limited timeframe. The technique can be used to generate ideas for solving design challenges, brainstorming new features for a product, or exploring different directions for a project. The fast-paced and high-volume approach of Crazy 8s helps to break through creative blocks, encourage divergent thinking, and ultimately lead to more innovative solutions.
The method encouraged me to think outside of the box and come up with creative solutions that I may not have considered otherwise. By working through eight different design concepts, I was able to see a range of possibilities and ultimately select the best approach for the app.
The Crazy 8s method helped me to move quickly and efficiently through the design process,
LOW - FIDELITY WIREFRAMES
The Crazy 8s method is a quick and efficient way of generating a large number of ideas in a short amount of time. This method can be particularly useful in the early stages of the design process when trying to come up with creative solutions to design problems.
The outputs of the Crazy 8s method can then be used as a starting point for creating wireframes.
Wireframes are a visual representation of the layout, structure, and content of a website or application. By starting with a large number of potential solutions generated through the Crazy 8s method, I can rapidly prototype and iterate on potential design solutions, ultimately leading to a more refined and effective wireframe. In this way, the Crazy 8s method can help me to ideate quickly, rapidly test potential solutions, and create wireframes that effectively meet the needs of users.
Wireframes are low-fidelity, visual representations of a product's user interface. They are used in the early stages of design to help visualize and plan the structure and layout of a website or app. The main purpose of wireframes is to communicate the overall structure and layout of the product without focusing on the visual design details. Wireframes typically include the placement of text, images, and other elements, as well as the navigation between pages. They are also often used to test and validate the functionality of the product. Wireframes are a critical part of the design process, as they allow designers and stakeholders to iterate on the product's design and make changes early on, before the product is fully developed.
MOOD BOARD AND HIGH - FIDELITY WIREFRAMES
In the design process of my app, I first started with lo-fi wireframes. These were simple sketches that outlined the basic structure and functionality of the app. However, as I progressed, I realized that it was important to create a more detailed and polished version of the wireframes, which led me to the creation of hi-fi wireframes.
Hi-fi wireframes provide a much more realistic and detailed representation of the final product, as they include more specific design elements such as color, typography, and imagery. This allowed me to not only communicate the functionality of the app but also its overall aesthetic and visual appeal.
Before creating the hi-fi wireframes, I created a mood board to establish the overall look and feel of the app. The mood board was a collection of visual elements, such as images, color swatches, and typography samples, that helped me to define the design direction for the app.
By using the combination of lo-fi and hi-fi wireframes, along with the mood board, I was able to create a cohesive and visually appealing app design that met both the functional and aesthetic requirements of the project.
The mood board is a visual representation that showcases the overall feel and aesthetic of the project.
I created using a combination of images, colors, textures, and typography that are relevant to the project's desired look and feel. The purpose of a mood board is to communicate the visual direction and inspiration behind the project, and it serves as a helpful reference tool for me, the developers, and stakeholders during the design process.
The mood board is a key element in the design process, as it helps to align expectations and provides a clear direction for the project.
High-fidelity (hi-fi) wireframes and prototypes are essential components in the design and development process of a digital product, such as a mobile app. Hi-fi wireframes serve as a blueprint of the app’s design, layout, and functionality, providing a detailed representation of the user interface and user experience. They are created using design tools and help to visualize the flow and navigation of the app, as well as to test and validate design concepts.
A hi-fi prototype, on the other hand, is a more polished version of the wireframe, which includes the design elements and interactions of the final product. It helps to simulate the real experience of using the app, allowing designers and stakeholders to test the user experience and make refinements as needed. Hi-fi prototypes also provide an opportunity for user testing and feedback, which can be invaluable in refining the app’s design and functionality.
THE PROTOTYPE AND USABILITY STUDIES
In my case study, developing a hi-fi wireframe and prototype was a crucial step in the design and development of the VegaVerde.
The hi-fi wireframes provided a clear picture of the app’s layout and functionality.
In contrast, the hi-fi prototype allowed me to test and validate the app’s user experience and make refinements as needed.
For the usability study of the vegan restaurant app, I recruited a diverse group of participants who met our target user demographic. These participants were asked to perform various tasks using the app, while their interactions were recorded and observed by me.
The tasks were designed to evaluate the app's user experience, such as finding and ordering a meal, using the app's features, and navigating through different sections. Participants were asked to think aloud while using the app, giving us insights into their thoughts and feedback on the app's design and functionality.
The study results showed that the overall user experience was positive, with participants finding the app easy to use and navigate. However, some suggestions for improvement were noted, such as adding a filter for specific dietary restrictions and incorporating a save for later feature for saved items.
Based on these findings, we will work to implement the recommended changes and continue to improve the user experience of the vegan restaurant app.
STYLE GUIDE
In designing the style guide for the VegaVerde restaurant app, I carefully considered the brand's values, mission, and target audience.
I chose Bangla MN as the primary font because of its readability, versatility, and aesthetic appeal. It complements the overall style of the app and enhances the user experience.
The color palette was inspired by the brand's commitment to sustainability and the environment. I chose green as the primary color to represent the brand's focus on health and wellness, and yellow as the secondary color to evoke feelings of warmth, positivity, and energy. The other colors were chosen to complement the primary colors and create a cohesive visual identity.
The importance of the colors and font in this project is to create a consistent and recognizable brand identity that resonates with the target audience and reinforces the brand's values and mission.
METRICS
Metrics that can be tracked for VegaVerde Food Pick-Up & Delivery:
​
-
User engagement: This metric can be measured by tracking the number of daily, weekly, or monthly active users, the number of sessions per user, and the average session duration.
-
Retention rate: This metric can help us determine how many users return to the app after their initial visit. We can track the percentage of users who return after a day, a week, or a month.
-
Conversion rate: This metric can be used to track how many users take the desired action, such as placing an order. The conversion rate can be calculated by dividing the number of conversions by the number of app sessions.
-
Customer satisfaction: Customer satisfaction can be tracked by conducting surveys or asking for feedback after a user completes a transaction or visits the restaurant. This feedback can be used to improve the app and the restaurant experience.
-
Revenue: This metric can be measured by tracking the total sales generated through the app. Also, we can track the average order value, the number of orders per day or week, and the revenue generated from promotions and discounts.
-
Social media engagement: Track the number of followers, likes, shares, and comments on your social media channels to gauge engagement and brand awareness.
-
App store ratings and reviews: This metric can help us understand how users perceive the app and the restaurant. We can monitor the app store ratings and reviews to identify areas for improvement and address any negative feedback.
REFLECTION
This UX/UI case study for the vegan restaurant has been an exciting and rewarding project. It has allowed me to apply my skills and knowledge in user experience design to create a digital solution that addresses the needs and pain points of the target users. Through user research, persona creation, prototyping, and usability testing, I was able to create a high-fidelity wireframe that provides an intuitive and seamless user experience.
​
As the world becomes increasingly digital, it is essential for businesses to have a strong online presence and to provide a user-friendly digital experience to their customers. This project has highlighted the importance of user-centered design and the value of listening to the needs and feedback of the target users.
In addition to the user-centered design, the sustainability aspect of the vegan restaurant has been an important factor to consider. It was an exciting challenge to incorporate eco-friendly packaging and non-motorized delivery options into the app to reduce the restaurant's carbon footprint.
​
As a junior UX/UI designer working with a senior graphic designer, I learned a great deal about the importance of collaboration and communication in design. I learned that while UX and UI design are crucial to the user experience, they are only one aspect of a successful design project. I gained an appreciation for the role that graphic design plays in creating a cohesive and impactful visual identity for a product or brand.
Through working with the senior graphic designer, I also learned the importance of attention to detail in the design. I learned to consider every element of a design, from the color palette and typography to the spacing and alignment of elements. I also gained insights into the importance of creating design systems and style guides that ensure consistency and cohesiveness across all aspects of a project.
​
Overall, this UX/UI case study has been an enjoyable and valuable experience. It has allowed me to enhance my skills and understanding of user experience design and sustainability, and I look forward to applying these learnings to future projects.