CAPTURE

1 week. Visual Design for an App
The Situation
 My client would like an app that he could use to follow a hobby whilst making a small profit
The Brief
Design an app that addresses a common problem in your user’s life
The Outcome
Created the visual mock-ups for the photo editing flow
Skills I used for this project
To view the high fidelity clickable prototype, click here
Background

From 1:1 interviews, I found that my client (Walter) is talented at photo-editing, so much so that his friends regularly send him images to improve. He enjoys being entertained whilst travelling and often uses social media to pass the time.

For my first project, I endeavoured to design an app that would meet his three key requirements: it must be entertaining; something which utilises his photo-editing hobby; and can profit him in some way. I produced a clickable paper prototype on Pop-app to display the functioning of the app, which I named Waltipics. 

This project was to increase the visual design of the photo editing user flow. There was no information architecture involved in this stage.
Design Goals
Editor:
Creating a photo editing app to use in free time

Limiting edit time to 15 minutes to complete image

Allowing the editor to Reject/ Accept jobs

Charge small fee for each job

Star rating for expertise

Privacy of the client is key

Use favourite editing tools such as Photoshop and face-tune
Client:
Have photos edited (mainly for social media) quickly, easily and cheaply.

Design Development

This app has two main uses: for the client (wanting the photos to be edited), and the person editing the photos from the requests sent.

My aim therefore was to make a clean, simple to navigate and use app that is visually appealing.

Due to time limitations for development, I decided to focus on the editors user flow for accepting a job and editing the image.


Branding


I started with trying to understand what I wanted to brand to convey, and how I wanted people would see it.

Using well established branding exercises such as: ‘If the app was a celebrity, who would it be…’ and ‘if the app was a brand, what would it be …’ .

I also used an adjective list and picked five words that would begin to display what image and feeling the app should convey (seen on the left).

Mood Board

I designed a mood board for how I saw the brand of Waltipics (which I renamed as 'Capture'). 

The images at the top of the board displays what users should think of when using capture - social, exciting and young. The lower section of the board shows what the visual design should look like - simple, clean and confident. 

Competitor Analysis

I investigated the visual designs of other apps that focus on image editing or image sharing such as Instagram and VSCO.

These apps use very simple designs to avoid detracting from the photograph.

Style Tile

From user testing feedback, I created a style tile that would be used in the app.

I chose these colours as they were light and the blue suggests trust in the brand to the user. 

Re-iteration

After creating the mood board, a style tile and conducting competitor analysis, I radically changed the interface that I had designed and initially wireframed.

A/B testing with uses showed that as this is a photo app and images should have the most real-estate.

It was also suggested that the amount of information visible should be reduced to make it as simple as possible.

Re-iteration

Above: These three images show how the editor's home screen developed.

On the left image you can see that stats were visible.

User testing showed that the editors did not need to see the statistics when first landing on the app, they wanted to start choosing images to edit straight away.

The central screen was used to test if users preferred basic information on the photo or underneath. 

Users wanted it underneath, but they liked the short summary of the task and the quote. 

Users also suggested that the name for Capture should be visible as it is currently an unknown brand and it could look like a feature for taking a photograph. 

Reducing Complexity - Editing pages

Feedback after user testing showed that the navigation was quite complex for the editing pages of the app. I therefore created three solutions for this and tested it with the users.

The solution on the right was the one I used in the end as users believed that this was the most informative and least distracting.

Next Steps

Create a ‘turn screen to preview’ option when editing

Create client side - this will add connections for users and make the whole app much clearer

Research further who the potential users would be, create personas and test with a larger amount of people to make sure that the interface is as understandable and usable as possible

Request chat feature



To view the high fidelity prototype of asking an expert please click here

Back to the Top

More Projects

Lightful

A website to drive and maintain interest in Lightful's new platform for non-profits

READ MORE

ArtRunners

Cloud based web platform offering swift contracting solutions for art logistics services worldwide

READ MORE

SOCIAL