Brand Colors

Brand Colors

Overview

Brand Colors is a leading platform that is dedicated to the creative industries. Founded in 2021, they deliver inspiration, insights, and advice to millions of creative professionals each year. The website cover redesigns and new designs of notable products, companies, services, and organizations across all industries and locations.

Hight Level Goals

1. Stakeholder interview. I met the business needs.
2. Analyze the main competitors to get valuable feedback.
3. Conduct the moderated and unmoderated testing to meet the user's needs.
4. Collaborate with the design team to make the mockup closely pixel-perfect.

Challenge

- How I can help the user to navigate through the brand page and discover the most important details for the brand?
- How I can encourage the user to navigate through the website and find their favorite brand?
- How I can enhance and embodies the user’s needs?
- How I can deliver an overall end-to-end user experience?

Roles

UX research, UX Design, UI Design. A team of 2 (1 Product Manager, 1 designer)

Tools

Figma, Miro, Maze, Notion, Zoom

Methodologies

Stakeholder interview, conducting competitive research, persona development, information architecture, wireframing, lo-fid/high-fid prototype, usability testing, design guidelines.

Timeframe

8 weeks

Empathy

Phase Deliverables:

  • Semi-Structured Interview
  • Competitive Research & Analysis
  • Surveys
  • User Interviews

Semi-Structured Interview

The first step was to gather some information about the company and of course to meet the client, so I made with him an interview. I set the ball rolling by asked the client for a project summary. Τhe interview met with the client’s needs. Some main questions.

  • What is your overall goal to create this product?
  • Please, can you explain to me what is your overall goal to create this website?
  • What specific business goals are you hoping to accomplish through this?
  • Are there specific areas of the website you would like me to focus on?
  • Who are our biggest competitors?

Findings

  • I got a lot of useful information about the business model and the overall business goals.
  • During our discussion, we had the ability to take over some topics, as an instance, if we want to include an option for the designers to show their own profile and on the other hand to give the option for the designers to publish their articles.

Researching the main competitors helped me to leverage my findings to ultimately deliver a product that builds value in the brand.

Competitive Research & Analysis

Direct and Indirect Competitors

  • A variety of brands.
  • Clean UI.
  • A variety of extra options is a plus.
the featured image of firect competitors
The direct competitors
  • In some cases the brands are up to date.
  • Some of them they provide versions of the logos.
  • Understanding the content.
the featured image of interect competitoris
The indirect competitors

Competitive Research Goals

  1. Understanding the market. Using competitive research, I discovered market trends that I would otherwise have lost.
  2. Understanding the business and what competitive factors I want to track.
  3. Completely understanding what competitors are offering.

Competitive Analysis Goals

I learned to identifying the competitors and evaluating their strategies to determine their strengths and weaknesses relative to the brand colors product. The goal was to gather the intelligence necessary to find a line of attack and develop the go-to-market strategy.

More specifically, I learned of some key features to consider if Brand Colors’s experience would be able to measure their direct competitors such as BrandColors.net, Brand Palettes, US Brand Colors.

User Research

I combined user surveys and user interviews to gather the knowledge, and on the other hand to gain clarity about my problem statements and objectives.

Prioritize the goals

  • Identify my target group.
  • Understand the user’s needs.
  • Document any further and possible pain points of the user or any kind of positive effects using similar products in the marketplace.
  • Understand if the users are interested in being a part of such an online branding community and in sharing their creativity.

User survey

The user survey attracted 60 people in almost 40 hours. Almost all of them answered the open questions with helpful insights. This gave me the ability to observe some patterns where people react with this idea. Using this method, I collected quantitative data and, therefore, was not provided with clear insights. On the other hand, gathering different opinions helped me to understand the gain insights into how the users think in a broader sense. Also, helped me to had scope for the variety of the user’s concerns.

Insights

  • A lot of talk about the positive effect of belonging to a community and submitting a logo.
  • Some said that they would use this website to find the history of the brand.
  • A couple of people would find it more efficient and effective to have the colors of the brand, rather than to search on the entire internet.
  • Some talked about the positive effect of belonging to a community and receiving design feedback.
  • Some of them need some reassurance about the credibility and the copyright of the brand.
  • Some would be happy to have a search for all this information and find everything related to their industry, in one place.

User Interviews

At the end of the survey, I gave the opportunity to fill out the email field for everyone that wanted to give valuable insights. I conducted 5 interviews.

  • User #1 is a graphic designer with a basic experience in the design industry.
  • User #2 is quite ignorant of this concept.
  • Users #3 and #4 user similar websites.
  • User #5 is brand designer who has a genuine passion for design and creative culture.

In this case, the research goals remained the same as the survey. In addition, I added some questions that were not directly about the website, but more about how the designers can respond to these issues and critiques when they confront them personally.

Define

Phase Deliverables:

  • Customer Journey Affinity Diagram
  • Empathy Mapping
  • User Persona
  • Point Of View (POV)
  • How Might We
  • Project Goals
  • Featured Roadmap

Customer Journey Affinity Diagram

