Tony Fan

grocery delivery app
Mainly supply local restaurant where in
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.
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.

Interview Questions
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.
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.
Competitive _Analysis
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.
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
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.
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.
userflow_onboarding userflow_placeorder userflow_login
For the further clear understanding of how user will interact with the application. I crafted wireframe by on user flow.
wireframe_onboarding wireframe_placeorder wireframe_login
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.
mockup_onboarding Foodsup_Design_system
After receiving feedback from usability tests, we begin creating the final mockups that incorporate the suggested improvements. These refined mockups are then handed off to developers for implementation.
Foodsup_Design_system mockup_login mockup_placeorder
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.
View more