PROJECT
TAKO Grill Website and Mobile APP
Audit-UX/UI Case Study
Project Type
UX/UI Audit and Responsive Redesign
Tools:
Figma, ChatGPT, Adobe-Illustrator, and Photoshop
Skilled Applied
– Competitive Analysis & UX Research
– Persona Creation & Journey Mapping
– Wireframing & Responsive Prototyping (Web+Mobile)
– Visual Design & Style tiles
–Atomic Design System (Atoms, Molecules, Organisms)
–Documentation & Presentation
Timeline:
4 weeks
Goal:
Enhance the usability, visual appeal, and overall user experience of Tako Grill, a Japanese restaurant based in Maryland. The goal was to identify usability gaps and improve key features, including navigation, image integration, order flow, and mobile responsiveness. This redesign aimed to:
– Improve content organization and visual hierarchy
– Create a modern reservation and ordering experience
– Integrate Japanese-inspired aesthetics
– Add responsive features for. a seamless mobile and desktop experience
UI PREVIEW
REDESIGN COMPARISON
ORIGINAL WEBSITE /AUDIT SUMMARY
The UI/UX audit of the existing Tako Grill website revealed several usability and design challenges that impact the overall user experience. One of the major issues was the presence of non-functional purchase features, making it difficult or impossible for users to complete online orders. The site also lacked high-quality images, which diminished the visual appeal and failed to showcase the food in an engaging way.
Additionally, there were significant navigation issues, including unclear menu paths and missing return buttons, which made browsing frustrating and unintuitive. The visual design lacked cohesion, with inconsistent fonts, poor layout hierarchy, and limited use of design elements to guide users effectively. Lastly, the content organization was cluttered and unstructured, making it hard for visitors to quickly find important information such as hours, location, or contact details.
UPDATED WEBSITE /UX SOLUTIONS
After analyzing the Tako Grill website and comparing it with similar restaurant platforms, I developed a set of enhancements aimed at improving both usability and brand expression. I refined the typeface and layout to support clearer content organization and a more inviting reading experience. Visual engagement was elevated by incorporating high-quality images and introducing Japanese-inspired patterns and colors to reflect the restaurant’s cultural ambiance.
To improve functionality, I designed a direct purchase flow and added a dedicated reservation page to help reduce wait times. I also introduced an order tracking feature for customer convenience and featured Happy Hour promotions on the landing page to drive engagement. Finally, I restructured the navigation to ensure a smoother, more consistent user journey across the site.
PERSONAS
For the Tako Grill redesign, I created two key personas with their needs, goals, frustration points, and preferred meals clearly defined to reflect the target users’ experiences:
Hinato Sato
Hinata Sato is a 46-year-old Japanese businessman and self-proclaimed “sushi addict.” His goal is to find authentic Japanese restaurants with high-quality food and a peaceful atmosphere. He prefers sushi and traditional dishes but gets frustrated by poorly designed websites that lack clear visuals or online ordering options.
Mia Miller
Mia Miller, a 28-year-old American innovator and cultural explorer, loves discovering new foods and meeting people through international cuisines. Her go-to meals include ramen and Japanese appetizers. She values inviting restaurant environments and gets inspired through visually rich, well-organized websites. Frustrations include limited cultural storytelling or missing contact/location info online.
SITE MAP
To establish a clear and user-friendly experience, I created a simplified site map for Tako Grill in FigJam, outlining six main navigation pages: Home, Menu, About Us, Reservation, My Order, and Contact. This structure was guided by user research and persona needs — ensuring that visitors can easily explore the restaurant, place an order, or book a table with minimal effort. Building the site map in FigJam helped streamline the planning process and laid the foundation for intuitive navigation and content flow in the redesign.
THE COMPETITORS
For the Tako Grill redesign, I analyzed websites from culturally diverse restaurants offering similar services to identify UX best practices. Joselito’s Mexican Food helped me address basic issues like navigation and page structure. Panera Bread provided inspiration for a clear menu layout and an efficient ordering and delivery system. Exotic Thai Cuisine influenced the homepage structure by showcasing key details such as hours, contact.
Panera Bread
Exotic Thai of Burbank
Joselito's Mexican
Offers detailed online ordering with arrival time and a visible checkout on the menu page. Strong visuals and colors, but poor font legibility, missing content dividers, and limited navigation options.
Strong visual hierarchy, clean dividers, easy navigation, and high-quality images. However, contact info is missing from the navigation bar, and some menu items are repeated.
Offers high-quality images, food reviews, and pickup/delivery options. However, the logo lacks legibility, some pages lack dividers, navigation is cluttered, and there’s no return option from the online order page to the homepage.
TYPOGRAPHY
Tako Grill explored a range of bold and minimalist typefaces to reflect its playful yet strong identity. The final logo pairs a modern T-shaped grill with a subtle tentacle illustration—balancing tradition and contemporary style to create a memorable, authentic brand mark.
DESIGN SYSTEM / Atoms, Molecules & Organisms
For the Tako Grill redesign, I applied the Atomic Design approach to build a consistent and scalable UI system. Atoms included base elements like type styles, buttons, and iconography reflecting Japanese aesthetics. These were combined into molecules, such as the reservation form fields and menu item cards, which were then used to build larger organisms like the full navigation bar, food category sections, and order summary module. This structure allowed me to maintain a cohesive look and feel throughout the site while ensuring components were reusable and easy to update.
UX DESIGN STAGES / Low to High Fidelity
To guide the design process for Tako Grill, I developed low-, mid, and high-fidelity templates for key pages, including the homepage, menu, reservation, and ordering flow. Starting with wireframes, I mapped out layout and navigation structure, gradually refining visual hierarchy and interaction details at the mid-fidelity stage. In the high-fidelity phase, I applied the full design system—colors, typography, patterns, and imagery—to create polished, branded screens that deliver an intuitive and culturally rich user experience.
LOW FIDELITY/ DESKTOP
LOW FIDELITY/ RESPONSIVE
MID FIDELITY/ DESKTOP
MID FIDELITY/ RESPONSIVE
HIGH FIDELITY/ DESKTOP
HIGH FIDELITY/ RESPONSIVE
PROTOTYPE
I created an interactive Figma prototype to simulate key user flows, including browsing the menu, placing an order, and making a reservation. This allowed for testing usability, refining interactions, and ensuring a seamless, culturally immersive experience before development.
DOCUMENTATION
Throughout the Tako Grill project, I maintained clear documentation to support the design process, including user research insights, persona development, site map planning, and design system components (atoms, molecules, organisms). This ensured consistency across the project and made collaboration and future updates easier.
ACCESSIBILITY
Accessibility was a key consideration in the Tako Grill redesign. I ensured text had sufficient color contrast, used readable typefaces, and maintained a clear visual hierarchy. Interactive elements like buttons and links were designed with proper sizing and spacing for easy tap targets. Alt text and semantic structure were also considered to support screen readers and create an inclusive experience for all users.