This method is focused on the customer journey. I consolidate research learned from the customer interviews and surveys. Learned about the motivations of the customers and the pain points were helped me to brainstorm new ideas to help users in their journey. This specific research came with three categories including hopes, fears, and ideas. These categories helped me to understand its target market on a deeper level and on the other hand, make it easier to brainstorm solutions.

The Customer Journey Affinity Diagram

Empathy Mapping

The empathy mapping allowed me to articulate what I knew about specific types of users. It’s empowered me to create a shared understanding of user needs and on the other hand, helped as a decision-maker with key judgment calls.

The empathy mapping

User Persona

The methods above gave an overall approach to a complete understanding of who exactly is the target user. Using this method helped me to identify potential problems, and to improve the mission alignment. Anna is a 29 year’s old graphic designer. She would like to find more unique experiences where she can discover the logo, brand colors, and every brand style guide.

The User Persona

Point Of View (POV)

The POV it is narrowly focused and centered around your users’ needs in a meaningful and actionable way. I used this method to have a deeper understanding of my specific users, their needs and get the most essential insights about them. It’s provided me an opportunity to express statements about the user, their needs, and any insights that I have in a clear and coherent way.

The POV (Point Of View)

How Might We

I defined the design challenge in a Point Of View (POV) statement and then I started to use the “How Might We” questions, to reframe the POV and open up the design challenge to look for the solutions.

  • “How might we give to the users the ability to easily explore and find the brand name?”
  • “How might we provide all the important information for them?
  • “How might we help the users to feel more trust about the information that it is gathered?”
  • “How might we give the ability for them to submit their brand name?”

Project Goals

I defined and on the other hand, I compared the goals what was important for both, the business and users.

Key points

  • Building trust between the information of brand and the user.
  • Creating positive browsing experience when the user browses through the website.
the goals of brand colors

Featured Roadmap

Using the feature roadmap helped me to prioritize the user experience at every stage of development. Also, helped me to uncover design tasks that I might otherwise miss and on the other hand to reinforce the importance of design and usability. Read the full feature roadmap.

Ideate

Phase Deliverables:

  • Brainstorming
  • Remote Umoderated Open Card Sorting
  • Findings of Remote Umoderated Open Card Sorting
  • Remote Umoderated Close Card Sorting
  • Findings of Remote Umoderated Close Card Sorting
  • Prioritization Plotting
  • Sitemap
  • Medium Fidelity Prototype

Brainstorming

We set 60 minutes and as a team, we made a brainstorming. We already had a clear understanding of what problem that we want to ideate solutions for. No one on the team was negative about any kind of idea and we focused on quantity instead of qualitative ideas. We said “and” rather than discouraged with “but” – to get ideas closer to the problem. This method helped us to be fearless within certain constraints.

The brainstorming

Remote Unmoderated Open Card Sorting

I conducted an open card sorting. The goals were to saw in action how people perceived the information on the website. On the other hand, I got some inspiration on the website users expected certain content to be fount. Also, it helped me to identify and find out if there are different groups of people who understand the content of the website differently and would look for the same content in different places.

The open card sorting method
Conducted the remote unmoderated open card sorting

Findings of Remote Unmoderated Open Card Sorting

I asked a group of 15 to organize 50 cards of brand names into categories that seemed the most logical to them. They labeled each category in a way that they felt accurately described the content. There was not any kind of competition, between the categories, and all the users labeled the categories as I personally expected. All the cards are named the same by all respondents and this is clear evidence that on the website, that the information is placed under the same category. Read the spreadsheets of open card sorting.

Remote Unmoderated Close Card Sorting

Based on the results of the open card sorting, I conducted a close card sorting. I decided to conduct it, to test if the categories labels make sense to the people, and on the other hand which items they sort into which categories. Overall, users were able to speed up the close card sorting, more than the method of open card sorting.

The close card sorting
The close card sorting

Findings of Remote Unmoderated Close Card Sorting

I synthesized 2 primary categories and in addition, I include the option of “No idea”. I conducted a group of 15 different users who had to sort the items into these predetermined categories. Some participants were not sure to put the cards of “batteries” and “luxury” and they preferred to put in “industry” instead of “tags”. This helped me to clarify whether those their total categories were logical to the majority of users before I began to move forward with the process. The users didn’t spend so much time finishing the card sorting. Read the spreadsheets of close card sorting.

Prioritization Plotting

This method helped me to focus on features most likely to be valuable to the customers versus the effort actually taken to deliver those features. I plot a list of the possible features onto a graph and on the other hand to narrow down what was exactly crucial for delivering the MVP.

  • Big bets, aka “do it next”: Product features or tasks that are valuable but difficult to implement.
  • Quick wins, or “do it now”: Product features or tasks that are valuable and easy to implement.
  • Time sinks, aka “don’t do it”: Product features or tasks that aren’t worth investing in right now.
  • Maybes or “do if or when there’s time”: Low-value tasks that can be returned to later on.
Prioritization Plotting

The detailed sitemap helped me to delve into the ideation process and outline the site hierarchy.

Sitemap

The Site Map

Prototype

