flatuicolorpicker

Overview

The flatuicolorpicker is a free web app and provides some beautiful colors for flat design. In this case study, I tell you the story behind this project of how I implemented and how users help to completely understand their needs.

Role

User Survey, Persona Development, Information Architecture, Sketching, Wireframing, UI, Prototyping, Development

Tools

Pen & paper, Balsamiq Mockup, Adobe XD, Visual Studio Code

The challenge

The challenge was to create a website with color from flat design. The visitor can select, copy-paste the color code and use it in the next design project.

Hight Level Goals

1. Create the Information Architecture.
2. Understanding the user needs using a user survey.
3. Implement the project with the latest coding standards.

flatuicolorpicker

This is the story of flatuicolorpicker UX/UI Case Study. This explores the way of how I created this web project. Basically, this web app is just a simple idea which comes as a result of my personal inspiration. This project created only in just a few days and seems like a color picker than a simple tool. This project is live and active for several years now.

Discovery

In the first place, I wanted to know the user’s needs, what exactly they inspire them, what type of tools they used and on the other hand, I wanted to learn if they follow any design trends.

Meet Christine

I used the findings to use a user persona. Christine helped me to understand how exactly I can help her and the users, to achieved their goals using the features of this web app.

Meet Christine Dolley, is a 28 years old UI Designer based in Paris, France. She enjoys finding some tools that will help her to find her inspiration for her creative work.

Meet Christine. The user persona
Christine User Persona

Define

Next, I mapped out the context and the features and I organized the website with basic colors, like red, pink, purple, blue, green, yellow, orange, gray, and finally the new colors. The IA was very simple.

Information Architecture

The Infornation Architecture of first version
The manin Information Architecture

Ideation

Using the Balsamiq mockup, I created mid-fidelity wireframes. The wireframe focused on the exact each type of color. Every type of color has the same layout.

The wireframes for the page with red color
The wireframes of page for red color.

Prototype

Bellow is the main prototype of the page with red color. The style is very minimal and also I applied the “Montserrat” for the main font.

The prototype of the page with red color
The prototype of page

Validate

In this case, I preferred to see in action how I can implement more the website, so I have done that when the website was already live. I made deep research via google analytics and on the other hand, I conducted user surveys. Both gave the impression that the website really needed to include some other features and make it closer to the user needs.

I summarize bellow the results :

  • To begin with, the users could not copy the value of each color code.
  • Many of them, they preferred some other color formats like RGBA, HSL, CMYK, HSLA.
  • It was difficult for many for them to see which color was new.
  • Many of them referred that it was difficult to read the color name.
  • Some of them mentioned that it was difficult to read as well as that they cannot copy the value of the color code.

Define

After identifying this major feedback, I mapped out again the new IA to show the hierarchy of the major features. The main key is that every color right now is a category and each of them has the color code. With this intention, every new color has its own label.

The new information architecture
The new Information Architecture

Ideation

With this in mind, I created the mid-fidelity wireframe which applied the same design to all the pages. I included all the main features of the previous phase.

The new wireframes of flatuicolorpicker
The new wireframes of flatuicolorpicker

UI

After working with the main changes first into the IA and then into the wireframes, it was time to process with the visual design. The new layout, as well as the previous one, does not include any other design patterns like buttons, forms, tabs. In detail, the new design uses the “Muli” as a typeface. That is to say that, I keep the layout simple and minimal.

The user interface design after the changes
The new page layout

Conclusion

For the purpose of how effective was the flatuicolorpicker UX/UI case study, a few months later I saw in action that the Google metrics changed with positive expectations.

  • The number of unique users that opened the pages of the site increased almost twice a much.
  • The new sessions made by new users increased by 9.7%.
  • Another key point was that the total organic search increased by 12% and the total direct, by 16%.
  • The average time on page increased from 22 seconds to 1min and 15 seconds.

Next steps

Basically there are plans to improve the usability and on the other hand to include some other features. Gradually I will cover the user’s feedback with user testing and/or user surveys with the sole purpose of making the project better and on the other hand to improve more my UX skills and learn more. So, the flatuicolorpicker UX/UI Case Study will be updated as soon as possible.

The project is available on producthunt

flatuicolorpicker - Perfect colors for flat designs | Product Hunt Embed