Chloe's Graphic Design Studio

UX Design + Web Development + Graphic Design

Case Study

Project Summary

Objective

Chloe’s Graphic Design Studio website was the final product of a course-long project for Principles of Web Authoring at Arizona State University. This course focused primarily on UX writing principles, usability, and responsive design. The objective of this assignment was to utilize the provided ethnographic information to build a stakeholder persona and narrative to help establish a brand identity and develop a website for a small business.

Role

UX/UI Designer + Web Developer + Graphic Designer

Methods

Stakeholder Persona
Summary Narrative Analysis
Information Archeticture
Sketched Wireframes
Brand Identity
Content Creation
UX Design
Web Design

Software

Deliverables

Outcomes

Based on the ethnographic information provided, I developed a persona and narrative about Chloe, the owner of Chloe’s Graphic Design Studio. These deliverables enabled me to create a cohesive brand identity and content for the website. The website features a home, services, work, 3-portfolio project pages, an about, and a contact page for a total of 8-pages. The site is fully responsive and follows UX standards for designing and writing.

Empathize

Meeting Our Stakeholder

Chloe is a 23-year-old graphic designer living in Sunnyvale, California. She changes her hair color more often than her bed sheets. She owns a 1965 Vespa, a 1971 Triumph Bonneville, and a 1961 Datsun Pickup truck. Much of her time is spent trying to keep at least two of these in a functioning state… an effort she absolutely loves.

Chloe’s persona was chosen at the beginning of the class shaping my assignments for the rest of the course. Based on the provided ethnographic information, these were the keywords that I felt would describe Chloe:

This project was different then many of the ones I have done in the past during my education. Typically, you are not given a bio about a stakeholder. In a non-classroom setting, the first step of this process would have been to meet with Chloe. During this meeting, I would have asked detailed questions to find out about her and the requirements for the project. I would also have done user and market research to identify the target audience during the Empathize stage. This course was primarily focused on written content and understanding the business stakeholder and less focused on user research.

Define

Now that we’ve met Chloe, we need to take the information gathered in the Empathize stage and define what she wants and needs from this website. We also should consider the type of clients she is aiming to reach with her website and the overall goals she has for her business.

Stakeholder Persona

For this project, I created a stakeholder persona that embodied the ethnographic information provided in her bio. The persona is simple in design and focuses on the content, not the visual appeal. This persona will begin to shape how I saw Chloe for the rest of the project. Personas are a great way of building empathy and defining who our users are or, in this case, the business owner.

Summary Narrative analysis

The next step was to create a summary narrative analysis. Personas give great insight into users, but they can be very factual and, if not done right, can be seen as a distraction instead of something that helps grow empathy. The summary narrative analysis’ purpose is to bring life to the persona by talking about their everyday life, giving them a last name, and talking about the things they love to help foster the empathy that we need as UX professionals.

The summary narrative analysis that I created for Chloe focused on developing the story behind her interests and what led her to the path of being a graphic designer. Creating a narrative following this story helped me better visualize what Chloe would need for her small business website, start considering the type of design preferences she might have, and think more like I was “in her shoes.”

The Problem Statement

Utilizing the stakeholder persona and summary narrative helped further build my understanding of who Chloe was as a person, what may have led to her values as a small business owner, and ensuring that the purpose of the website was fully understood.

Chloe is a young graphic design artist, who has decided to open up her own small business instead of entering the corporate world. Watching her Dad run his own small business has helped prepare her for some of the obstacles she will face as a graphic designer. She has already built a small client base that will help promote her business as she focuses on growth.

Chloe’s Graphic Design Studio website should be fun and youthful with a vintage aesthetic that holds true to who Chloe is at her roots. It should focus on designing for small businesses, Chloe’s preferred clientele. Chloe wants her clients to be able to come to her website, view her portfolio, read a little bit about her and her staff and contact her to schedule a consultation.

Ideation

During the Define stage, the persona and the summary narrative analysis let us further build the story we are creating about Chloe and her small Graphic Design business. We now have a clear picture of what type of business Chloe owns, what past experiences have led her on this path, and her core interests as we ideate what the brand identity and website should look like. During the ideate stage, we will discuss an “Image, Hook, and Click” exercise, create some sketched wireframes, begin working through the brand identity, and what content to include on the website.

Image, Hook, and Click

One of the main focuses for this project was creating effective UX writing and utilizing content in a way that would draw a user further into the website. When UX writing and content management are used correctly, it helps keep the user on your website and reduces the chances that their interaction will be cut short.

The Image, Hook, and Click exercise was used to develop a story based on all the user data that we had previously created. The intention was to create a story that would help pave the way for the rest of the written content that would be on the website.

As a UX professional, I wanted to engage the user and make them see the passion that Chloe had for her job and art. Not all websites need detailed storytelling to grab a user’s attention, but for a small business, it is imperative to engage your users and prove to them why your content is important versus the competition. A story like this more than likely would not end up on the final website, but it is a great tool to use to help brainstorm and further connect to the user and the stakeholder.

Brainstorming

