abcofcolors

There are no wrong colors!

Introduction

The goal of the project was to  design an innovative mobile app for the iOS platform based on customer and market research, supplmeneted by our use of UX frameworks such as User-Centered Design and the Design Thinking Process. The value proposition of the app is saving hours of work from color palette protyping by allowing users to use pre-made templates and palettes based on colors psycholgoy.

The project was split into several key tasks:

  • Conducted over 20 focus interviews
  • Created an Empathy Map
  • Designed the app architecture
  • Drew Lo-Fi wireframes based on research insights
  • Polished our ideas into Hi-Fi screens
  • Delivered a fully-interactive Figma demo

Survey

The target market of the app are creatives or decision makers who often deal with color palette prototyping or application. These can be: Graphic Designers, Web Developers, 3D Artists, Game Developers, Salespeople, Interior Designers, Fashion Designers, Packaging Designers, Industrial Designers and Managers.

Interviews

We conducted 22 focus interviews (30-45 min) with potential users from different customer segments in order to better understand the individual beliefs and assumptions regarding the app, or what is called a phenomenological research approach.

Research Goal 1

What makes a new app simple to use for the first time?

Research Goal 2

Are the expected functionalities seen as useful? Is there something critically missing?

Research Goal 3

Approximately how much time can users save from color prototyping using the app?

Research Goal 4

How willing are potential user to pay for the features introduced by the app?

Survey Results

Interview results were transferred into a combined code table where each questions was translated inot specific trait, namely: Simplicity, Functionality, Usefulness and Value to represent the toichpoints between participants for each question.

Simplicity

The app must have a Clean UI, Familiar Navigation, On-Hand Tutorials and Clear Labels.

Functionality

Needs to have Numerous Templates, Editable Palettes, PDF Export and the ability to Save Projects

Usefulness

Pre-made color prototyping templates in the app could save a typical designer more than 7 hours (or 90%+)

Value

Free base version is preferred. In-App purchases as seen as ok, if they provide more value, e.g. more templates

Empathy Map

For a quick overview of how a target user might approach the app's value proposition we also created an empathy map to help us better understand what they Say, Feel, Do and Think on the idea and concept.

Pains and Gains

We concluded the reearch phase of the project with a summary of the app's Customer Pains, what creates doubt in the eyes of the user, and Customer Gains, or how it adds value to their daily professional needs.

Information Architecture

We organized the obtained research data into a detailed IA map of the app's structure that enables the user to navigate between pages in the easiest possible way.

Wireframes

All identified user needs and app features were then mocked up in a series of low-fidelity wireframes to help us find the most optimal poistion for each of the elements.

Navigation

The welcome screen of the app. Saved projects and suggested start points all there to ease the learning curve for any user

The familiar nav bar at the bottom gives direct access to whichever page of the app the user currently needs, at any time

Color Psychology

Overviews the entire colors spectrum split between three categories, Warm, Cold and Achromatic for easier orientation

Color

Horizntally scrollable cards, divided between three categories: Soft, Vivid and Dark, give the user a quick and organized access into the emotional palettes their projects requires

Palette

Each pre-made emotional card in the app features the visualized color palette involved in the scenario and a thin horizontall bar that allows to quickly switch between the emotions of the chosen main color

Harmony & Disharmony

The three tabs on top of the visuals' screen allow each user to filter what set of palettes are currently loaded onto the screen. All, Harmony (positive) or Disharmony (negative)

Edit

The Editor is the screen where each palette, either imported or custom-made, can be tested out in different scenarios

Templates

Each palette in the Editor can be tested on a varierty of pre-made templates, split into unique categories. Each category can be accessed via a horizontal scroll below the visual, where large, clean, icons guide the user towards the category most useful for their case

Contrast Checker

To help professionals be ADA and WCAG compliant, an integrated color checker provides detailed conditions that need to be met to pass

Camera

Simple and direct, the camera overlay allows users to either extract a palette from a picture taken on the moment or  import one from their gallery for use in the Editor

Search

Unsure where to start? The Search page helps users find the emotion they want to bring into their work and the app will suggest the most relevant palettes available in the form of a scrollable list