THE COLOUR PROJECT [passion project]

Role 

  • Scrum Master [to myself]  

  • User Researcher

  • User Experience Designer

Problem 

Available colour picking apps frustrate me and, apparently other users. I use them frequently for my digital pictures. 

Tools ​[so far]

  • GSuite

  • Figma

  • Adobe XD

Objectives

  1. Research and design a colour picking mobile application to address shortcomings of similar apps

  2. Present running progress of the design process mimicking the Atomic Habits approach [see Profile for more info] 

Overview

For this project, I wanted to do something slightly different. This page will be updated as I make progress toward its completion in, ideally, July 2020. The outcome will be a colour picker app prototype that addresses shortcomings of similar apps.

The inspiration came from Brad Frost, a front-end developer by trade, who likens designing interfaces to chemistry. In Atomic Design, he provides structures for consistent and scalable product design.

 

This book is changed the way I see design. It shifted my understanding of UX from designing pages to designing systems. 

Like him, I have certainly benefited from the generous design community, founded on sharing and building on ideas. He released the book before publishing it, which is when I first started reading it. The idea was that he would create a "living, breathing, incomplete book".

The way Frost released the book before completion inspired "The Colour Project". I began the project at the end of May 2020. I have been updating this page with completed phases in the design process, and I am learning tonnes.

 

Here is the book!

 

NOW READING

NOW READING

 

Task Tracking

Here is an overview of the task list. It shows key to-do items framed by the design process. 

The following table outlines the competitor research conducted for companies or startups that have developed a colour picker app. It unpicks everything from the app itself to the company’s perceived business model. 

 

The aim is to uncover what is missing in the market and what can be done to ameliorate user pain points. This stage in the design process can be used to spot gaps in innovation. The colour picker app will have a competitive advantage through capitalizing on the competitor’s weaknesses. 

 

Competitor Analysis

User Personas

 

Using Adobe XD, I outlined three prospective user types based on the research. During the competitor analysis phase, I scoured online reviews of existing apps to develop these different user personas. Adding names and faces to the target market helps to design features for individuals rather than thinking of a large group. Each user persona has different intentions for the app. 

 

Click through the gallery below to meet the target market for the colour picker app: 

User Journeys

I made User Journeys that are based on each of the above User Personas. Each journey focuses on a different angle of the colour picker app: common user, first-time user and occasional user. This phase breathes life into the personas and gives the app a story to build on. It reveals potential roadblocks with the product, for instance: "this user is uncomfortable with technology, how will what happens if they don't know how to start the tutorial?ˆ" or "this user wants functionality but this feature is common among other apps, how would they navigate it?

The following journeys made for Jenna, Marilyn and Adam reflect their character and approach to products based on their personas:

 

Jenna is a common user of the colour picker app. As she is struggling with a logo design, she turns to nature for inspiration. Since Jenna has used the app before, she knows she can rely on it and have a generally good experience. She knows she will export the colour as a HEX value so she can easily implement it into her designs. 

 

Prospective roadblocks for Jenna could be technical ones: the colour accuracy not being as effective in poor lighting conditions, her design software not accepting HEX values, needing quick use through a camera if the setting is fleeting (this could call for a camera plugin feature for quick use).

Marilyn is a newbie when it comes to using technology to help with her art. She is trying to slowly introduce it into her process; the colour picker app is her first step. The colour picker tutorial makes her feel both confident in her abilities and a sense of solidarity with other users who need it. 

Potential drawbacks for Marilyn comes down to how easy the app is to use. It is imperative that the app is simple and provides help where needed.

Although Adam prefers doing more technical work, he knows working with design is a "necessary evil". He doesn't like it because he doesn't think he is good at it. Growing frustrated with the colour picker app he is using, he searches for another. After finding this colour picker app has the exact features he needs, he decides to trial it out. Adam finds the app clean and easy to use.

 

Adam prefers to work fast so this app needs to maintain a functional and simplistic interface. It should maintain a large amount of options for exporting in different formats to many places. 

User Requirements

Information gained from the competitor analysis, user personas and journeys shaped the following user requirements for the colour picker app. Significant fallbacks that users found on similar apps largely informed the key features to focus on this app. This is where both 'must-have' and 'nice-to-have' features are established. It is an invaluable step in the design process as it essentially forms the basis of the product's key features.

 

Some of these points will inform the look and feel of the app but, on the whole, they mostly outline the app's features.

Information Architecture

Once key user requirements have been established, it is time to get the sticky notes, wall space and pens ready! This step helps triage the most important user features and establish a rough flow hierarchy. 

 

First, I set some basic goals that accounted for the key stakeholders: the 'company' and the end user of the product.

Company/app:

  • get 'right' what other colour picker apps are getting 'wrong'

  • help users easily extract colour values

End user:

  • use gallery or camera to extract colour values easily

  • save these values in multiple formats (e.g. HEX, RGB, CMYK)

  • options for exporting (e.g. copy to clipboard, e-mail, Slack) 

