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.
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.
A drop in confidence
Inspiration and opinions
Visualization problem
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.
Feature
Opportunity
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
By answering curated questions about your space, reveal appropriate colour choices for each room.
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
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
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
Learning through people you know
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
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.
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.
Get direct access to timed renovation tasks, video tutorial, and customizable shopping lists.
Simple renovation tasks are intimidating. Information lives on multiple sources from videos, store catalogs, and paint visualizers in order to decide:
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.
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.
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.
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.
• Rocket Contractor
• Project Planner
• Be Your Own Contractor
• DIY
• Home Improvement
• Checklist
• 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
• 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