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.
UX Designer
Visual Designer
3 Weeks
(2021, Jan 25 - Feb 12)
Figma
Adobe Photoshop
Google Drive
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.
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.
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.
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.
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.
Based on my user interviews and user survey, I created a persona that fits my client's target audience which will help me design a website that caters to the needs of the this specific persona.
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 unnecessary features and be able to focus on solving the problem.
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.
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".
After defining the user flows and laying down the product roadmap for this project, I created a sitemap that will give me the blueprint to design the website.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.