Once the structure of the website was defined, I started visualizing what the website’s user interface could look like. The Medium Fidelity below represents limited functionality but clickable areas that present navigation possibilities and the interactions of the website. The prototype helped me to test and compared ideas and collaborated with other teammates to create solutions that really solved user needs and gave me the ability to get answers to broad questions and for compared different alternative solutions. Navigate through the first approach

The main pages of the project

Testing

Phase Deliverables:

  • Remote Unmoderated Usability Testing
  • Findings
  • Remote Moderated Usability Testing

My goal was to access the users’ performance, mental state and to understand whether they can use the website and benefit from it. Also, to observe the given tasks, to identify problems and their severity.

Remote Unmoderated Usability Testing

I conduct an early-stage prototype with remote unmoderated usability testing. The first sprint of 5 users, age 18-55 (men and women).

Define study goals

  • Test the multi-level navigation through user choices.
  • How long it takes for the people to navigate through the timeline of each year.
  • Identify, how long it takes to explore a brand using the search option.
  • Collect feedback from them on how easily they find the search option and what exactly they like most/least.

Some tasks

  • How would you find brands that are related to the industry of technology, while also you want them to be in red color?
  • How would you get learn the history of the most important key points of each year?
  • You have joined a team of designers and your last project was to design a logo for the brand “MatCoco”. How you would upload the logo of your brand?

Findings

The closed questions following some important tasks helped me to measure how the testers were feeling about the usability of what task. The objective metrics helped me to measure without relying on subjective interpretation.

Objective metrics
All the testers completed the tasks (success rate), but on the other hand, some other factors defined the results.
I found that the testers took a lot of time to complete some important tasks. As an instance, the multiple selected items in the navigation menu, navigate through the timeline, and “submit” a new logo.

The testers make incorrect actions when they trying to complete some tasks. As an instance to navigate through the timeline that is used to display a list of history key points in chronological order, change the initial choices of the navigation menu.

the metrics of unmoderated usability testing
Screenshots in remote unmoderated usability testing

The moderated testing helped me to observe any pain points and moments of frustration and it gave an overall approach of qualitative feedback.

Usability Testing: Round 2

Remote Moderated Usability Testing

I decided to move on to the process and take care of moderated usability testing with a high-fidelity prototype. In the first sprint, I found 5 users (men and women), and I focused on the target group of graphic designers, creative agencies, in 1 hour in a video call.
Thinking aloud. The metrics relied on the subjective interpretation of the test participant. During the test, I felt out the stress responses and when the user appears confused or expresses confusion.

The first approach of the moderated usability testing

Ideate

Phase Deliverables:

  • Findings
  • Remote Moderated Usability Testing

Findings

All of the participants were also willing to recommend the website to a friend. Also, they believe that the product can provide value and be helpful to graphic designers. Nevertheless, some issues came to light. I created an affinity map (see examples below) and a detailed spreadsheet to gather my observations and evaluate my findings. 

The findings of the first participant
The findings of the fifth participant

Using Jakob Nielsen’s four-step rating scale, I categorized and ranked the severity of errors that showed up. Also, I identified the top 5 errors to be addressed in the next iteration and accordingly the less important ones for the next iteration rounds.

Top 5 errors

  1. The selected item in the dropdown filter navigation menu, needs to have more empathy.
  2. The reset option should looks like a call to action.
  3. Participants get confused with the timeline. It didn’t look much like a timeline for them to understand what exactly it was.
  4. The call to action of brand, needs to be explored as an action to submit the brand.
  5. The social share buttons, needs to stand out and point out.

Testing

Remote Moderated Usability Testing : Round 3

Phase Deliverables:

  • Remote Moderated Usability Testing
  • Overall Feedback

The second split participated 5 users, they were asked the exact same questions and tasks. The overall experience was clearly better than the first approach.

  • They found easily and more user-friendly navigation through the timeline.
  • The submission of the brand was more visible.
  • The multiple selected options were more visible in the navigation menu.

Feedback from the questions asked after the test :

  • The overall experience of the website was usable.
  • The purpose of the website was obvious for them.
The second approach of the moderated usability testing

Before

The first impression of timeline

After

The timeline after the first split of usability testing

Design System

The design system helped me to have a more structured and guided way to build overall digital experiences within the brand framework.

the design system
The design system

Learnings

My main goal is to create products that people love to use. It’s a challenge for me to get involved in business and user needs. This case study provided some important lessons for me regarding experience strategy, conduct in design, information architecture, and user research.

Working through these various stages was rewarding and challenging. I learned how to organize and strategize concepts while at the same time identifying problems and find usable solutions. I learned the power of working iteratively, testing, and more testing in order to make sure the needs of the user were met. I completely felt this, when I put the user’s voice into the design. I watched them interacting with the website and giving me real-time feedback (think aloud) and recommendations on how I might make it better.

At this project, I worked closely with the Product Owner and the design team. We – as a team – had done our best to implement this idea closely to business and user needs. I believe that it’s very important for every organization to have a team spirit, this will give you the ability to work effectively and it was my pleasure to had this been done.