LH Design | Photo App
50951
page-template-default,page,page-id-50951,eltd-core-1.0.3,ajax_fade,page_not_loaded,,borderland-child-child-ver-,borderland-ver-1.8.1, vertical_menu_with_scroll,smooth_scroll,paspartu_enabled,paspartu_on_top_fixed,paspartu_on_bottom_fixed,wpb-js-composer js-comp-ver-5.1,vc_responsive

Photo App

Ideation

The initial goal of this mobile app was to organize photos into albums and have a one stop shop to order individual prints as well as photo albums to your doorstep. After identifying the three main goals, we were able to establish our target market and the issues we believe people face on a daily basis with their current photo mobile application.

ux research
ux design research
ux research discovery phase
Research

Both an online survey and in person interviews were conducted to validate or invalidate our initial assumptions about how the app would be used and whether individuals would find this app useful for them. A week was allocated to give users time to take the survey and collect results. After collecting all of the data, I was able to determine that there was a need for this app, but maybe only two of the three goals would be relevant to the majority of individuals.

I needed to find our MVP to get things moving.

I decided to send out a follow up survey with a few more in person interviews to dig deeper into the three different uses we had originally established for the app. After analyzing the second round of data we decided to move forward with only two of the most valuable goals.

MVP: Print Individual Photos + Print Photo Albums with photos from your phone.

Research Document LH Designs
Research Document LH Designs
Personas

This mobile app appealed to three very different groups of individuals. After identifying these three parties, I was able to pull in a lot of useful data from the surveys which made it easier to move forward with creating the personas.

Card Sort / Sitemap

Next up was identifying the sitemap for the app. With very little guidance from me, a test group of users laid out the pages of the app through a card sorting activity. This was a great activity because my initial design had 4 main navigational tabs with sub-nav’s underneath and over 75% of the users created a similar structure using only 3 main navigational tabs.

The majority wins – 3 tabs it was!

ux design card sort lh designs
sitemap ux design
User Flows

A user flow was created for each persona that was created for this design project. After identifying the entry points for each flow, the journey started. This round had a handful of iterations, each new go around came with a lot of red markings and X’s. Unnecessary steps were eliminated and some processes were combined to make the start to finish migration as simplified as possible.

user flow mobile app
user flow mobile applications
user flows mobile app
Wireframe Sketches

The wireframe sketching was the start of some of the more creative, visual aspects of the project – which is always fun. Here, we were able to imagine how we wanted things laid out, the hierarchy of material on each page, where visual and written content would be placed and make sure it all fit together strategically. This was the final round of sketches that were created.

ux design sketches laura hamrick
Wireframes

High fidelity wireframes were created using Balsamiq – no more faint mistakes and eraser marks here!

ux design wireframe
Prototype

In Sketch, a low fidelity mock up was created for the first prototype. A little more direction was added here and a few test users were able to walk through this prototype briefly to ensure things made sense and the flow felt right.

UI Style Guide

The style guide, designed in Sketch, that was created for this app took into consideration demographics from the personas as well as style requirements for both iOS and Android apps. The font family, size and colors are to remain consistent across both devices and the accent colors in the UI style guide are meant for CTA’s.

Prototype - Sketch

Look alive! Next, a high fidelity prototype of the mobile photo app was created for user testing purposes and to see what the final product will look like (exciting!). Using Sketch, I designed the app how I envisioned the visual and written content to work together while making sure every step along the way was aimed at user experience and understanding.

mobile app built in sketch
User Testing - InVision

Using InVision, links were sent out to users from a wide range of specifications from our target market. Men, women, young, old, computer savvy, book smart, the all received the link. I was also able to get a few cooperating individuals at Union Station to test the app and provide feedback. The in person users provided me with a lot more insight as to where there were questions or hesitations along the way. Even when they didn’t express it, it was beyond helpful to see when their finger was unsure of where to click next on each page. I left with some great findings and things to improve on for the final product.

user testing invision
user testing invision