Visual Instructions

December 2017

VisiGuide is the prototype of an app that allows users to view instruction sequences either as photos or as vector graphics.

 

The purpose of this app is to convey a procedure clearly and succinctly to the user.  Easy to understand instructions available on a simple app increase access to information and allow users to learn and share new skills.  

process

The Challenge:

 

Use Adobe XD to create a prototype of a mobile app for Visiguides, a hypothetical company that provides visual instructions for a variety of procedures. 

This project has three parts:

1. The creation of a photo sequence detailing the procedure


2. The same sequence drawn in vector graphics software, and 


3. The prototype of an app that shows both instructions.

 

 Penny BATTERY

Visual Instructions

Visual Design

Fall 2017

I chose to make my instructions about the construction of a penny battery.  The penny battery uses pennies and nickels to create a small battery with enough voltage to power a small calculator. 

The penny battery is a fun and easy science experiment for science enthusiasts or curious students hoping to learn more about electricity.  The penny battery is an example of a voltaic pile, similar to the one used by Alexander Volta in the first battery in 1800. 

The first step of this project was to understand the process and to sketch a story board detailing the instructions that I would include in my process.  The challenge is to include the right number of steps at the right amount of detail--too much detail will confuse the user, but not providing enough information will make it hard for them to complete the procedure.  

Page from my sketchbook showing the process I followed to make the penny battery.

VISUALS 

 

For this project, I took multiple rounds of photos before getting pictures of the right quality.  I edited all photos in photoshop to keep lighting consistent,  maximize contrast, clarify and lead the user through the steps, and to minimize distraction.

I took multiple rounds of photos to get high quality pictures to use in my instructions.

 

Next, I used Adobe Illustrator to draw vector graphics based on the photos I had taken.

Makeshift apartment lightroom

Photos before (left) and after (right) editing

Original vector graphics used for user testing

user Testing

User testing provides feedback from intended users that help direct design choices.

 

I used initial drafts of my photo sequence and vector graphics sequence to test the usability of my instructions.

Findings:

  • Participants did not know how to get the battery out of the case

  • Participants unsure about the order of panels in the instructions

  • Participants agreed that the graphics were generally clear and simple

User testing lead me to change several things in both my designs.  Firstly, both users were confused about the sequence that steps need to be performed in.  Based on this feedback , I was able to add numbers to both design that help clarify the direction of the sequence and helps direct the attention of users throughout the process.  

Secondly, user testing lead me to realize that my instructions on removing the battery were unclear.  This prompted me to take new pictures and redraw the graphics at a better angle to include a view of the paper clip I used to remove the battery.   This addition made the instructions easier to follow and increased trust between the user and the instructions.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Instructions

 

 

Participant 1

Mobile App

 

The last step was to incorporate the visual and photo instructions into a mobile app design.

Reflection

 

Throughout this design process, I learned the most about giving and receiving critique.  In-class critiques from professors and other students lead me to recognize the value of honest constructive feedback.  They also gave me a place to practice giving useful critique to others and identifying design strengths and places for improvement in my work as well as the work of others.  

I was also able to develop my skills in Adobe Illustrator, Photoshop, and Adobe XD.  These are valuable tools that I will be able to use effectively in the industry.  

If I were to redo this project, I would want to focus more on usability than visual design.  By user testing with more participants, and including phases of user testing for the app specifically, I could receive more feedback of the usability of my app. 

aboone06@uw.edu | (971) 732 9246

  • Grey LinkedIn Icon
  • Grey Pinterest Icon
  • Grey Instagram Icon