Project Image

ABOUT THE PROJECT

Klarity was a self-initiated project. I got the idea from being frustrated with constantly switching between social network account apps on my phone along with wanting a way to group certain people’s updates into category feeds.

MY ROLE

I was responsible for the conception, user experience design, visual design, and initial development via Xcode.

The Challenge

What I wanted to do was create separate feeds with certain categories and certain people’s updates. For instance, if 20 of my friends post a lot about architecture, I want to create an architecture collection with them in it. If half of them post architecture related stuff on only their twitter accounts, I want to choose that account only for that collection. It works a bit like Lists on Twitter but a little more detailed.

Sketching It Out

I knew there were going to be a lot of complicated flows to this app and a lot of different states so exploring different ideas through sketching was absolutely essential. It was very challenging trying to come up with a flow for adding people’s accounts to a collection. Since the user essentially curates their own collections, there was no way around manually adding specific accounts so I had to optimize for the least possible resistance.

Searching within your connected contacts was also something that needed to be smooth since you probably already know who posts what type of content so that flow had to be extremely simple and responsive.

Sketch
Sketch
Sketch

Wireframes & Prototypes

After showing a bunch of sketches and paper prototypes to random people in coffee shops and friends, the next logical step was to get some wireframes and real interactive prototypes completed to really see how it would feel.

I used POP iPhone app to take pictures of my sketches and quickly put together a prototype. The feedback I received was pretty positive. I made some quick changes to the connecting accounts flow and it was finally time to jump to visuals.

Visual Design

After I had what I felt like was enough feedback from the prototypes, I began the design process. Since this was a self-initiated project I got to experiment with a lot of different styles and colors. I ultimately decided on the following. The top row is the primary app colors and the second row is the colors used for the different categories.

Color Palette

UI Library & Icons

Using the color palette, I created the logo and app icon assets along with a library of design elements I would use to tie everything together.

User Interface Library

Screens

I knew that leaving the curation of categories up to users, the interface and flow had to be extremely intuitive. I used as many default iOS controls as possible as to cut down on the cognitive overhead of learning new controls – This meant lots of standard table views and some that were slightly custom.

User Interface Screen
User Interface Screen

Results

I originally planned on doing all the development for Klarity but when I got into the project I ran into some problems. The major one being associating a single user (your contacts) to all of their different accounts as one single entity. The level of complexity to match up usernames, email addresses, etc… for your friends is pretty tricky so the development of Klarity has been put on hold until I can make some time to figure out an elegant solution.