The Koop
TIMELINE
Oct 2020 - Jan 2021
TOOLS
Adobe XD
MY ROLE
Lead UI/UX designer
The Problem
The client was quick to communicate that the website was both outdated and limited in its functionality. As the restaurant was rapidly growing in popularity, the owner had to upgrade to taking online orders, as having only phone and or in-person order capabilities was reducing the restaurant's productivity.
The Solution
My Role
Collaborated with a web developer to redesign the website from scratch. Led and accelerated web developers’ workflow by providing rapid design iterations per the client’s requirements in the designs and developing a style guide during hand-off.
1. Research
Conducted user research by collaborating with the client to understand and define the pain points and requirements for their current website and future website.
Based on the interview, the website had been suffering from issues due to stock images of dishes that were not owned by the client, to a lackluster UI design. It was clear that the new website required a redesign that provided the added functionality of online ordering, which greatly improved the user experience.
2. Low-Fidelity Wireframes
3. High-Fidelity Wireframes
Created UI components in Adobe Photoshop and Adobe Illustrator to build high-fidelity designs for the client. Took vibrant and high-quality photos of their food and restaurant to align with the site’s look and feel, and replaced the old stock images that were misinforming the consumers. Finished the high-fidelity wireframes with the necessary components, which were subsequently sent to the web developer.
4. Hand-off
Created a style guide in preparation for hand-off, which defined the website's colors, typography, and interactive components (i.e. buttons, images, etc.). The successful hand-off eliminated potential miscommunications and work-flow disruptions for the web developer and the client.