Project
About
KIN Food Halls
KIN Drop Mobile App

KIN is Hong Kong's brand new sustainable food hall. KIN offers more variety and better quality in more sustainable ways. For next business stage, our aims is design the NEW App to ordering and build the relationship with customer.

UI UX design
Usability testing
Design system
ROLE
Product Designer (UX/UI)
TIME
20 weeks
TASK
Design New Mobile App | Usability Testing |
User Research | Design System
TOOLS
Figma | Maze
Background
Design a new App to help improve a user's experience through the existing application and create a new structure to provide an easier and smoother experience for users.
Key Learning Cycle

MEASURE

  • Measure the traction based on the data
  • Event traction (Completion rate / Click rate)
  • Why is it successful/failed?
  • Return on Investment(ROI)?
    (Worth building more on it?)

    • LEARN

  • User behavior / Market research
  • Study current successful business model
  • Competitor analysis
  • Make hypothesis based on data/research with evidence support
  • Learn and study the date (empathy/persona)

    • BUILD

  • Based on the hypothesis
  • Build MVP to test the traction
    • User Persona

    Since I wan't very familiar with this industry, I began with some secondary research to gain a better understanding of the market trends. To make sure that my decisions moving forward in the process are user-centered, I wanted to have a clear understanding of who KIN users are. I then conducted interviews to learn more about the different experiences people have had with ordering food.

    Flow Diagram

    Before I start designing or building app, I created the flow diagrams first, it can help provide clarity before diving into design and development.

    Mind-map

    It can clear to know what will show on the screens and what can user do in these screens.

    Wireframe

    Using my understanding of the user, our goals, the architecture, and the user’s interaction with the app, I worked on making informed decisions on how to design KIN Drop screens by sketching low-fidelity wireframes.

    Mid Fidelity Prototype
    Taking the wireframes, I then worked on creating a mid-fidelity, limited functionality prototype, using Figma, to use for usability testing.
    Wireframe - Screen Flows

    Screen flows are a combination of wireframes and flowcharts. With that information in hand, it can explain better the decisions I've made regarding the interaction design.

    Usability Testing

    For usability testing, I created the testing / questionare by Maze. The users were asked to share what they were doing and feeling while interacting with the prototype and trying to complete the tasks given to them.

    Screen Flows

    This is a screen flow, it can explain better with management and developers, make it easy to understand the component for co-worker.

    UI Design

    Created the design system for consistency. It makes the design workflow smoother and faster. The color, typography, spacing and many such other items clearly defined ensures consistency across the design file.

    Easy create
    and log in account
    User is easy to Log in or Sign up, it is simple way to log in and registeration.
    To order your food

    The location drop down is important for user when order the food as some stores will provide an exclusive offer or product only.

    For easier to order, the category bar will be stick on top while the screen is keep scrolling.

    Easy payment and
    track your active order
    Toggle is easy to change the order to takeaway or keep to dine in and have a quick look for order summary. When finished the ordering, go to track the information and review the order details.
    Manage
    your profile
    User can change the account information and manage the App notification.