Foodsup-Mobile

DeliveryFreeReturn

grocery delivery app

Mainly supply local restaurant where in

TorontoandMontreal

BACKGROUND AND CONTEXT

As a result of shifts in FoodsUp's business model and marketing strategy, the original version's design and functions no longer align with the expectations of our current customer base, nor the demands of our marketing and operations teams.

Based on feedback from customers using our mobile app for purchasing products and data results from marketing department campaigns, our development team has decided to redesign and develop a new iOS and Android mobile application to address these needs.

Problem statement

Feedbacks from FoodsUP clients

Home page products description fonts size is very hard to read.
Unclear banner layout distracted user to find item which they want.
Unclear “add item” component make user difficult to perceive whether they added items and how much added already.
Can’t login with email, google and facebook account.

Requirements from Operation Team

Add promotions recommend system in search function area for user can buy more discount products.
Enhance the search functionality on the homepage to enable customers to quickly find and purchase the products they desire.

discover

User Research

This project uses face to face interview to serve as a means to validate assumptions made during the early stages of the design process. Gathering direct feedback from users can confirm or challenge initial hypotheses, ensuring that the design decisions are based on real user insights rather than assumptions.

Objective

To understand user’s pain-points during shopping with our app.
To find out the user’s need when using app.
To find out the user experience in searching, selecting, saving and purchasing products on FoodsUP.

Interview Questions

Can you tell me a bit about yourself and your experience with our app?
How often do you use FoodsUp mobile app and for what purposes?
Can you recall a recent experience where you encountered difficulties or frustrations while shopping on our app?
Have you ever abandoned a purchase or left the app because of an issue you encountered? If so, could you describe what happened?
Walk me through the process you typically follow when searching for a specific product on our app.
What improvements or additions would you like to see in future versions of FoodsUp mobile app.

discover

Synthesize KEY INSIGHTS

Through the in-depth interview, participants shared insights regarding their experiences. This data allowed me to gain a deep understanding of users behaviours & perceptions.

I hope there is a feature that can easily place large orders and have multiple payment options available through the mobile app so that I can streamline procurement and control costs effectively.

Mohammad Jethwa

I need quickly order fresh product and ingredients through the mobile app so that I can efficiently manage inventory and ensure smooth kitchen operations.

David Kim

I want to easily place recently purchase order on the mobile app so that I can minimize time spent on grocery shopping.

Allen Hong

I hope to receive real-time updates on inventory quantity and prices through the mobile app so that I can effectively manage inventory and control business expenses.

Maria

discover

cometitive analysis

I began by exploring existing products that meet the user needs & initiated this process with a SWOT analysis. Then I started to research different grocery delivery apps and looked at their flows and key features.

THE IMPORTANT FINDINGS

Enhance order system

Simplifies the browsing, selection, and checkout process, making it easy for users to order groceries with minimal effort.

Improving customer service

Investing in customer service enhancements, such as implementing AI-powered chatbots for instant assistance or improving response times, can boost customer satisfaction.

Establish user trust

Strengthening data security measures and privacy policies can enhance user trust and confidence in the platform.

Tailored Promotional Strategies

Expanding promotional strategies, such as offering personalized discounts based on user preferences or purchase history, can drive customer loyalty and retention.

Define

Design GOALs

Through user interviews and competitive analysis, we gained extensive insights into customers' desire for a streamlined and efficient order system, leading us to uncover several critical imperatives that our solution must address.

Possible Solutions

Simplify checkout steps to make it easier for users.
Add one-click reorder for frequently purchased items.
Allow users to customize delivery preferences during checkout.
Provide real-time updates on order status.
Notify users through various channels (push notifications, email, SMS).
Partner with trusted payment gateways to ensure secure transactions and PCI compliance, offering users diverse payment options while protecting their financial information.
Create a user-friendly return portal.
Clarify return policies for easy understanding.
Develop interactive onboarding tutorials or walkthroughs that guide new users through key app features and functionalities
Providing contextual help resources like tooltips and pop-up guides for instant assistance, reducing frustration and enhancing user confidence.

Define

Prioritize design solutions

we assess the technical feasibility and potential impact of each design solution, considering factors like development resources and timeline constraints. Finally, we validate our prioritization with stakeholders, ensuring consensus and alignment before moving forward with implementation.

Final design goals

Streamlined Place Order Process

Smart auto-fill feature to suggest commonly used items or addresses.
Optimizing the checkout flow with multiple payment options.
Quick reorder feature for frequent items.

Interactive onboarding page

This onboard page aims to accurately identify user types and assist them in easily finding the products they desire.

Enhance log in method

This design aim to offer users a quick and convenient way to access their accounts while ensuring their security and privacy are protected.

design

Initial Concepts

Based on insights gathered from user interview and the business requirements from marketing team, I started to create the user flows and wireframes.

USER FLOW

WIREFRAME

For the further clear understanding of how user will interact with the application. I crafted wireframe by on user flow.

Design

DESIGN SYSTEM

Creating a design system before mockups is crucial as it sets the foundation for a consistent visual language and user experience. It streamlines the design process by providing reusable elements and guidelines. Ultimately, it saves time, maintains consistency, and allows for easier scalability and updates.

Challenge

Developers and designers struggle with design asset finding and sync issues

As a design lead in our company to transition to Figma as our primary design tool for an actual project, we encountered challenges, where developers and designers offen faced issues with finding design assets and keeping collaboration in sync.

What I Did

Created a Color-code status File Management System

Based on feedback from developers and designers struggling to locate design files for development and design, and product managers' confusion regarding which files are ready for review, I've decided to implement a color-coded status system. Each file will be assigned a different status: red for design, yellow for review-ready, green for development-ready, and blue for prototype. This approach will facilitate quick identification of files for each team member, significantly reducing communication costs and accelerating project development.

Tony Fan