User Experience and Website Design

I joined the Good Cheese team after they had recently had their website design updated.

As my background specializes in UX design, I brought my lens to the overall design to make it even more user-friendly:

• I increased font sizes and adjusted font colours so they were more visible and AAA compliant as per WCAG guidelines for accessibility.
• I created consistent page layouts to create a sense of familiarity for users.
• I created a plan to update the overall navigation and product organization.

Good Cheese has more than 300 products in their catalog and because of that, they needed a very thoughtful and intuitive site architecture.

When I joined, the first thing I noticed was the product library and that there wasn’t a sense of consistency or understanding to the way they had everything laid out.

I realized this was going to be a huge undertaking, but would make a really big difference for the customers shopping experience.

• I created new product guidelines and then updated all product descriptions to match the new guidelines.
• I researched information on all products so we had a consistent set of criteria included for each product.
• I created a product tag rubric so any team member would be able to tag products appropriately.
• I wrote code on the site so it would not display sold-out items unless it was searched for.

The Good Cheese shop started as a dine-in/take-away restaurant for sandwiches and cheese boards. When the pandemic hit, they pivoted to a retail store and continued down that path into 2022.

However, the store was not designed originally to be a retail environment so there were many opportunities for the visual merchandising to be updated.

• I reorganized different product areas so they were organized by type, or brand depending on the area.
• I created a signage system for the beer fridge.
• I designed different signage options for the wine area to help increase sales and allow for more self-shopping.
• I was constantly re-merchandising and implementing merchandising techniques used by the whole team.

I am a constant problem solver. After working a few times in the store, I noticed that the POS system that was used at Good Cheese did not allow a team member to scan a weighted barcode. As the primary items sold were weighted (cheese & charcuterie) I knew that this was something we had to tackle.

• I researched different apps that were compatible with their theme in Shopify that would allow for weighted barcode scanning.
• I installed the new app and completed all of the back-end coding and work to make the app work with their system.
• I worked with the app’s support team to make sure everything worked properly and completed lots of in-the-moment fixes as issues arose.

In order to update the site navigation, we needed to know from Good Cheese users how they used the website and any issues they may have faced.

• I created a survey that was sent out to their top shoppers with questions that asked them about their shopping habits, purchasing methods, etc.
• I used the results to come up with a new navigation system that would be more user-friendly and easier for shoppers to understand.

Before we can build the website, we need to understand its context for existence. Why does your site exist? What problem does it solve for your users?  

Brand Questionnaire 

A brand questionnaire was conducted and was used as a jumping off point to gain an understanding of the aParent Corp brand. 

Brand questionnaires are important because they help designers understand how the key stakeholders view the organization’s vision. I use this insight along with the perspective of the user to dictate how I design the website and app. 

Concept Sketching

I hand-sketch and quickly wireframe early mockups of the future product to keep it in mind before I start conducting research.

Value Proposition Chart 

I use a value proposition chart to have a clear vision when creating designs as these charts outline the key aspects of the product: what it is, who will use it, and why they will use it. After conducting research, I refer back to this chart and update it with the findings from users. 

After defining the idea, conducting user research and market research allows me to understand where your website fits in and how we can be similar to what exists, but also innovative and unique. It’s important to have a general style that is similar to what exists because it helps your user with consistency. 

User Research 

I conducted the following user research, in order to learn directly from people who would potentially use the site. I conducted most of my research through User Interviews.com, a site that allows researchers to connect with users based on their specific criteria in order to get really purposeful responses.

• One on One Interviews 
• Surveys 
• Prototype Testing 
• Site Map Testing 

Empathy Mapping

Empathy mapping is a technique used after conducting user interviews to articulate what you know about the user. When creating an empathy map, you categorize the responses of the respondents into 4 categories: What they said, what they felt, what they thought, what they did. 

Market Research

Market research involves gathering data to learn more about target demographics and consumers so you can market yourself better. I conducted market research to learn about what websites or similar organizations looked like.  

The analysis phase moves the information from WHAT the Users want to WHY they think, want or need it. 

User Personas

A User Persona is an archetypical user whose goals and characteristics represent the needs of a larger group of users. They include things like behavior patterns, goals, skills, attitudes, and background information, as well as the environment in which a persona operates.  

This User Persona is for Michelle:

User Stories

A user story is an informal, general explanation of a website or app feature written from the perspective of the end user. The purpose of a user story is to articulate how a piece of work will deliver a particular value back to the customer.

This is a User Story for the User Persona shown above.

User Flows

A User flow is the path taken by a user on a prototype of a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action. 

I created multiple user flows, the following is one that a User would follow when creating a profile for the first time.

