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
Mobile Homepage
Order Process
Payment Process
Design System
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