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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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