John Gonzalez

Cold Cut Studio is a studio offering Art/Creative Direction, Photo, Video, Styling and Studio Rental. The team consists of three down to earth, no-nonsense artists who don’t focus on trends or gimmicks. Wholesome, thoughtful, and reliable just like Mama’s bag lunch.

Roles

UX designer

Visual designer

Timeframe

3 Weeks

(2021, Jan 25 - Feb 12)

Tools

Figma

Adobe Photoshop

Overview

Cold Cut Studio is a studio offering Art/Creative Direction, Photo, Video, Styling and Studio Rental. The team consists of three down to earth, no-nonsense artists who don’t focus on trends or gimmicks. Wholesome, thoughtful, and reliable just like Mama’s bag lunch.

Problem

Cold Cut Studio just started their company and currently has a website that serves as a portfolio page but doesn’t provide a full business pipeline. They need a website to be able to conduct business, showcase their work, and build a community of creators.

Solution

Create a website that provides a proper business pipeline that Cold Cut Studios can use to offer their services, allow customers to view past work and book services, and build a community of creators.

View Final Prototype

RESEARCH

IDEATE

DESIGN

TEST

User Interviews & User Surveys

Assets: User Interview Transcript, User Survey, Empathy Map

To get a better understanding of the pain points and frustrations of the users, my client’s potential customers. I conducted a user survey and 2 user interviews to understand how users found the booking photoshoot process was like and what pain points they have with the process. I created an empathy map based on the users’ points of view.

Market Research

Due to my client’s niche, I had to perform some market research that would give me a better understanding of how other fashion photographers’ approach creating their website and communicate with their customers.

98%

of photographers use Instagram as their main platform

85%

of photographers include their portraits in their about page

80%

of photography websites use white backgrounds to shift focus on their photos

69%

of photography websites include a photo enlargement feature

Persona

Assets: Persona

Based on my user survey and interviews and market research, meet my persona for this project- Richard Lim.

How Might We & User Stories

Assets: How Might We notes, User Stories

Now that I honed in on the pain points of the users and created a persona to represent them, I started to focus on the issues and frame the problem into something that I can design a solution for. One thing I wanted to avoid with this project was scope creeping. I wanted to be able to design a solution with only necessary features and design around John Maeda’s Laws of Simplicity, so that the process of booking photoshoots won’t intimidate the users.

By utilizing my How Might We notes and user stories, I will be able to restrain myself from adding unncessary features and be able to focus on solving the problem.

User Flow

Assets: User Flow

For my basic user flow, I wanted to capture the process of a user finding my client studio's website and getting to know my client and eventually booking photoshoots with them. I wanted to delve more into the thought process and understanding what might go through a user's mind when moving through the website to understand what might contribute to the decision to hire a studio for a photoshoot.

Product Roadmap

Assets: Airtable Product Roadmap

To design for my client's needs while also including features that would help them conduct business, I developed a product roadmap using Airtable. Using the brief, market research, user interviews and surveys, I was able to support the case for the "Why?" I should build each feature with solid research. I assigned each group of features to be added using different priority levels "Must have", "Nice to have", and "Can come later".

IDEATE

Brainstorming

Assets: Crazy 8s

Based on my How Might We questions, I began to brainstorm homepage layouts to help answer these questions and how I would approach creating a solution for my client's problem. Using my Crazy 8s approach and playing around with the layout of the homepage, I began to see how I wanted to approach the solution.

Low-fidelity Sketches

Assets: Low-fidelity sketches

After brainstorming multiple ways to approach the problem, I settled on one layout that I felt would fulfill the needs and requirements that my client needed on their website, as well as spoke to the pain points and frustrations of the users I surveyed and interviewed.

Design

Low-fidelity Wireframes

Assets: Low-fidelity wireframes

After brainstorming and sketching out the layout I decided on, I took to Figma and started to digitally wireframe my sketches to get a better grasp of what the solution was going to look like.

Mid-fidelity Wireframes

Assets: Mid-fidelity wireframes

Meeting with my client, I showed them my lo-fidelity wireframes to gauge whether I was on the right track to meet their needs and requirements. Based on the feedback that I received from them, I reiterated my wireframes and began to start populating the wireframes with content so that I can begin imagining what the actual website would look like with their assets.

Hand-drawn Paper Prototype

Assets: Paper Prototype

Prior to prototyping my wireframes digitally, I made a paper prototype of my website and made sure I wasn't missing anything prior to digitally prototyping my low-fidelity wireframes. Once I had a clear idea of what I wanted to accomplish with my prototype, I tested the paper prototype based on my users stories and what a user would want to accomplish while on the website.

Mid-fidelity Prototype

Assets: Mid-fidelity prototype

Prior to prototyping my wireframes digitally, I made a paper prototype of my website and made sure I wasn't missing anything prior to digitally prototyping my low-fidelity wireframes. Once I had a clear idea of what I wanted to accomplish with my prototype, I tested the paper prototype based on my users stories and what a user would want to accomplish while on the website.

Test

Testing

Assets: Usability Test Script, User Test notes, 5-second Test

After digitally prototyping my low-fidelity wireframes, I began to write a list of tasks to complete for my usability test participants to test the flow of the prototype.

Overall, the general flow was easy to follow and the users were able to complete the tasks quickly and with minimal strain. However, there was some issues I found on my end that I knew could be improved upon.

I also conducted a 5-second test to make sure the content strategy was in-line with the business.

Summary of Findings

The flow of the prototype was easy to follow and tasks were quickly completed. However, I knew I could simplify the flow of information even more. Based on my observations and some feedback from my usability test participants and 5-second test, there were a few revisions I wanted to make to give my client the MVP.

Next Steps

Recommendations

Although one user found the contact card for the website to be a visually appealing feature, I knew if I simplified the way users can access the contact info I could also make it very accessible for different users. To accomplish this, I moved the contact card from the overflow menu to the footer to make easily accessible for different users. By doing this, I am also simplifying the overflow menu to make it a secondary option as opposed to the primary option to navigate the website.

One other change I decided upon was also creating consistency within the homepage itself. In the 'Our Work' section, each individual thumbnail was clickable and can be enlarged for more information while this wasn't initially done at the top of the website where thumbnails for the services offered was. To create consistency with my design, I decided to allow for an enlargement feature to be added to this "services" section to create consistency with the rest of the website.

Reflection

My main takeaways from this project was that everything can be improved upon and can only be limited by your knowledge. Having put a lot of thought into the design and what works and what doesn’t can produce an MVP.

Furthermore, this project consisted of two users: my client’s potential customers and my client themselves. Because of this dynamic, I had to put myself in multiple shoes. I had to approach the problem not just through the potential customers and what would make it a smoother experience for them, but also my clients and how they use their website to operate their business and interact with their potential customers. I designed to create that bridge for them to meet in the middle and the process to design that bridge was very rewarding. Sitting down and writing How Might We questions were especially helpful to frame the problem and to design solutions to answer those questions.

RESEARCH