The Design Thinking Process

The recipe

To begin, I defined my research goals to compile the demographics of the Carly’s existing business, see what competitors are doing, and understand the perspective of the individual user.

A day at the market

Following my plan, I conducted market research to uncover insights about the current state of the meal industry.

Story-time

In order to better grasp the goals, needs, motivations, and frustrations of users, I sat down and had a conversation with several of Carly’s current customers about their use of her current service, Daily Chew.

These conversations were prompt-driven, allowing me to collect insights from stories rather than asking questions directly.

What are you hungry for?

I used a method known as “empathy mapping” to identify patterns of similar themes from the interview transcripts, which I could then translate into needs.

What would Abby do?

By combining market research with user needs, I produced a “persona”, or a prototypical user that embodies my research - Abby.

Abby is someone that I can refer to when making design decisions - if it works for Abby, it works for the design.

What’s the problem?

User needs are converted into statements that define the space for which to design solutions.

This is done using “Point of View” and “How Might We” statements to ensure cohesion from insight to problem statement.

Setting the table

By combining the user needs from my research, business goals from Carly, and technical considerations of creating a website, I illustrated a clear overview of objectives across the project ecosystem.

B R A I N S T O R M

Using the “How Might We...” statements as prompts, I produced initial solutions/features that could then be more closely examined and prioritized.

The real MVP

Referencing user research, the original project brief, indirect competitor analysis, and my brainstorm session, I derived a list of prioritized features needed to constitute a minimum viable product (MVP).

Features like cart-based checkout, a chef bio, and pricing explanations must be included. Features like a meal plan builder or meals for kids can wait.

The cookbook

Referencing the MVP features and competitor analysis, I created a blueprint for the website.

Including recognized patterns of informational structure helps ensure that users will find the site familiar and more easy to use.

Let it flow

Task Flows and User Flows define the expected path through the site, as users seek to accomplish specific goals.

As I implement features into the design, I can refer back to these flows to ensure that each feature empowers the user to do what they intend to do.

I’m ready to be done writing

Knowing what tasks Abby would be looking to accomplish on the site, I created an in-depth explanation of every page I’d be designing, and why.

This is sketching me out

With data-driven structural planning finished, the website was able to start taking form, beginning with low-fidelity sketches of page layouts, based on existing design patterns.

Look Mom, I’m UX-ing!

Moving forward with the best of my sketched layouts, I mocked up medium-fidelity wireframes for each page involved in the user task flows.

Due to time constraints, these would be the wireframes used for prototyping & testing.

Responsive is responsive is responsive

To ensure that the design would meet the brief’s requirements, I sized elements in a way that would allow for responsiveness across various devices.

Practicing to be a spider

Using Figma, I created a web of connections necessary to the task flows to allow for an interactive environment in which to test the competency of the design.

User talk, Ian listen

In creating my usability testing plan, I chose to use the “Think Aloud” method of testing. This allows for more raw information to be collected from participants - they narrate their thoughts while they complete scenarios based on the expected task flows.

Affinity & Beyond

To extract actionable insights from the testing, I used an Affinity Map.

Similar to the Empathy Map from the first phase, actions and feedback were transcribed, organized into clusters of various pain points, and translated into recommended design changes.

Putting feedback to work

Based on the revision recommendations derived from testing, I revised my design, resulting in a tested & polished layout, ready to be filled in with color & styling.

Feeling moody

With the skeleton of the website built, brand identity needed to be fleshed out. This began with establishing brand attributes based on the project brief, and then using Pinterest to find inspiration aligned with these attributes.

• Friendly

• Relatable

• Simple

• Fresh

• Natural

• Wholesome

• Straightforward

I go-go… for the lo-go

Using the established brand attributes and visual inspiration from Pinterest, I sketched numerous possibilities for a logo.

I then created high-fidelity versions of my best idea, eventually landing on a final, polished logo.

Show some style

I referenced my Pinterest mood board to establish a distinct visual style for the Carly’s Kitchen brand, to be used when fleshing out the wireframes from earlier.

It’s still responsive

Device responsiveness is still key. Using my responsive wireframes from earlier, as well as my style tile, I checked throughout the design to ensure that the UI elements agreed with the layouts across different devices.

Don’t forget the kit

Building upon my style tile, I included every modular element of the website in a centralized “UI Kit” to maintain consistency of elements across the many pages of the website.

Making it real

The design can now be handed off to developers to be implemented as a real website that customers can use to order services from Carly!

Because the design was created in Figma, developers can also use the application to gather the necessary resources and code.