The WokWorks project focuses on rebranding a dynamic food truck and creating an ordering-ahead website for customers to easily pick up their meals. Led by Professor Christopher Nappi, the project aims to remake the Wokworks food truck's website, focusing on improving its look and user experience. By integrating advanced UI and UX principles, our goal is to create a more engaging and user-friendly website that effectively supports the Wokworks brand and encourages customer interaction. The team consists of five members, each contributing their unique expertise: Sue - Project Manager - Chem ( me ) - UI Designer - Dom - Front-End Developer - Rocky - UX Research Lead - Michelle - Back-End Developer
The WokWorks project aims to design and develop a fully functional and visually appealing website and app, while learning the complete UI/UX process from research and design to development and implementation. The team will focus on fostering collaboration across key roles to ensure an integrated workflow and gain practical experience in creating a professional-grade digital product.
For the WokWorks rebrand, we focused on their American Chinese menu, emphasizing the wok as a key visual. The brand highlights dietary inclusivity with vegetarian options and extensive customization, allowing customers to choose toppings, carbs, and proteins.
Building on WokWorks' focus on variety and vegetarian-friendly options, we chose a branding palette featuring green tones to represent vegetables and orange to symbolize fire and energy. For typography, we opted for a rounded and modern font to convey a friendly and approachable feel. As part of the rebranding, we redesigned the logo to prominently feature a wok, aligning with the core identity of the food truck. These visual elements were selected to reflect the brand's vibrant, fresh, and inclusive concept.
Led by Rocky and guided by Professor Nappi, we observed WokWorks customers and conducted interviews to understand their behaviors and needs. From this research, we created key personas and a journey map, providing insights to guide our design and improve the customer experience.
In the low-fi stage, we focused on structuring the app and mapping out the customer flow. Using blocks and mock paragraphs, we tested wireframes to explore the layout and functionality. This phase also involved identifying and building all necessary components while updating our design system to ensure consistency and scalability for the next stages of development.
In the mid-fi UI design stage, we started incorporating colors, images, and actual content into the app. This phase focused on integrating key visual elements, such as the chosen color scheme and imagery, while defining the app's functionality. We designed buttons, forms, and navigation components to ensure a smooth user flow and incorporated interactive elements that reflect the branding and customer journey insights. This stage allowed us to visualize how the design choices would impact user interactions and set the foundation for refining the overall experience.
.gif)
In the hi-fi stage, we focused on polishing the UI design, fixing minor errors, and solidifying the final deliverables. We also began incorporating interactions and animations to enhance the user experience, ensuring a smooth and engaging flow. This phase refined the visual and functional details, preparing the app for final presentation and development.
.gif)
