overview

Newcomer Kitchen is a non-profit organization with a mission to facilitate the integration of newcomer women into the Canadian community through food-based businesses. The organization currently provides free space and training programs for newcomer women to cook and build connections within their communities. In addition, Newcomer Kitchen sells food at local markets to cover costs and actively seeks out corporate opportunities in cooking and social assistance in all forms. However, its outdated website architecture fails to meet the needs of its expanding business and diverse stakeholders. Therefore, our team aims to help improve the current website to provide more meaningful experiences for newcomer women, customers and partners.

RESEARCH

THE PROBLEM

We conducted an internal heuristic evaluation, jurisdictional review and interviewed 9 users of the website for our initial research. Our primary and secondary research provided us with a deeper level of insight into some of the frustrations that users experience when it comes to finding information that is important to them. These pain points can largely be defined by four general themes:

Define

With the help of an Affinity Diagraming workshop, our team identified the key goals, needs, frustrations and bio-data of our targeted users. As we found that the core experience of the website is mostly useful to Newcomer Women and Customers, we decided to focus on these 2 personas.

USER PERSONAS

Thus we have Kristin Watson, a Newcomer Kitchen customer who is interested to explore varying cuisines to learn more about other cultures:

As well as Nadirah, a Newcomer Women who just moved to Canada and is hoping to find a way to upskill and support her family in a new environment.

CURRENT STATE JOURNEYS

These user profiles were mapped into current state user journeys when engaging with Newcomer Kitchen. Due to the inefficacy of the website’s page layout and information architecture, we found that the resultant challenges primarily lie in the Research, Order, Delivery and Contacting Support stages of the two personas’ journeys.

IDEATE

Our team  conducted an internal brainstorming and prioritization workshops to envision the future state scenario for Newcomer Women and Customers. We explored broad idea solutions and possible features to roll out, and prioritized these ideas according to feasibility and impact.

As such, we derived 8 user stories that we hope to fulfil with our redesign:

• Everyone can discover and navigate to the relevant information they want across the site,  as quickly and effectively as possible, without getting lost or confused.
• Customers can have a better sense of Newcomer Kitchen’s true performance, mission and goals based on customer ratings and reviews. 
• Customers are able to order from Newcomer Women’s mini-menus anytime, anywhere in the near future easily and directly from the website.
• Customers are notified and able to check out seasonal food packages on offer by Newcomer Kitchen from the Order page, directly from the website. 
• Customers can better appreciate the culture, history and origins behind the offered food and programs of Newcomer Kitchen with stories and personal blogs on the website. 
• Newcomer women can discover and easily understand the process and services of various Newcomer Kitchen’s programs without confusing them to be professional work placement programs. 
• Newcomer women will know what to expect in the application process to get onboarded with Newcomer Kitchen’s programs instead of dealing with uncertainties. 
• Institutional partners, volunteers and donors will know who they are contacting when reaching out to Newcomer Kitchen so that they can increase the likelihood of hearing back from relevant representatives and cater their discussions / joint-partnership correspondence to the relevant point of contact.

These culminated to the top deliverables that we presented to our client and what they can expect from us:

FUTURE STATE JOURNEYS

Using our prioritized ideas, we created future state journey maps to envision how users will use Newcomer Kitchen’s website differently. By updating the ‘About Us’ and ‘Contact Us’ pages, and creating new ‘Programs’ and ‘Order’ pages, we expected customers and Newcomer women to have an improved experience in the Research, Order/Application and After Meal/Program stages.

DESIGN

new information architecture

As the redesign of the overall information architecture was our top priority, we sat down in front of a FigJam board, listed out everything that needs to be included in our website, and performed an internal card sorting activity to reorganize the architecture of the site and come up with a label for each group of cards.

MID-FI PROTOTYPE

Our website redesign focuses on three key areas. Firstly, we will redesign the website structure, including information architecture and UI style, to provide a seamless user experience and enhance NK’s business image through standardizing their “about us” and “contact us” pages. Secondly, a new program section will be added to provide newcomer women with relevant information about programs, application guidelines, and entrance. Lastly, we will create a section for customers to easily access seasonal selling activities, food options, and place orders with ease. In addition, cooking stories will be incorporated as per the client’s request.

