_

Diary:Chroma | Designer & Engineer

_
Client:
Personal Project 
_
Role:
Designer & Engineer

_
Date & Timeline:
2020, 3 months 

_
Skills:
Concept Development
User Flow
Storyboard
Wireframes 
Figma Prototype
User Testing
Engineering
_
Tools:
Figma
Illustrator
SwiftUI

Project overview

I designed and developed an app that allows users to easily collect and store colors that they find in the world around them. I created an alpha version of the app, conducted user testing and built out finalized designs and a click-through prototype for the beta version.

Problem statement

Many people working in creative industries find inspiration in the world around them, one of the many forms of inspiration is colors. However, there is not a simple solution for collecting and storing these interesting colors. The current option is to take a photo then use a color picker on a computer to find the exact HEX code. This is a clunky flow that is ripe for a solution. I decided to build an app for this this use case.

Project goals

- Users can easily locate, refine and save colors 

- Users can browse previously saved colors, find colors’ HEX codes and see what date they were saved on

Design process:

1. Identifying an audience
2. Creating a storyboard and user flow diagram
3. Creating low fidelity wireframes
4. Developing the alpha version
5. Conducting alpha user testing
6. Finalizing designs and creating a click-through prototype

Identifying an audience

 
The audience I had in mind while designing this app were users who work in creative industries like designers and artists. This audience collects inspiration from the world around them and needs to be able to access that information quickly and without hassle.

Creating a storyboard and user flow diagram

I began by thinking through how I would use a color picker app and came up with a storyboard and user flow. This was my jumping off point in thinking about functionality. 

 

Creating low fidelity wireframes

With the storyboard and user flow diagrams finished, I created low fidelity wireframes which allowed me to begin developing the app in SwiftUI.

Developing the alpha version 

I used swiftUI to develop the alpha version of Diary:Chroma. The alpha app’s functionality included a home screen, a camera and color selector screen, a library of saved colors and color data. The saved colors were added to a database so that information was saved between sessions.

Conducting alpha user testing 

I worked on Diary:Chroma at beginning of the covid-19 pandemic when everyone was locked down. Therefore, I was not able to user test with as many people as I would have liked. However, I was able to conduct user testing with a couple of people and I received helpful feedback. During healthier times, I would have liked to conduct user testing with a variety of people in different landscapes who worked in different industries.

Finalizing designs and creating a click-through prototype

I took user feedback that enhanced or clarified my design purpose without adding additional features which could be included in further iterations. For example, I thought including some kind of visual feedback that indicated to the user that their color has been saved was a great insight and I updated my designs to reflect that! I built out the finalized designs in Figma and made them into a click-through prototype.

Results

The result of this project is a completed alpha app with finalized designs and functionality ready to be developed into a beta app.

Next Steps

If I had more time to work on this project I would like to:

1. User test the click-through prototype on a larger population with users from a variety of creative industries.
2. Design an onboarding process
3. Create branding and messaging for app