Dragon Tea Cafe Pt. 2
The Product
Getting starting on Adobe XD, I decided to take the Dragon Tea app and turn it into a responsive website.
​
This is targeted for people who unable to download the app, but would still like to browse the cafe and order ahead.
Duration
October 2022
Starting the Design
Paper Wireframes
For my paper wireframes, I drew five drafts of a website design before picking elements that I'd like to go into the final. From there, I made the responsive tablet and phone design.
Digital Wireframes
Following the paper wireframes as well as the simplistic theme of the app, I added main components such as the menu, profile, and contact pages in the navigation
In addition, I added the same features in the payments page for being able to edit and add/delete drinks as well as payment options.
Low Fidelity Design
I created a simple low-fidelity prototype where the user can go through the process of ordering a drink from start to finish. This included a menu, customization page, check out and payment, and a confirmation page.
​
View Dragon Tea’s low-fidelity prototype
Usability Studies: Findings
Round 1 Findings
-
Users would like a way to add notes to the customization in case they have anything else they'd like to add
-
Users want to see how many items are currently in their cart without having to actually check their cart
Round 2 Findings
-
Users would prefer an overlay of the customization page instead of it leading to a new page
-
Users would like receipt sent to their email
Refining the Design
Mockups
Following the usability insights, I decided to compact the customization overlay so that it can fit on top of the menu page. In addition, I also added a small notes section.
In the confirmation page, I included a confirmation email as well as a confirmation number. I also added the option to print/save the page.
High-Fidelity Prototype
The final hi-fi prototype showed a cleaner user flow for placing orders.
View Dragon Tea’s high-fidelity prototype
Responsive Mobile Version
Digital Wireframes
I worked on the phone wireframes at the same time as the webpage so the info is the same, just in a compact format.
Mockups and High-Fidelity Prototype
I refined the mockups and added details as I got feedback on the webpages. The high-fidelity prototype includes pages such as a customization page, as well as a working hamburger menu that will lead to a profile page with account details and history.
​
View Dragon Tea's high-fidelity prototype
Conclusion
The Impact
This design is meant to be accessible from any device that can access the internet. Unlike an app, it requires no download or memory space with no limits to any platforms.
What I Learned
From this project, I learned how to create responsive designs in mobile and computer pages in Adobe XD.
​
I chose to continue using my project from Figma to challenge myself on redesigning an app to fit a webpage while being able to maintain the theme and brand.