Team: Individual Project | Date Completed: December, 2017
Overview
This project was my first experience with the UX design process. In this project, I designed visual instructions for adding new coral to a saltwater aquarium and presented them in a prototyped app created with Adobe XD. I communicated this procedure as a series of steps through photos and graphics. Each step in the procedure has a small amount of text, but the main method of communication is visual. In completing this project, I learned how to design according to a set of constraints. I also learned how to conduct usability testing, and how to use what I found to improve my overall interface design.
Mobile Interface Mockups
|
|
Design |
|
First Sketches
Below are two iterations of the sketches I made when I was beginning this project. On the left are the first sketches that I made, and on the right are the refined, more detailed sketches that I ended up using for the rest of the project. These sketches were my first attempt to break the process of adding coral to a saltwater aquarium into a series of simple steps. While creating these sketches, I found it particularly challenging to break down a process that I am very familiar with while also making it seem simple to users. I played around with different ways to graphically represent the different aspects of adding coral to a saltwater aquarium. I conducted minor user testing with the sketches on the left, and I used what I found to generate the sketches seen on the right.
Initial Photo Sequence
After outlining the steps that it takes to add coral to an aquarium, I created an initial photo sequence that would guide users through the entire process. I focused on taking clear photos to optimize communication through appropriate lighting, camera angle, framing of the subject, and removing distracting elements from the background. After taking the photos, I designed a document that highlighted the photos while providing small amounts of supporting text, and tried to keep the communication primarily visual.
A photo sequence, with captions, that depict the process of adding coral to an aquarium
|
Graphic Sequence
The next step in my process of designing a tutorial app was to create the graphics that would represent the process of adding coral to a saltwater aquarium. I used Adobe Illustrator to create the graphics in this step, and kept my graphics simple yet demonstrative. I focussed on establishing a consistent visual language, which proved to be more difficult than I initially thought. I used the photos from my previous phase of design as a template when creating the graphics, and considered where the visual communication of each photo could be improved or simplified further. For instance, I considered whether or not to include hands in each graphic. If I removed the hands, the graphics would be less busy and more visually consistent, but would lose some of the communicative properties. I decided to include hands in some of my graphics, because hands demonstrate process more effectively than a series of isolated graphics. Hands also establish context, and tell a user "You should be doing this now" while making the graphics feel more approachable and human.
The same sequence of adding coral to an aquarium with vector graphics that I created in Adobe Illustrator
|
|
Testing |
|
After completing the photo and graphics sequences, I took them to users to conduct usability testing. During the testing session, I provided participants with the equipment and materials needed to complete the process along with either the photo sequence or graphics sequence. I asked them to verbalize their thoughts as they examine the instructions and move through the steps, and noted any difficulties with the steps, misinterpretations of the instructions, or particularly effective parts of my instructions. I only conducted usability testing on two participants, one for the graphics sequence and one for the photo sequence. If I were to complete this project again, I would conduct usability testing on more participants. I learned that two participants is not enough to establish an accurate assessment of user interactions with a product, and if I were given more time to work on this project, almost all of it would be spent conducting research and usability testing.
|
A write up of the user testing that I conducted on my initial photo and graphic sequences
|
|
Hi-Fi Prototype |
|
I used Adobe XD to create an interactive prototype of my instruction sequence as it might appear in a mobile application prototype for a company called VisiGuides. The target of this phase of design was to revise my photo and graphic sequences based on feedback from my classmates, instructors, and participants in my usability testing sessions. Although navigation and interaction is important, this interactive prototype focusses on making the visual design of the app an effective common piece, and not the interaction design. During this step of design, I found it difficult to compile all of the feedback that I received into one finalized prototype. It was also difficult to establish the meaning and significance of symbols in my app, and I had to experiment with conveying meaning without making too many assumptions.
|