Our team divided the workload into different page sections of the website. I was assigned to work on the Menu and Order section of the website. While the rest of the sections were pretty straightforward, there were 2 key pages of concern that required further testing:

1. Home page – Our client did not want to have a simplistic layout for a home page. Instead, she wants an immersive experience for all of Newcomer Kitchen’s stakeholders; from newcomer women to customers and supporters. She wanted to have a “door” that welcomes each of these stakeholders, having a personalized message and links to the rest of the webpage. So we drafted two sketches on how we can achieve this.
2. Order page (titled ‘Our Kitchen’) — The order page was the other page on which we had to have multiple design ideas. Newcomer Kitchen has a fairly confusing business model compared to your typical restaurant, which confused many of our usability testing participants (more on that later in the usability testing report). Essentially Newcomer Kitchen offers a seasonal menu that is mainly for the public. But also wants to support newcomer women who also want to start their own food businesses, by posting their menus on the website as well. So we decided to build 2 options, one based on our client’s business model; the other more standardized menu option you would see on competitors like UberEATS.

We now have a hero banner to introduce the Newcomer kitchen to our audience, with links on food orders, programs, and stories down on the page. We also decided to make 2 different workflows on the two order pages for our users to do an A/B concept testing and see which one they prefer.

building a style tyle and major components

We simultaneously worked on building a style tyle and mood board in preparation for our hi-fi prototype, while we were conducting lean evaluations to our mid-fi prototype. This step was quite straightforward to us as our client provided us with their company brand colors and font that were useful for our style tile.

TEST & ITERATE

LEAN Evaluation with usability test

To understand if we were on the right track, we conducted around of task-scenario based usability test virtually with 8 participants. We ended each test with an interview to gather additional feedback. We gave them 3 key tasks to perform using a think-aloud protocol:

1. Discover and understand what Newcomer Kitchen is about and how they may reach out
2. Explore and order a food of your choice
3. Explore and apply for a training program of your choice
4. Find a way to donate and support Newcomer Kitchen

test findings

ORDER PAGE

Ultimately, users are in favour of the overall aesthetics and visuals. However, we found that users prefer a more conventional page layout for Food Ordering (e.g. the likes of UberEats) compared to the unusual Order by ‘Visiting Store’ layout that we had created, as they found the latter confusing. The idea of supporting Newcomer Kitchen’s seasonal food menu with the extra promotional banner located before the Visit Stores section is not clear and rather misleading.

HOME PAGE

We had the same finding for our Home page options – users prefer a more simplified hero banner with 3 task-oriented navigation options instead of the novel ‘door’ concept that is more user-oriented, since the users may not be able to initially identify the user category that they belong to. Hence, we proceeded with the former options for our hi-fidelity.

We also found additional user insights in the following:

Our next step would be to continue to iterate on the designs based on the feedback we received, as well as to incorporate our style tile into a final hi-fidelity prototype.

high fidelity prototype

Our team divided the workload into different page sections of the website. I was assigned to work on the eventually designed the prototype into hi-fi mockups for a finer representation.

Key lessons

1. Manage your client’s expectations well. As part of managing your stakeholder relations, I found that it is useful to keep our client up to date with our timelines and deliverables so that they will know what to expect from both sides.
2. Storytelling is powerful for stakeholder buy-ins. After several presentations in front of our client, I’ve learned the importance of visual storytelling in establishing emotional connection with audience and demonstrating product value. As a fundamental human experience, a good story can help build a memorable and engaging atmosphere where empathizing with users becomes a much easier endeavour.
3. UX design is a team sport. Developing a product requires a whole range of skills that one person alone will never possess. Working as a team with diverse backgrounds provides us with the opportunity to collaborate while leveraging our individual strengths to achieve a common goal.

Extras

Check out the full interactive prototype on Figma: