Rival Foods is a Dutch start-up company dedicated to creating sustainable and delicious whole-cut plant-based food alternatives for the B2B market.
The website redesign aims to effectively communicate the company's mission, target audience, and ensure all content, with a particular focus on B2B needs, is relevant, engaging, and contributes to the generation of high-quality leads.
Furthermore, the redesign will establish a clean, minimalist design that aligns with existing branding.
I designed a responsive web design solution for both mobile and desktop viewports, specifically addressing the needs and goals of the B2B market, including food purchasers and head chefs.
This analysis helped to identify the target audience and unique value propositions of competitors. While Rival Foods focuses on the B2B market, some competitors also serve the consumer market.
Key opportunities identified include:
I had the following two research objectives in mind to learn how to encourage food service professionals to submit their credentials so that it can help with the redesign of the Rival Foods website.
Due to privacy constraints, Rival Foods was unable to provide me with direct contact information for their customers. As a result, I conducted a stakeholder interview with the account manager for international sales, instead of directly interviewing end-users.
This interview provided valuable insights into the different target audiences, their key challenges, and their primary motivations for visiting the Rival Foods website.
I organized my research notes based on target group, which resulted in four distinct target groups:
This categorization facilitated the identification of key themes within the affinity map that were most relevant to each target group. The Food Purchaser (green) was identified as the primary target group, followed by the Head Chef (yellow).
I was unable to involve users in the research phase, due to constraints. However, the stakeholder interview provided valuable insights into the primary target group (food purchasers) and the secondary target groups, as well as their motivations for visiting the website.
The stakeholder interview revealed key target groups. We discussed their goals, motivations, and challenges, which helped with the creation of three personas without direct user involvement.
The two problem statements address the shared needs of all three personas and fit within the set project goals:
The HMWs helped to ideate and develop a sitemap and user/task flow that addressed the identified problem statements.
A sitemap was created first, but I did various iterations while working on the user and task flows in parallel.
It helped to identify which screens to focus for the lo-fi wireframes.
A combination of user and task flows was created to illustrate how users could achieve specific goals, such as:
This analysis helped to visualize how pages are interconnected and how a user might utilize a potential navigation menu.
I used the mobile first design approach, beginning by sketching lo-fi wireframes for mobile viewports before exploring options for desktop viewports. Given that the stakeholder interview identified mobile and desktop as the most critical devices for our target audience, I did not prioritize the tablet viewport in this initial phase.
I collaborated with the client in a remote meeting to present the sitemap, user flows, and wireframes. This meeting provided an opportunity to gather feedback and ensure project alignment with business objectives.
The sitemap proved to be an invaluable tool for effective communication and discussion regarding content, necessary pages, and the interconnections between pages.
The meeting also revealed that the client does not intend to actively communicate their search for investors. Consequently, the relevance of one of the personas, "Information Isaac," was diminished.
Given this feedback from the client, I decided to not do an additional usability testing round with the mid-fi wireframes.
A revision of the sitemap incorporating the feedback of the interim client meeting.
I worked on the areas of improvement and added branding and imagery into the hi-fi wireframes for both mobile and desktop viewports. To provide a realistic context for text placement and length, I utilized existing website content as a reference.
However, it is important to note that this content will require comprehensive rewriting in the future.
An unmoderated usability testing session was conducted with 5 participants. The primary objective was to observe user navigation patterns between screens, enabling us to optimize user flows. Participants were given a 5-second test on the mobile landing page, followed by two tasks to complete using a desktop viewport prototype.
The 5-second test provided valuable insights:
All users successfully completed both tasks, with average ease of use scores of 4.4 and 4 out of 5, respectively. The lower score on the last task may be attributed to limitations within the prototype, giving only a single option to complete the task.
A revision of the design was undertaken, incorporating key insights from the usability testing. The focus of these revisions centered on the navigation, products page, and articles page.
This was my first project working as a UX designer in collaboration with a client. I found the sitemap to be an invaluable tool for communicating content, walking through user flows, and visualizing the interconnectedness of pages. This facilitated more effective communication and input from the client during the interim meeting.
Working with a client also introduces limitations and working with the wishes of the client. The client expressed a preference for a simplified navigation without dropdown menus, which may require users to navigate through more screens to reach specific products. My initial concept included dropdown menus to offer users a more efficient shortcut.
In contrast to my previous projects, which focused more heavily on feature ideation and exploration, this project had a stronger emphasis on content organization and structure.
Due to time constraints and the difficulty of reaching the target audience directly, user involvement was limited. While the stakeholder interview provided valuable insights, the perspectives obtained may have been somewhat biased. Ideally, direct user interviews would have been incorporated into the research process.
I have only designed a selection of pages for the prototype. As a next step, I recommend designing the service page and an article page to enhance the prototype's completeness and functionality. This will allow users to explore further within the prototype, such as searching for specific recipes or company updates.
A search feature that allows users to find any video among their saved videos.
View case study