The next step in this project was brainstorming what web-based content needed included to create a website for Chloe’s Graphic Design Studio. This included ideas on what pages will be available on the site, potential layouts (low-fidelity wireframes), types of images, and written content ideas. In addition, I used this time to narrow down the main purpose of the website, who the intended audience would be, the visual aesthetic that would best fit Chloe’s brand, and what functionality would be available for the users. Below is a sampling of the ideas created during this brainstorming exercise:

Prototype

Brand Style Guide

From the knowledge we have gained about Chloe, we know that she is a passionate graphic design artist who has a flair for all things vintage. When creating the brand identity, I wanted to make sure to include a retro 1970s vibe utilizing a fun color palette and designing a logo that is reminiscent of other logos of that era:

Header 1

Font: Courgette Semibold 65px @ Desktop / Color: #1E839A

Header 2

Font: Courgette Semibold 25px @ Desktop/ Color: #F55A44

This is body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui faucibus in ornare quam viverra. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae.

Font: Lato 22px @ Desktop/ Color: #000000

Additional Assets

Alongside the logo and color palette, I also created graphic assets that could be used to provide visual contrast in the various sections throughout the website.

The goal of the brand identity was to create a cohesive look that would embody the fun and vibrant personality of Chloe, our stakeholder. Since Chloe’s Graphic Design Studio would be considered a small business, it was important to me to design a brand identity that gave potential clients a glimpse into who Chloe was and what you may expect from her as a graphic design artist.

Information Architecture

Before creating the prototype, I chose what pages would be available on Chloe’s website. The main goal of Chloe’s website was to inform potential clients of the services she offers, a view of her most recent projects, a place to learn about Chloe and her team, and a way to capture client information and provide contact information to the users. In total, there would be eight internal pages and links to Chloe’s Graphic Design Studio’s various social media accounts.

The Prototype

With the deliverables created thus far, I was able to design and develop a fully functional prototype that met Chloe’s needs as a stakeholder, while also meeting the needs of her potential clients. To develop this website, I had to acquire web hosting and decided to use WordPress as my CMS. The website was developed using a combination of widgets and custom HTML and CSS and is fully responsive. All the images for this website were retrieved from Unsplash.com or Pexels.com, which are documented via the website content inventory.

Home Page

When designing the home page, my biggest goal was to include multiple CTA’s to help navigate clients to the other pages. I purposefully wrote the copy to help draw users’ attention and help promote the brands mission and goals. I intentionally included client testimonials to help highlight brand loyalty and help build trust with potential clients. Finally, I included a form to generate leads that could lead to future business opportunities.

Services

The services page is primarily informational. The goal was to clearly and effectively describe the services Chloe’s Graphic Design Studio has to offer potential clients. For this project, I also wanted to promote the ability to create custom branding packages because in the small business world the wants and needs of a company can vary drastically. The FAQ section helps field some of the basic questions that most clients want to know when exploring the website. Finally, I included another CTA to direct the users to the contact page in attempt to convert the user to a client.

Work

The work landing page highlights Chloe’s three most recent projects. Each project features an image that clearly displays the product, the projects name, type of design project, a brief description of the project, and a CTA to direct the user to the individual project page.

Project Pages

The project pages are designed to showcase Chloe’s design process. The pages start off with a more detailed description of the customer and the product then identifying the overall goal for the project. The initial consult section gives a snapshot of the information collected about the stakeholders and business. Each project has an explanation of the deliverables that were provided to the company and a summary to better articulate the design decisions. At the bottom of the project pages, there is a form to help generate potential leads.

About

At the top of the about page, I included a summarized version of “image, hook, and click” and summary narrative analysis to introduce Chloe to potential clients. Next, Chloe’s mission for the company with a CTA to the contact page. The meet the team section is primarily informational but helps users put a face to the name, which can help foster trust and empathy. I included another CTA to the contact page at the bottom of the page.

Contact

The contact page features a form at the top to generate leads for potential clients. Underneath the form is a map showing the general area Chloe’s business and all the contact information that would be necessary for a potential client to use.

Insights

Outcomes

Using the tools that were created during the empathize, define, and ideate stages of this project, I was able to successfully create a website and brand identity that aligned with Chloe’s persona and overall business goals. This project was focused on designing for the stakeholder, but I made sure to take careful consideration into what potential clients would be looking for on Chloe’s website and who the target audience would be when creating the design. When working on projects in the “real world,” we have to be able to balance a fine line between making our products user-centered and also making sure that we align with the goals that stakeholders want to achieve in the business. This project helped me develop the skills necessary to understand the stakeholder and identify business goals that need to be considered while completing a design.

Next Steps

This project was completed in a 5-week course over the summer, there was not an opportunity to test the prototype. To continue this project, I would complete a usability test on the prototype to identify any usability issues that may arise with the users of the website. As I mentioned before, this project focused on the stakeholder and UX writing and content management. If I was to further iterate on this project, I would also do user research to gain a full picture understanding of who the users are of the website. Using the data collected in the user research and usability testing, I could design solutions and improve the prototype. When utilizing design thinking, iteration is the key to creating a successful UX design.