INCREDIBLE CATERING
UX DESIGN
WEBSITE
MOBILE
FIGMA
My UX design for a catering company’s new website focuses on a clean, intuitive layout that enhances the customer journey. Key features include streamlined menu browsing, easy ordering, and personalized options. The design prioritizes quick navigation and a cohesive visual experience, ensuring users can access services effortlessly from any device.
Check out the live website here.
Test out the web prototype here.
INCREDIBLE CATERING
USER RESEARCH
UX DESIGN
MOBILE
WEBSITE
FIGMA
My UX design for a catering company’s new website focuses on a clean, intuitive layout that enhances the customer journey. Key features include streamlined menu browsing, easy ordering, and personalized options. The design prioritizes quick navigation and a cohesive visual experience, ensuring users can access services effortlessly from any device.
Check out the live website here.
Test out the prototype here.
THE CHALLENGE
Designing a catering website from scratch presents the challenge of balancing functionality and aesthetics to create an engaging user experience. I had to simplify complex tasks like menu navigation and online ordering, ensure responsiveness across devices, and convey the brand’s identity effectively—all while catering to diverse user needs.
MY ROLE
As the sole designer, I led it and corresponded with my client while building out the designs. I conducted multiple rounds of market research, produced wireframes and mockups with iterations before delivering the final assets and documents.
THE CHALLENGE
Designing a catering website from scratch presents the challenge of balancing functionality and aesthetics to create an engaging user experience. I had to simplify complex tasks like menu navigation and online ordering, ensure responsiveness across devices, and convey the brand’s identity effectively—all while catering to diverse user needs.
MY ROLE
As the sole designer, I led it and corresponded with my client while building out the designs. I conducted multiple rounds of market research, produced wireframes and mockups with iterations before delivering the final assets and documents.
GATHERING INSPIRATION
I began scouring the industry on websites of renowned local food caterers, such as Grain, LushPlatters, ChilliApi, SparkCatering, ChilliManis, and more. The goal was to scope out the standards for catering websites, and find opportunities for transformation.
I realised that most catering websites have a standard way of presenting information and food choices, and the navigation bar provides a clear guide to specific categories and pages.
GATHERING INSPIRATION
I began scouring the industry on websites of renowned local food caterers, such as Grain, LushPlatters, ChilliApi, SparkCatering, ChilliManis, and more. The goal was to scope out the standards for catering websites, and find opportunities for transformation.
I realised that most catering websites have a standard way of presenting information and food choices, and the navigation bar provides a clear guide to specific categories and pages.
GATHERING INSPIRATION
To gain a deeper understanding of the competitive landscape, we began by thoroughly canvassing the industry, focusing on prominent class booking apps such as Glofox, Momence, Mindbody, and ClassPass. Our primary objective was to analyze these competitors’ offerings to identify trends, strengths, and potential gaps in the market. By examining the features, user interfaces, and overall user experiences of these apps, we sought to gather inspiration and pinpoint areas where we could innovate. This comprehensive analysis enabled us to identify opportunities to differentiate our product, ensuring it would stand out in the crowded class booking app market. Ultimately, our goal was to leverage these insights to create a solution that not only meets but exceeds user expectations, offering a unique and superior experience.
We realised that the OClass Ignite app had the similar design and functions as Glofox. However, certain aspects of the user flow could be improved.
GATHERING INSPIRATION
To gain a deeper understanding of the competitive landscape, we began by thoroughly canvassing the industry, focusing on prominent class booking apps such as Glofox, Momence, Mindbody, and ClassPass. Our primary objective was to analyze these competitors’ offerings to identify trends, strengths, and potential gaps in the market. By examining the features, user interfaces, and overall user experiences of these apps, we sought to gather inspiration and pinpoint areas where we could innovate. This comprehensive analysis enabled us to identify opportunities to differentiate our product, ensuring it would stand out in the crowded class booking app market. Ultimately, our goal was to leverage these insights to create a solution that not only meets but exceeds user expectations, offering a unique and superior experience.
We realised that the OClass Ignite app had the similar design and functions as Glofox. However, certain aspects of the user flow could be improved.
COMPETITIVE ANALYSIS
In order to assess the strengths and weaknesses of direct competitors in the food catering sector, I analyzed the top competitors' websites dedicated to this industry. The goal was to gain insight into the current offerings, identify areas for enhancement, and uncover any gaps or unmet needs within the sector.
I was able to highlight the websites that had the Highest Visits, Most Pages per Visit, Longest Time on Site, and most importantly the website that had the Lowest Bounce Rate.
COMPETITIVE ANALYSIS
In order to assess the strengths and weaknesses of direct competitors in the food catering sector, I analyzed the top competitors' websites dedicated to this industry. The goal was to gain insight into the current offerings, identify areas for enhancement, and uncover any gaps or unmet needs within the sector.
I was able to highlight the websites that had the Highest Visits, Most Pages per Visit, Longest Time on Site, and most importantly the website that had the Lowest Bounce Rate.
DEVELOP
WIREFLOW
Given that my primary objective was to enhance user flows, I concentrated efforts on wireframing high-impact screens and key modules where functionality needed to be clearly defined. Instead of wireframing every screen, I prioritized those that would have the most significant effect on the user experience.
I created a detailed wireflow to map out the entire user journey, offering a clear visual representation of how users would interact with the website. This strategic approach allowed effective communication of essential screens and interactions to stakeholders, ensuring alignment across teams while staying on schedule to meet our tight deadline. The wireflow provided a strong foundation for subsequent design phases, ensuring that critical user paths were optimized early in the process.
Low-fidelity wireframes were used to communicate content hierarchy and critical functionalities for development.
MOCKUPS
After establishing a clear design direction, we transitioned into producing both high and low-fidelity mockups to bring our concepts to life. These mockups were then transformed into interactive prototypes with limited functionalities, enabling us to conduct iterative rounds of user testing.
This approach allowed test users to interact with a more "polished" version of the design, offering valuable feedback on aesthetics and usability. However, the process also posed challenges, as making revisions to these detailed prototypes required significantly more time compared to rapid prototyping. Despite this, the insights gained from testing with well-developed designs were invaluable in refining the final product and ensuring a high-quality user experience.
EDIT
ITERATIONS
The iteration process for our prototype was a continuous cycle of improvement driven by user feedback, interface refinement, and functionality enhancements. After each round of user testing, we meticulously analyzed the insights gathered to identify pain points and areas for enhancement. We then updated the design, incorporating these learnings to make the app more intuitive, user-friendly, and efficient.
This revised prototype was put through another round of testing to validate the changes and gather further feedback. Repeating this cycle allowed us to progressively optimize the app’s design and functionality, ensuring that each iteration brought us closer to delivering an exceptional user experience that aligns with both user needs and project goals.
Iterations were done based on user feedback to refine designs, enhance usability and overall user experience.
WHAT I LEARNED
This was a high-impact project with a challenging deadline, requiring us to maintain a high level of focus and adaptability throughout. While many aspects went smoothly, as with any complex project, there were inevitable setbacks and hurdles to overcome. I make it a point to reflect on both successes and challenges after every project to learn and grow from the experience. One key takeaway from this project was the effectiveness of our small, agile team. Despite the intense pressure and demanding timelines, our team consistently collaborated with precision, communicated openly, and remained resilient. We were able to deliver the product on time without compromising quality, thanks to our agile approach.
The most rewarding aspect of this project was experiencing the agile UX process in action and witnessing its profound impact on both the team and the final product. Our process allowed us to iterate rapidly, involve users consistently for real-time feedback, and adjust our design decisions accordingly. The seamless collaboration minimized stress, encouraged creativity, and resulted in a final product that our client not only valued but also implemented in their current app. Seeing our work come to life and knowing that it contributed meaningfully to the client’s goals was a gratifying conclusion to a demanding but fulfilling project.