I created the initial site architecture using Miro, which I then input into Optimal Workshop in order to test the architecture with users.

After rounds of testing, we realized that our users understood the concept of “Pillars” and we could nest the pillars, rather than having them all displayed. This allowed me to clean up and simplify the navigation.

When users’ wants, needs, and expectations of a product are clear, I can move to the design phase. At this step, I created wireframes and the overall UI design. An effective design phase is both highly collaborative and iterative.

Wireframes are digital mockups of the product that help designers build the basic structure of the page. 

I created hand-sketched wireframes, and turned those into low-fidelity wireframes and eventually high-fidelity wireframes that could be turned into a prototype.

Hand Sketches

Low-Fidelity created in Sketch

High-Fidelity created in Figma

I created the colour palette for aParent after research and testing. I kept the light grey from the original logo and I selected a cool neutral green as the secondary colour. I then decided to add a vibrant orange as the highlight as I know that orange symbolizes enthusiasm, creativity, change, and determination. All evident in the aParent mission and team!

• Main colour: #D0CFD0 Light Grey
  • Used for backgrounds, logo
  • #FFFFF white is used as the main background on the website, and presentation decks. 
• Secondary colour: #3C6E71 Ming Green
  • Used for divider, underline, tint on images 
• Highlight colour: #F4743B Mandarin Orange
  • Used as buttons, highlights, call to action 
• Text colour: #08090A Rich Black
  • All Font, other than white. Use white font when on a colour background. 

Some ways that I conducted testing are: 

• Sharing it with key stakeholders and some of the users who did the initial interviews to gain feedback.
• Testing sessions with other users who are part of your target audience.
• Conducting surveys which are a great way to capture both quantitative and qualitative information. I would add open-ended questions like “What part of the product do you dislike?” to get user opinions on specific features.
• It is also important to look at quantitative data like click count, navigation time, search queries etc. This will be very helpful for us to find out how users interact with the site. 

I wrote all the content for the website, after interviewing key stakeholders.

I selected and edited all the images used on the website. I created image guidelines so the team could select new images at any point.

I set the typography guidelines, ensuring they meet AA Website Accessibility standards.

I built the website in WordPress, and wrote my own code.

I defined the Problem Statement to understand why this app was necessary.

Summarizing how our app can act as the solution to the problem we defined.

After completing User Interviews, I created two User Personas.

I created a User Story for the two User Personas.

I built a user flow to dictate the wireframes.

Hand Sketched wireframes

Low-Fidelity Wireframes in Sketch

High-Fidelity Wireframes in Figma

BalanceBetter App on Figma

<pre class="wp-block-code"><code><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&amp;url=https%3A%2F%2Fwww.figma.com%2Fproto%2FfLowF1eb5AMejpc85c18SO%2FaParentCorp%3Fnode-id%3D118%253A4251%26scaling%3Dscale-down%26page-id%3D0%253A1%26starting-point-node-id%3D118%253A4251" allowfullscreen=""></iframe></code></pre>

I created the Email Signature, including a template that could be re-used easily.

I built their logo in Illustrator and provided them with a thumbnail, white background, transparent, and dark mode font options.

I also created Logos for their Apps

I created a letterhead template that they can use for Project proposals *classified information has been greyed out*

I wanted the website to feel relevant. References to hip-hop culture from the ’90s and a neutral color scheme built from ocean and island tones.

I conducted research through user interviews and card sorting. What I found told me that users really cared about the ethical elements of their morning cup and they were willing to spend more.

I found out that the GVOC user wanted to know about where their coffee comes from and the health benefits. They were willing to spend more money on their morning coffee if they knew it was good for them AND for the planet. I made 2 User Personas to help guide me in building the Information Architecture.

Now that I had a good idea of who I was designing for, I got to work on building the Information Architecture or Sitemap. We had a lot of information that we wanted to share about the brand’s mission and values, while still making it easy to sign up for a recurring order of coffee.

I used an initial sitemap to complete card sorting tests and made a few changes based on the findings. Our users cared about the mission of the company, but their main goal was to complete their transactions as quickly as possible. I knew that meant the site had to feel seamless and setting up a recurring order had to be easy to navigate.

I always start with a physical sketch to create a low-fidelity wireframe, before moving to Sketch to create a medium-fidelity wireframe with some functionality. Finally, I create high-fidelity fully functional prototypes on Figma.

Nothing is more valuable than feedback from users so I made sure to test the prototype with a handful of users before we launched the site.

This helped define the final visual style of the website, in small ways like button styles and color schemes. I realized that the checkout process took a few more steps than we needed and I was able to identify where I could make changes that would impact the user’s ability to pay and leave the site.