Chroma

App design
Duration
July - January 2020
Tools
Sketch
Invision
Skills
UI Design
UX Research
UX Analysis
Wireframes
Prototyping

An application to help users choose the right colour for their space with confidence

Background

Chroma is a mobile app created as a personal passion project. When I had to paint a wall in my apartment, I realized it was an overwhelming task for many people. I had to pick a paint colour, envision the final results, find paint information, buy supplies from multiple sources, online and in stores. I began to wonder if there was an opportunity to simplify this process and create an elegant solution to help residents.

Problem

Challenge

To understand this problem and identify possible opportunities, I conducted a survey with the goal to gain insight on people’s process painting a wall, their motivations and attitudes to the task.

How can we help people paint their walls?

Survey Insights

A drop in confidence

Respondents are not 100% confident in their ability to choose a paint colour.

Inspiration and opinions

Respondents use a variety of methods to pick a paint colour.  The first preference are inspiration photos, and the second paint catalogue and recommendations.

Visualization problem

When asked about the hardest part when choosing a wall colour, most answered how it was difficult to confidently choose a colour in their space.

Colour selection is important. Using multiple methods for selection helps, but it’s still hard for users to feel confident about how the colour works in their space.

Current Practice for Testing Colours

Ease and Accessibility Wins

The majority of respondents use sample paint chips as their preferred method to test paint colours. Although painting a test area on a wall would be the best method for visualization, more respondents will use an online paint visualizer despite having a lower preference rating. 

Users prefer quick and easy methods to test paint colours in their space. However, are not satisfied with these methods as visualization of the end result is still a major issue.

User Persona

How can we help homeowners and renters choose and visualize the right paint colour for their space?

Feature

Opportunity

Solution

Overview

Project Organization

Save multiple projects and colour palettes

Colour Catalogue

Browse the catalogue and filter by category

Inspiration Photos

Browse through themed photos for ideas

Colour Quiz

Get matched with colour palette options

Test Colours in AR

Use a phone camera to visualize paint colours live

Share Results

Ask friends and family for opinions on colours

An application to help users choose the right colour for their space with confidence.

Colour Quiz

By answering curated questions about your space, reveal appropriate colour choices for each room.

Atmosphere

Connect with colour palettes that match the mood of the room

Complimentary Colours

Answer questions about the colours of your furniture, decor, and the next room.

Lighting Conditions

Day, night, natural or artificial lighting (blue or orange temperature), make sure the colour looks right

Paint Swatches and Inspiration

Paint Catalogues Explained

Filter colour choices by easy terms such as: accent, light, dark, bright, or muted colours

Inspiration Photos

Browse by room type and mood. Get colour swatches directly from photos you like

Augmented Reality

Live photos

Using your phone camera, instantly test colours in different areas. Try it day or night to get the right colour for your lighting conditions

Pinch to scale, select to mask

Get a better photo by adjusting the colour position and mask objects freehand

Design Process

Iterative Design Process

As a learning experience, the project went through multiple design iterations. Each time, feedback was sought out, carefully considered, and the project was redesigned. The portion in blue is the present project, where user research was key to the design process.

User findings influencing the features

The user survey gave me insights on some of the features I included in my last version of the app. I realized paint coverage calculations and execution tasks were not as important, and should not be main features.

Calculating wall paint coverage

Half the survey respondants calculate paint coverage in their head or with a calculator. Another significant portion tell wall dimensions to the store associate. While the a remainder do not calculate at all and will buy more if they run out. Only a small percentage will use an online paint calculator.

Learning through people you know

80% of respondants learn how to paint a wall from someone they know and may have the processed memorized to some degree.  Others learn from online videos which can be easily found on YouTube

UI Sketches

The design is inspired by mood boards and paint catalogues, where sample images are combined with colour swatches, organized in card format. The explore pages are inspired by popular image services such as Pinterest and Instagram, using grids to organize photos and tags to filter images.

Inspiration Page

Home Page

Previous Version

Reno App

Background

Design your project, test colours in real-time, and create task and shopping lists

Reno is a mobile app created as a personal passion project challenging the way renovations are designed and executed. The goal was to create a delightful and effective user experience for beginner renovators, gathering all necessary resources, calculations, and processes within one interface.
Features

Design and share your project

Enter your wall dimensions, openings, and patterns to get wall coverage in terms of square footage and paint buckets to bring to the store or show to a professional.

Test product colours in real-time

In Reno, the app uses Augmented Reality (AR) to visualize colours in real-time by projecting the test surface generated in the app, in the phone's camera view. The user can then choose to scale and edit which surfaces the colour will apply to, overall creating a better test photo.

Step-by-step tasks and shopping lists

Get direct access to timed renovation tasks, video tutorial, and customizable shopping lists.

Problem

Scattered Info

Simple renovation tasks are intimidating. Information lives on multiple sources from videos, store catalogs, and paint visualizers in order to decide:

  1. Design: What will it look like?
  2. Materials: What to buy?
  3. Execution: How to do it?
Solution

Design Tool

The solution is a design application which allows the user to input dimensions of surfaces and choose paint colours, with an option to test the colour in context using Augmented Reality (AR). The application notes product info and calculates coverage area as an easy reference when buying paint cans. Within the application, the user can also follow their execution process and note their shopping lists.

  1. Top Toolbar: Reversible Navigation, Export Option
  2. Input: Database of colours, calculation abilities
  3. Tab Bar: Switch projects, check tasks/shopping list

Information Architecture

When creating the app hierarchy I determined the design always comes first, before the estimation and execution actions are done. In addition, the design may change over time and the app should use a reversible navigation system. Furthermore, the tasks and lists feature of the app should be accessible at any time, irrelevant of the design, therefore, it was placed in the bottom tab bar. Lastly, as noted in the user flow, at any time the user should be able to export/share their progress for planning purposes.

Design Process

Journey Map

Analyzing the user flow of painting a wall, I identified three major steps for any renovation task: 1) Design, 2) Estimation, 3) Execution. The app will need to have a database of colours, calculation abilities and checklists. In addition, all the information the app provides will need to be shared whether it be a friend, landlord, professional painter, or store-clerk. This identified the output of the app and the prevalence of the export/share option in the top toolbar of the app.

UI Sketches

The design draws from my knowledge of designing spaces and ideas from 3-D modelling programs. Understanding this type of application is unique, I wanted to make the app familiar and easy-going to users as possible. This meant adding digestible instructions, using familiar icons, simple animations/transitions, and intuitive user interactions. To add to this, the icons and typography is purposely rounded to evoke approachability.

Focus on Fewer Features
Define Inputs & Outputs
Design Principles for Coding
User Feedback

V1 Feedback from UI Designer

V2 Feedback from EvolveUX Group

Branding
Potential
Great B&W Theme for Colour App
Design Solution in Context
First Impressions
• Rocket Contractor
• Project Planner
• Be Your Own Contractor
• DIY
• Home Improvement
• Checklist
Likes
• B&W theme allows focus on test colours
• Easy-going app navigation and design
• Simple animation is great, not too much
• Colour input is great
• Good dimension input with scroll > type
• Potential as app for a brand/store
Improvements
• Users want to see test colours in context
• Add a sense of scale
• Create view labels and the ability to switch
• Include YouTube link for step-by-step
• Create a pro version for contractors
• Allow user to choose quality of renovation