Whiteboard

 

Whiteboard is an Android camera app created for a software firm. The app allows consultants to name and attach metadata relating to a project, or a client, shortly after taking a picture.

Banner.jpg
 

The Project

ROLE:
UI/UX Designer

RESPONSIBILITIES:
Research
User flows
Wireframing
Visual Design
User Interface Design
User Experience Design

The Whiteboard App is used to capture and categorize the artifacts of collaboration — making it easier to keep track of the progress of a project and refer back to images with ease.

 

Goals

IMG_1091.jpg

As an in-house app, it was very important to identify and propose a look and feel that would be on-brand. Secondarily, the user experience needed to be fun and go beyond what the traditional phone apps provide for our specific user scenarios.

As a result, we determined the MVP required the ability to name each photo taken but ultimately will allow users to add notes, add a date (and post-date) and select a project for easy sorting and retrieval.

 

Challenges

  • Working remotely with the developers and product manager

  • The absence of a clear product owner made for a slow start

  • Constraints of mobile design and becoming familiar with the Android UI

  • The multitude of screen size ratios across Android devices

 

Sketching

The flow follows the traditional camera app up to the second action where the user is asked to validate and file the image or reject it.

For the scalability of the application, it was apparent that we would need a feature for entering metadata to help with sorting and filing.

 

Wireframing

These wireframes were formed by working collaboratively with the developers to understand what was most feasible for our Android MVP. The goal was to present something familiar to the users, and by combining a camera and a library inside the same app give them complete control of the naming and sorting of images.

 

Visual Design

After exploring two different brand experience expressions, this direction was chosen for the visual design. This direction sought to capture the consultancy’s dedication to craftsmanship combined with its warm and personable approach.

 
A4-4.jpg
 
 

Final UI

Based on user interviews, we knew the app had to be simple and attractive to convince them to use it over their regular camera app. Buttons became round and easy to find ergonomically, boxes also got rounded corners. An effort was made to bring the interface to life, make it intuitive, responsive, and playfully human.

 

Final Thoughts

The extended naming feature, which allows the user to attribute a project, select any date if necessary and make notes on top of simply naming the picture, will be a fast follow on to the MVP.

 
fullnaming.gif
 

To bring the interface to life a bit of functional animation was used to help connect users to the action by way of feedback or navigational transitions to hopefully make it fun to use.

These Flinto interaction prototypes were particularly useful in communicating the intended behavior to the dev team.

 
ShutterAnimation.gif