Snack Trip Concept APP

Exploring new app ideas and transforming concepts into actionable deliverables.

Mobile APP
UI Design
Conceptual Design
E-Commerce

Time

4 months

Focus

UI design, E-commerce

Software

Figma

Team

Individual

Using a prompt game, I initiated brainstorming ideas.

Prompt Game

It is a game to give you random situation user groups, and themes etc. to inspire your design ideas.

I been given 4 prompts: Discipline (a generation), Travel, Snack, Nostalgia. I been given some minutes to brainstorm. I started to develop an idea to make a snack trip app where you can see snacks from ancient time or childhood time, and you can buy them online.

I sketched paper prototypes to visualize my idea and imagination.

Paper Prototypes

Added buttons by Figma and connected them as an interactive prototype.

Interactive Prototype
1 - Homepage
2 - Choose Country
3 - Timeline
4 - Product List
5 - Product Page

First Draft of Mobile App Views

Interactive Design

Meanwhile, I developed brand messaging and a component library.

Brand language & Component library

Color Palette

The first color #002153 is the Theme color. I picked this color as the background of my homepage’s earth. It would occupy a large portion of the whole screen. So I think I can use it as my theme color to make the whole website looks consistent in color.

I used #002153 as my Text color also, to be consistent with theme color.

Font Menu

Montserrat: This common font has a little aged feeling since it is inspired by the typography in a historical Argentinian neighborhood.

Icons

Components

I also designed several forms which are important to e-commerce app to build professional and safe vibes.

E-Commerce Forms

Checkout Form

Add Delivery Address

When users use the checking out process of an e-commerce application first time, they will face the process of adding a new address. If the form looks too overwhelming. They might give up during this process and give up buying things in Snack Trip or even give up using this application. So this “Add Address” form is important to focus on.

Post a Review

Sign Up an Account

Final Version & Interactive Prototype

I connected prototypes with smooth interanion animations.

Interactive Prototype

To delve into design practices for iOS and Android systems, I developed modifications that are compatible with both platforms.

Guided iOS & Android Design

IOS System

The app looks like more standardized full of iOS blue color. But then the app is less creative with its own charm. But due to the style is matching by iOS guideline, it looks more professional and trustworthy, which is important for ecommerce app.

Android System

The color chose by the color guide is more lively and soft. My original design has too much color contrast since I use very dark blue everywhere with the white or very light grey background.

To gain a deeper understanding of user situations and experiences, my classmates and I used an app we designed to craft an engaging narrative.

Phone Story with Other Classmates’ Designs

I collaborated with three other classmates to craft a compelling story where the main character is a girl utilizing four apps independently designed by each of us. The entire narrative is presented on her mobile phone screen. This exercise deepens our understanding of user situations and experiences.

Jump to Top
© 2024 Designed on Figma and built using Webflow by Jialun Yang