UX #2 - Cocina RWD

Design a Responsive Website to find & view cooking tutorials

Welcome to my second UX case study where I show the design processes and decisions I followed to develop a project focused on designing a responsive website for a fictional organization.

For its development, I have chosen tools from Google Workspace and Adobe.

All this project would not have been possible without the support of The Google-Fundae Scholarship Program that has allowed me to be part of the Google UX Design Professional Certificate.

Slides Presentation

Project Overview

Cocina is a leading gastronomy media that offers everything from print magazines to cookbooks and its own line of kitchen utensils. Cocina has a simple premise: “home cooks are the best cooks”. Cocina’s goal is to provide inspiration and knowledge when it comes to cooking.

Although cookbook sales remain stable, in recent years this medium has detected a drop in the sales of its magazines.

As a UX designer, I was in charge of researching the current needs of users, how they think and feel and designing a RWD site for Cocina from conception to delivery, taking into account the content, layout and performance across devices to ensure usability.

Whether they are passionate about cooking or new to it, this new approach will allow users to get help from the Cocina Culinary Universe and keep this medium as a global benchmark.

Research

In order to focus on the real user problem and be able to solve it in a functional and affordable way, I decided to use Design Thinking, a common framework used in user-centered UX design.

It consist of six phases that will serve as a script for my project.

Among other tasks, I conducted interviews and competitive audits, sitemap design, paper and digital wireframing, mockups, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Stakeholder Interview Insights

User Research

User interviews, empathy maps, user and customer journey maps allowed me to understand my target user, their pain points and their needs.

Another primary user group identified had strong technological knowledge, but both groups shared a very busy life and high demands on website navigation.

Competitive Audit

The competitive audit allowed me to keep track of the competitors, understand their approach, and discover what the Cocina brand might be missing. The goal was to find out what works for other companies in this field and incorporate those strategies to give the Cocina brand a competitive advantage.

Starting the Design

One way to kickstart the ideation process is with Design Thinking Activities like the How Might We (HMW) and Crazy Eights exercises.

HMW

Crazy Eights

Sitemap

Confusing website navigation and interaction were pain points for users, so I used that insight to create a sitemap.

It allowed me to map my website’s content schema to strategically build the Information Architecture (IA). This let me to visualize how individual web pages or sections of the site are related to each other, simplifying things and improving navigation.

Paper Wireframes

Digital Wireframes

In the initial phase, I based my digital wireframes on the feedback and findings of my user research.

The clean visual design of the website was part of my strategy to improve the user experience.

Different screen size variations cause elements to rearrange. The three column desktop layout is rearrange to two columns for a tablet and a single column for a smartphone. I relied on ratio-based grids to rearrange content and components. 

Lo-Fi Prototype

Thanks to the previous wireframes I was be able to develop my first low fidelity prototype. The main user flow consisted of navigating from the homepage to the selected recipe page.

Always thinking about accessibility, I incorporated design principles such as industry standars, Gestalt principles, the use of headings, and landmarks. This provided a visual hierarchy and efficicient navigation.

Link to the first Lo-Fi prototype of the website.

Design thinking is an iterative, non-linear process, so after designing this first prototype, I began testing solutions to gain a deeper understanding of my website and its users, which allowed me to further refine my designs at this early stage of development.

During this iterative process, the results generated were used to redefine additional problems.

This increased level of understanding guided me to investigate usage conditions and how my target users think, and feel about the website, taking me back to an earlier stage in the design thinking process. The iterations allowed me to make modifications and improvements to rule out workarounds.

The ultimate goal was to gain a deep understanding of my target users and my website.

UX Research Study

I divided it into 5 phases: usability study, affinity diagram, pattern identification, insight identification and prioritized insights.

Usability Study

Affinity Diagram

To organize the results of my research, I used the affinity diagramming method, which allowed me to classify large sets of ideas into groups.

Findings

Finally, I identified common patterns that helped me understand the causes and effects of my designs, identifying insights that I classified in order of importance to improve my web page.

Refining the Design

Mockups

After the usability study, my first designs show the problems that needed to be fixed. To improve the accessibility, the industry standards, such rectangles with Xs indicating images and videos, were resized, making them larger to increase clarity and usability.

To make the presentation of the information even clearer and more efficient, a navigation bar was added that allows the information to be arranged in grids or rows and to minimize lateral navigation, thus keeping the focus on the relevant information.

Because users access websites from a variety of devices, I’ve included additional screen sizes in my mockups, as Responsive Web Design (RWD) is a way to provide equal access to information, regardless of device. 

For the Cocina website to be successful, the design must be usable at all screen resolutions and sizes.

Hi-Fi Prototype

By proposing different paths, the main user flow can navigate to the desired recipe page seamlessly.

In addition, thanks to usability studies and collaborative work, functions were include to organize the content in differents ways according to the needs of the users and the type of device used.

Link to the first Hi-Fi prototype of the website.

Accessibility Considerations

Accessibility is usability for people who interact with products differently. From the beginning, this project embraced an inclusive design approach, ensuring that all people can use the website using all kinds of technologies, including Assistive Technologies (AT).

I looked for ways to make Cocina easier to use for users with disabilities and also improve the experience for everyone.

During my research and design phases, I applied the following three accessibility guidelines to organize Cocina's content efficiently for all!

Implementing the Design

In this phase of the project, with the design already finalized, I took it upon myself to provide the mockups, prototypes, and specifications to my fellow developers and engineers so that the team could start the coding process.

At that time, in addition to continuing to collaborate with my team and always keeping in mind the creation of a functional and usable product, I prepared the next steps to take after the launch of the website and reflected on the lessons learned.

Next Steps

Takeaways

While developing this website I learned that user’s attention is finite and my designs should be simple to allow them to understand what they are looking at and find what they need in a glance. Avoiding confusing or delaying users and guiding them to create a cohesive, meaningful and usable representation of the Cocina Universe.

The journey of this second case study has reached its final station. Thanks for coming, I hope you enjoyed it as much as I did and remember...

"Sic mundus creatus est"