Overview

PocketGeek is an app that recommends you new digital and non-digital content based on your preferences. It is a mobile app design developed from ideation to prototyping, below I highlight the various steps taken to get it to its current point in development.

My Role

I was responsible for the concept, branding, user experience design (affinity diagraming, user-flow, paper protoryping, user testing, wireframing) and user interface design (high fidelity mockups, graphic design).

Tools Used

Pen & Paper, Sticky Notes, Adobe Photoshop, InvisionApp, Pixate.

Process

Affinity Diagramming

I start my process with affinity diagramming, organizing my tasks and time to ensure I stay focused throughout my process. I also break into defining my main pillars and functionality which assists me in defining a high level flow for the app.

Wireframing & User Testing

After I locked down the flow for the app I started drawing out the wireframes to ensure I had all of the basic functionalities and user inputs accounted for and so I can visualize the flow. I transferred all of my wireframes onto sticky notes so I could easily take them around for user testing and also so I could quickly iterate and make changes to my flow.

I went through 40-50 rounds of user testing before honing in on a finalized app flow and before moving into the visual design and prototyping for the app, where I still continued to test my flow and interactions.

Brand & Style

When it came to the brand and style for the app I wanted to go for something simplistic and polished, using a flat design that took cues from other applications that are image and media heavy.

For the logo I started with the serif font Playfair Display and the sans-serif font Raleway, as I felt both encompassed the personality of the app. After doing some tests I felt the serif elicited memories of print and old media, such as newspaper headings, and I wanted something more modern to match the media of this age. With that in mind I took the sans-serif font Raleway further, as it gave off a very modern and stylistic look that would match the visual cues of the media that would be displayed in the app. I also tried working with some visual design elements that played off the words 'pocket' and 'geek', as well pulled from popular media based logos but I soon found that these visual elements were pulling away from the simplistic look I was aiming for, so instead I continued to iterate on the type-based logo, playing with weight, capitalization and colour to pull together a polished and iconic look.

I then pulled together a style tile to show a sample of colours, typography, iconography, my logo and a screen made up in my defined style. I wanted a flat, non-textured design that would not pull from the imagery that would be shown throughout the application, using complimentary, eye catching colours that would guide the user seamlessly through the experience.

Final Touches

I then created mock ups of the user tested wireframes using the decided upon style, creating each screen to be as close to the final product as possible to further testing and to have a launching point for developers to start implementing the design.