Summary

We redesigned the La Cocina website to make content easy to find, remain responsive and easily implementable in Squarespace.

My Role

2-week collaborative design sprint with Liana Ramos. Primarily I focused on, content inventory and information hierarchy analysis, research, wireframing, branding, hi-fidelity mockups

Client Overview

La Cocina is an incubator providing affordable kitchen space for more than 80 entrepreneurs in 30+ brick-and-mortar locations all over the Bay Area. The high cost of renting a commercial kitchen makes it difficult for many working-class food entrepreneurs to formalize their business. Our kitchen space lets people who were formally shut out of the food industry find a way in.

Problem Overview

La Cocina wants to enroll new entrepreneurs and gain further support with donations and membership; however, the current website does not feature entrepreneurs. Entrepreneurs not only are the business but they drive the support as well. La Cocina wants people to feel connected to them and want to support the entrepreneurs. Its also difficult for people and possible entrepreneurs to know who La Cocina is and what they do by skimming the site. The website in its current form is overwhelming to navigate and users have a hard time finding what they need on the website because of inconsistent content, competing for visuals and no clear calls to action. The current website does also does not have a press page that is needed to share happenings, brand assets, and other media features.  

Solution Overview

Every page we designed were made to meet the user goals that we identified. Overall We simplified layouts, unified and prioritized content to allow users to easily find what they are looking for and updated the navigation and content to use an active voice. When users are able to have a pleasant experience they are more likely to engage with La Cocina. This allows the nonprofit to meet their goals of enrolling new entrepreneurs and gaining more support.

Discovery

We started with a deep analysis of the content inventory and information hierarchy of the entire website. We found 32 instances of users being directed off the site, 25 out of those times they were not able to return. We also discovered that La Cocina was building websites for programs within there websites and a lot of repeated content making wayfinding difficult and confusing. Leading us to do a heuristic analysis of the site in its current form. We studied the navigation, the use of branding and the responsiveness of the site. The navigation was misleading and unorganized and contained repeated pages, to many font sizes and use of color was causing the content to compete and making calls to action unclear and the coding that the client was using in the Squarespace template to maintain the branding/design (fonts) was actually causing the website to be unresponsive in mobile.

Research

In our research phase, we Identified four target users. Entrepreneurs, Media, Donors and staff. Through research and interviews, we identified their needs and goals. Discovering that many things overlapped between them but Identified two main things that all four had in common. They all wanted more information about entrepreneurs on the website and wanted to know what La Cocina does. We also did a deep dive into the current Squarespace template that La Cocina was using. One of our limitations for this project was that they wanted the site to stay on Squarespace. The Graphic designer who made it originally used a lot of coding to maintain brand guidelines. The people who have to update the site are having a difficult time managing all the coding with the Squarespace template. We wanted the staff to be able to use the Squarespace template and not have to worry about coding. We then researched Nonprofit, Incubator and press websites to see what features other companies were offering and what content was most pertinent to what they are trying to achieve.

Findings

The key insights to take away from our research and discovery are that all our users want to know more about the entrepreneurs and read stories and features on them. After helping La Cocina discover what the business goal of there website is we uncovered that the website should be a constant funnel of support for La Cocina. Because donations help the Entrepreneurs but in order to drive donations and connect with users want to know more about the entrepreneurs which again are not currently highlighted on the current website.

Design

We simplified the branding for the website pulling from La Cocina’s current branding. We researched web design style guidelines and wanted to focus on La Cocina purple really driving home and making users connect and associate La Cocina to that. We also decided that in order to maintain the responsiveness of the template and making the experience simplified for the people updated it we would have to change the fonts used in the site. We chose two fonts that closely resembled the look of the fonts in the brand book. When designing the site we kept these heuristics in mind Discoverability, Consistency, Aesthetics, Explorable interfaces, Readability, Simplicity, Visible Navigation we also kept the Gestalt principals in mind Proximity, Common Region, Similarity, Closure, Symmetry. We made decisions based of user goals and needs ( show this visually)

Testing and Iteration

We tested our prototype using Pass/Fail/Assist on 4 users.We asked them to complete the tasks as the different target users: Donor and Press. All users were able to complete all tasks without assistance. We found that. Across the board, all users were able to locate the donate button instantly and with ease and under a second in the top navigation. All users Could find and download press kit easily. All users could Easily locate annual reports. One thing that we had to address that was in the test to become a member All users looked to the get involved nav tab when trying to become a member and they were able to find it on the homepage. So we added that in that section in our next iteration. Something that stood out from testing was that a Donor user was able to complete all the tasks in 20 seconds above the fold.

DESIGN DELIVERABLES + OVERVIEW OF DELIVERED SOLUTION

We provided La Cocina a Redesigned homepage, Redesigned impact page, New press page, Updated navigation, Simplified layout and Unified content, Promoted clear calls to action, a Content evaluation guide showing all the dead ends and instances where users are navigated away from the site and a Growth guide which would be La Cocina’s in depth go to implement all of our recommendations on their existing Squarespace template without having to use code. You can explore these documents further by reviewing the deck made for this client at the end of this page.

RESULTS & REFLECTIONS

La Cocina came to us with a set of desires but didn't really understand what the bigger picture of those needs was. We really helped them narrow down what their business goals were for the website. We excited them to explore questions of things that had never thought about and helped them discover how they could best meet their business goals through the website. I feel strongly about the recommendations we made and look forward to seeing them implemented in the future. They were thrilled with how the project turned out!