The Livelihood Project is a cafe in downtown Toronto that also offers employment assistance to refugees. Operating as a social enterprise with non-profit and business elements, they wanted to improve their online presence so people could learn about who they were.
The intention of the Livelihood Project's website was two-fold: first, to provide information for interested customers and second, to serve as an online shop for customers to easily order food items and assorted memorabilia.
For various reasons, the website did not provide an easy browsing and shopping experience. As a team of five students, me and my fellow classmates redesigned the Livelihood Project's website as part of a course in information architecture.
My contributions included:
We held an initial stakeholder interview with the Livelihood Project's founder to determine the scope of the problem and understand their priorities. From this meeting, we learned that there was little engagement with the website and that it did not accurately reflect the social enterprise's future goals and projects. This included having a functional online store, and providing easy-to-find information on their non-profit initiatives.
To learn about these problems from a user-centred perspective, we decided to conduct three interviews and usability testing sessions with Livelihood Project customers. The following outlined the research process and the results we found:
From the initial user research, we realized that the website's topics would have to re-categorized and organized differently in order to make it easier for customers to find relevant information about the cafe.
To tackle this, we decided to conduct a card sorting study. Customers would be given a list of topics (or "cards"), and asked to group them into larger groups. This way, we hoped to find patterns in how customers thought about these topics.
My team and I created an online study on Optimal Workshop, but decided to host the card sorting sessions in person in order to get richer qualitative data. Additionally, we decided to involve the staff in the card sorting, in order to understand how customer results might differ from the staff's.
Here are the final results:
With card sorting, we learned that customers viewed the Livelihood Cafe as separate from the Livelihood Project, and grouped various cards with either the cafe or the non-profit. This was obvious in the final groups, as the "Livelihood Project" group had all the topics related to the non-profit's initiatives while the "Livelihood Cafe" group had all the topics related to what the cafe sold.
This was in stark contrast to the Livelihood Project's staff. When conducting a card sorting session with the founder, they had an "Overarching" group which contained topics relevant to both the cafe and non-profit.
With this key insight, we realized this difference in mental models was what caused a lot of confusion for customers and made it so difficult for them to browse and shop the site. To solve it, we created a sitemap where the topics related to the cafe were clearly differentiated from the topics related to the non-profit.
Here is the sitemap:
With this sitemap, we conducted a tree test, where we tested whether participants could find a certain topic under each of the main categories. Utilizing Optimal Workshop again, we moderated six sessions in person (with customers and staff).
The results showed us that all the participants were able to easily find information related to the cafe and non-profit, but struggled to find items under the online store. As a result, we changed how the category was structured. Here is the final sitemap:
We initially sketched out some screens detailing common tasks. Following this, my group and I created the medium-fidelity wireframe on Sketch. I was responsible for redesigning the home page and online store pages.
Below is a user flow of how a customer might browse and order from the online store.
What made this experience better was that the online store was accessible from the home page under its own heading, and the items were clearly categorized into groups, instead of being lumped all onto one page. This meant customers could spend less time clicking around to find what they needed, and they could order something right away.
You can view the specific wireframes here:
To wrap up the project, we gave a final presentation to our project partner, and presented the medium-fidelity prototype for hand off. I found this project very formative in terms of how I approach working with stakeholders and integrating a customer perspective to product design. In particular, I learned two valuable lessons:
It enhanced our insights to include staff in the card sorting study, because we came to understand how their mental models differed from the customers. This further clarified why the initial website's structure was so confusing to customers and also gave my group a clear idea on how to change the site structure.
My major regret with this project was how my group and I approached the card sorting study. Our strategy was to conduct a hybrid open/closed card sort, with three pre-determined categories that customers could group the cards into.
Looking back, I would have conducted an open card sort, with no pre-determined categories, in order to truly understand participants' mental models. In the future, I will always aim to conduct research where participants are not constrained from the outset and can truly express what they think.