Proud Thai Cookery
Proud Thai Cookery
Over the span of 6 months, I worked on a proposal to rebrand and redesign the website for Proud Thai Cookery, a family-owned Thai restaurant located in Berkeley Heights, New Jersey. With my redesign, I enhanced the website's visual appeal, emphasized the physical restaurant’s in-person aesthetics and branding, and cut out unnecessary filler.
Over the span of 6 months, I worked on a proposal to rebrand and redesign the website for Proud Thai Cookery, a family-owned Thai restaurant located in Berkeley Heights, New Jersey. With my redesign, I enhanced the website's visual appeal, emphasized the physical restaurant’s in-person aesthetics and branding, and cut out unnecessary filler.
role
UX/UI Designer
duration
Sept. 2024 - March 2025
tags
figma
ui design
usability testing
Context
Context
Proud Thai Cookery is a beloved family-owned and operated Thai restaurant located in the heart of Berkeley Heights, New Jersey that has been around for almost a decade. They primarily serve Thai street food, offering lunch specials during specific hours and even vegetarian options.
Proud Thai Cookery is a beloved family-owned and operated Thai restaurant located in the heart of Berkeley Heights, New Jersey that has been around for almost a decade. They primarily serve Thai street food, offering lunch specials during specific hours and even vegetarian options.
The Problem
The Problem
Their original website is matter-of-fact and has its charm, but needs significant improvement in the realms of branding, information hierarchy, and better showcasing the physical location’s visual and experiential appeal.
Their original website is matter-of-fact and has its charm, but needs significant improvement in the realms of branding, information hierarchy, and better showcasing the physical location’s visual and experiential appeal.
Site Evaluation
Site Evaluation
After an extensive evaluation of the original website, the following pros and cons were noted:
After an extensive evaluation of the original website, the following pros and cons were noted:
Pros
Navigation Menu: Top navigation is straightforward and easy to understand
Navigation Menu: Top navigation is straightforward and easy to understand
Key Information On Top: The most important points are clear and highlighted within the hero section
Key Information On Top: The most important points are clear and highlighted within the hero section
Cons
Branding: Current website design in no way represents existing branding protocols
Branding: Current website design in no way represents existing branding protocols
Excessive Spacing & Content: Unnecessary spacing and content within the site layout only serves to confuse users
Excessive Spacing & Content: Unnecessary spacing and content within the site layout only serves to confuse users
User Persona
User Persona
The following user personas, Leo Dawson and Adrianne Cheung, represent two target demographics representing the customer base at Proud Thai Cookery:
The following user personas, Leo Dawson and Adrianne Cheung, represent two target demographics representing the customer base at Proud Thai Cookery:
Busy working adults that rely on ordering takeout to get through the workweek
Busy working adults that rely on ordering takeout to get through the workweek
Frequent restaurant goers who want a good first impression of a restaurant before making the decision to dine there with loved ones
Frequent restaurant goers who want a good first impression of a restaurant before making the decision to dine there with loved ones
Goals
Goals
To ensure that I had specific end goals in mind for my redesign, I established two areas of focus prior to starting the design process:
To ensure that I had specific end goals in mind for my redesign, I established two areas of focus prior to starting the design process:
1.
Content Overhaul
Evaluate and modify current content to reduce redundancies and better highlight the restaurant’s appeal
2.
Rebranding
Align the redesign with current brand guidelines and the restaurant’s visual aesthetics
3.
Atomic Design
Design user interface elements to be reusable and scalable over all device type
Design Process
Design Process
Rebrand
Rebrand
My rebrand was spearheaded with their logo’s design and type choices in mind, the warm tones and bowl and steam icon conveying a feeling of homeliness and safety. I had planned initially to utilize the orange and yellow tones, but decided on making the red my primary color in order to streamline the design and to represent the idea of food made with passion.
My rebrand was spearheaded with their logo’s design and type choices in mind, the warm tones and bowl and steam icon conveying a feeling of homeliness and safety. I had planned initially to utilize the orange and yellow tones, but decided on making the red my primary color in order to streamline the design and to represent the idea of food made with passion.
Typography
Typography
Low-Fidelity Wireframes
Low-Fidelity Wireframes
After doing a card sort, in which I asked 3 users to organize the information on the original site to match their own mental models, the information architecture of the site was modified to place priority on displaying food options. A new order online sequence (Order Online, Checkout) was implemented to remove reliance on external ordering platforms, creating a more streamlined and intuitive sequence for the user.
After doing a card sort, in which I asked 3 users to organize the information on the original site to match their own mental models, the information architecture of the site was modified to place priority on displaying food options. A new order online sequence (Order Online, Checkout) was implemented to remove reliance on external ordering platforms, creating a more streamlined and intuitive sequence for the user.
Low-fidelity wireframes were then created and iterated on throughout the span of the project to provide a rough outline of layout and design choices, keeping in mind prioritization of content along the way.
Low-fidelity wireframes were then created and iterated on throughout the span of the project to provide a rough outline of layout and design choices, keeping in mind prioritization of content along the way.
Atomic Design
Atomic Design
Atomic design principles were kept in consideration during the process of creating and refining each page, with many of the more complex molecular components being comprised of smaller, more simple atomic components. The following examples below detailed select instances where this is present in my final design.
Atomic design principles were kept in consideration during the process of creating and refining each page, with many of the more complex molecular components being comprised of smaller, more simple atomic components. The following examples below detailed select instances where this is present in my final design.
Atomic design principles were kept in consideration during the process of creating and refining each page, with many of the more complex molecular components being comprised of smaller, more simple atomic components. The following examples below detailed select instances where this is present in my final design.
Atomic design principles were kept in consideration during the process of creating and refining each page, with many of the more complex molecular components being comprised of smaller, more simple atomic components. The following examples below detailed select instances where this is present in my final design.
Heuristic Evaluation & User Testing
Heuristic Evaluation & User Testing
After creating most of my screens, a heuristic evaluation was conducted on three target users to get their thoughts on the original website vs. my redesigned version. Feedback was also provided on potential improvements that could be made. The following table summarizes my findings:
After creating most of my screens, a heuristic evaluation was conducted on three target users to get their thoughts on the original website vs. my redesigned version. Feedback was also provided on potential improvements that could be made. The following table summarizes my findings:
Finishing Touches
Finishing Touches
I came to two conclusions from my user testing sessions:
I came to two conclusions from my user testing sessions:
Adding storytelling and media results in more positive feedback overall
Adding storytelling and media results in more positive feedback overall
Buttons of significance should have more emphasis placed on them
Buttons of significance should have more emphasis placed on them
With this feedback, tweaks were made to my final designs to ensure that the needs mentioned were addressed.
With this feedback, tweaks were made to my final designs to ensure that the needs mentioned were addressed.
Final Prototypes
Final Prototypes
Reflection
Reflection
This redesign taught me a lot about the importance of branding, usability, and responsive design when it comes to the user interface of a small business' website. I had a lot of fun figuring out how to integrate their physical location into the design of the website as a whole!
This redesign taught me a lot about the importance of branding, usability, and responsive design when it comes to the user interface of a small business' website. I had a lot of fun figuring out how to integrate their physical location into the design of the website as a whole!
If I could go back, I would have liked to conduct proper usability testing of the original site before starting the design process to get a better sense of the target user's likes and frustrations. I also would have liked to explore the implementation of microinteractions throughout the site that align with both branding and usability standards.
If I could go back, I would have liked to conduct proper usability testing of the original site before starting the design process to get a better sense of the target user's likes and frustrations. I also would have liked to explore the implementation of microinteractions throughout the site that align with both branding and usability standards.