WokAround

A course-long, graded project submitted for the Visual Elements of UI Design course on Coursera

Introduction

 

Growing up as a Chinese American in the Bay Area, I have never felt a shortage of Chinese food. As my friendships diversify through the years, I would frequently get the question, “Tyler, where is the most authentic Chinese food restaurant?” and I could never provide a great answer - Even with my extensive knowledge of amazing Chinese restaurants. Enter WokAround: a mobile app to help Chinese food enthusiasts locate all styles of Chinese food in the Bay Area and share their experiences with the world.

 
 
~wokaround assignme~bt0$bm2.jpg

Mood Board

Colors

My approach to the mood board was to emote feelings of familiarity and approachability. Using a classic red, I wanted to invoke a feeling of passion and confidence while emulating a familiar look with the Chinese lanterns that hang in many Chinese restaurants around the country. To balance out the intensity of the red, supplementary colors are softer and are pastel hues.

Images

I chose images that specifically showed a modern ambiance for Chinese food as this is the direction that Chinese food is moving in currently. All human images used are representative of an happy, ethnically diverse, younger audience between ages 18-35.

Text

The typeface used for this project is Report. A sans serif font that has a modern and aesthetic vibe.

 

Icons And Buttons

Icons

Moving with the theme of approachability, the icons I chose were designed with rounded edges to be more inviting and pleasant. I also went with a more minimalistic design to stay as lightweight as possible without losing on meaning.

Buttons

Buttons are simplistic and easy to read. Upholding similar values, colors, and typeface to the icons and mood board, the buttons were designed to stay cohesive with the rest of the project.

~wokaround assignme~bt0$bm3.jpg
 

Sample Design And Conclusion

~wokaround assignme~bt0$bm4.jpg

Conclusion

WokAround combines my love of Chinese food and my hopes of helping small businesses thrive during these uncertain times. On the main/home screen, it’s a simple, minimal, and aesthetic presentation with the main goal to locate a restaurant quick and effectively. Another goal of WokAround was to find an alternative to how restaurants are reviewed on sites such as Yelp. Instead of stars, the only option is to “like” a restaurant and people can add their “recommendations” on dishes they truly enjoyed and want others to experience.

What would I have changed?

Although the buttons are functional, the shape is overly round, throwing off the cohesive aesthetic. I would make the buttons more square with a slightly rounded edge to depict a modern, but welcoming interface.

Moving Forward

I would like to create a low fidelity wireframe connecting the main screen map interface to the lower level screen interface and explore the usability of the minimalistic concept.