Soybing

A food truck company offering Chinese on-the-go breakfast and soymilk

Design a delightful food-truck ordering and pick-up experience


Skills

Design research, outline of scope, wireframe, prototype, mobile design, web design, branding, design system

Tools

Figma

Timeline

2 months

 

Prototype

Web Homepage

Desktop Homepage.jpg
 

Mobile Homepage

Mobile Homepage2.jpg
 
Mobile Menu.jpg

Order Process

prototype_order process.jpg
 

Payment Process

prototype_order process2.jpg

Design System

Type Scale.png
Component.jpg
 
Color Scheme.png
Desktop - 2.png

Takeaways …


  • In wireframe, no need to spend a lot of time getting precise about designing the layout since the layout will adjust according to the contents (text, images)

  • Think more about animation in user experience when doing a static prototype, such as finger swipe on a phone

  • Try to hide sub-functional things onto a secondary window/tab as a phone screen has limited space

  • Images & contents are equally important as the layout

  • Use scrolling to your advantage to create story-telling through a time-based journey

  • Check contrast for texts in relation to the background

 

Technical takeaways in Figma

  • Create auto-layout, components, variants early in prototype phase

  • Use a structured naming system

If I could spend more time on this

  • I want to design the website to be responsive

  • Adjust the portfolio layout to fit on my website better

  • More research

Previous
Previous

Music App - Mosix

Next
Next

Facebook Hackathon