I wrote out each of the features on some sticky notes. Being able to rearrange freely and not have static content helped form a clearer and more well-rounded picture of what the app would look like. Each of the features were fleshed out to ensure no ambiguity in placement. For instance, the optional tutorial would be placed higher in the list compared to saving a colour.  

This drafting phase directly informs the structure of the Site Map, which is slightly less static. This stage generally has a lot of input from key stakeholders. It would have made a world of difference to be able to collaborate on placement of features or have discussions about potential fallbacks with a team.

Using Figma, I outlined every known app feature, from FAQs to saving colour palettes. This information hierarchy reveals a high-level view of the app's flow.

 

Site Map

The colour picker app's main features will be presented on a bottom navigation bar. It can be accessed once the user has either completed or rejected the tutorial. The option to acquire colour values through either the camera or gallery feature caters to the different user types. Once saved, there is no requirement to assign the colour to a palette. This flexibility allows the user to quickly share their colours easily. This document is subject to change as, in the upcoming testing phase, new user pathways may present themselves. 

Using the information from the previous step, a low fidelity page was created for each tool or feature. Prior to testing, a rough user flow was outlined. It was expected that this flow would adjust during testing depending on how the participants made sense of the prototype.

Paper Prototype

 

The tutorial frames address the user base that may require more assistance with understanding certain features. Once users open the app, the first step in the tutorial shows. They can then swipe through each item or, if they are confident, they can exit the tutorial. 

From the Home page, the user has a choice of three options: Camera, Gallery, and Saved Colours. Using the Camera, the user can extract the colour values from a live image (as shown above). The gallery option, shown below, allows the user to select an image that has been taken already and select the colour. By swiping through the bottom pane in either the Camera or the Gallery view, the user can change the colour value that they are accessing. The picker is dragged away from its 'base' in the bottom right corner when selecting a colour.

By selecting the hamburger menu in the top right of the frames, the user can access the About section, the FAQs and restart the Tutorial at any point in their experience.

Laying all the features out in a rough draft certainly reveals what is missing from the designs. Once these frames were 'completed', testing was necessary. As I did not have safe access to participants, due to a certain global pandemic, I was limited to a few options. For testing the paper prototypes, Emily, a tailor for Levis, was able to help out.

I asked Emily a few questions about her work and the relevance of this type of app in her field. She said that she sometimes uses colour picker apps when trying to get the right thread colours when doing embroidery work. Admittedly, she is not a frequent user and aligns closely with the user persona of Adam.

 

On the whole, she would want an app that is quick and easy to use that she does not have to think about. She liked that there were multiple values provided and questioned the point of the Gallery view. Emily felt that she would mostly use the Camera option as it was quicker and she would never be in a position to retroactively extract a colour value from a picture. 

Emily also added that having an option where you could select what type of user you were (i.e. artist, designer, seamstress) that would then link out to websites with matched colours in whatever form: watercolours, threads or even fabric. 

She definitely raised some great points that gave me a lot to think about in terms of features. There were no pain points when it came to the actual flow of the app which was a relief.

Wireframes

 

I digitized the paper prototype, while maintaining the original flow. I also input content that was lacking in the paper prototyping stage and polished the overall look and feel of the app. Linking each of the frames aided with getting a clearer picture of the user's journey.

Once this flow was completed, I was able to send it across to Emily for review and testing. She found the overall flow was clear but did have a few points of feedback. Namely, she thought the tutorial could be more detailed, rather than . Another point he raised was that, although ___, ____.    

 

Design System

I transitioned to Adobe XD because it is such a great software for making design systems. It allows you to easily group style guides and components that cascade down to each wireframe. Although Figma also has this function, I do find that XD has really honed in on the typical designer's workflow. 

 

Click here to view my design system, including the style guide and components. 

 

 Shrine’s color theme is monochromatic, using light and dark variations of the primary color Shrine Pink. Shrine’s primary color (Shrine Pink 100) fills the back layer, and the secondary color (Shrine Pink 50) fills the bottom sheet. The main content is on white, and the dark Shrine Pink 900 is used for typography and iconography. C

 

Interactive Prototype

 

This project is something that I had wanted to do for a while. Towards the end, I found that my motivation to complete it started dwindling. What pulled me through was the sheer enjoyment I get from designing systems. 

To me, the the most challenging aspect of the colour project was not being able to gain full access to prospective users for testing. Although I worked within the constraints and used a few people in my immediate network, I could have gained a lot more from having access to a larger group of participants.

Going forward, I would assign clearer deadlines to my Kanban board. This would have ensured that I completed the project back in July rather than two weeks later in August. I also could have sought reviews from online forums, such as design groups on Reddit or LinkedIn. Adaptability is paramount, especially now, and I think that I should have done more to facilitate better testing for a more well-rounded application.

Overall, I feel accomplished and am pleased with the result. There is always more to be done as the design process is iterative.

Reflection

MARY G. WILSON

  • LinkedIn
  • iconfinder_Circled_Medium_svg5_5279113
  • iconfinder_77-behance_104426

© 2021 Mary Wilson

All artworks by me.