Let's connect!

  • LinkedIn - Black Circle
  • Instagram - Black Circle

Copyright 2019 Rachel Pollock. All rights reserved.

Collector

mobile rock-collecting companion for the novice geologist

fall 2018 · 3 weeks · UI / Motion Design

how might I leverage the affordances of a traditional field guide and the affordances of a mobile phone to help someone classify a rock?

This exercise in UI design asked me to translate an analog tool into a mobile application.  I chose to design a field guide.

Project Process

research

synthesis

ideation

design

review

comp. analysis

persona

scenario

task analysis

sketches

wireframes

task flow

wireflow

visual design

icon design

hi-fi wireframes

clickable mockup

motion design

reflection

persona & use-case scenerio

To get into the novice geologist's mind, I developed the following basic persona and use-case scenario:

 

Dorian is a thirteen-year-old boy scout who wants to earn his geology badge.  

One of the badge’s requirements is to: “Collect 10 different rocks or minerals. Record where you obtained (found, bought, traded) each one. Label each specimen, identify its class and origin, determine its chemical composition, and list its physical properties. Share your collection with your counselor."​

task analysis

Ah yes, the task analysis.  I’m getting excited just thinking about it - this is one of my favorite parts of any UI project.  

 

Anyway, the user’s primary task is to label each specimen he collects properly.  But how does one go about classifying a rock?  And how could a computer do the same thing?  Would the process be different?  I dug deep into the world of rock-classification (which surprisingly, I genuinely found quite interesting) and determined that an AI-powered, image-based rock-classifying tool seemed feasible.  Though the app would do the real classification work, I also wanted it to educate its users (in an easily-digestible way) about how it was doing the classification.  I made sure to work this idea into the app's navigational flow.

 

The user's primary task (and the one I would develop) is highlighted in black.

device affordance considerations

The phone screen’s modest size caused me to consider the importance of the information I presented on each page.  I decided that each screen would focus on one task until the specimen is classified.

human factors & context-of-use considerations

One-handed operation proved imperative to the app’s usability, as users might handle rocks or other materials in conjunction with their phones.  Therefore, I designed the app to operate with a few simple, single-handed swipes, taps, and flicks.

capture those specimens!

introducing Collector

From the field to the lab, Collector is your new favorite mobile rock-collecting companion!  Collector allows you to capture specimens and then scientifically classify them.  Never studied geology before?  No problem!  Collector's step-by-step classification sequence will have you feeling like a geologist in no time.

hi-fi wireframing

The following wireframes represent key actions in the task flow for capturing and saving a specimen.

specimen

classification

The app's algorithm analyzes and classifies the photo by comparing it to others in its database

specimen profile

 

Once the specimen is classified, its profile appears.  The specimen profile details the specimen's physical and chemical properties.

specimen

properties

If interested, users can read about each of the specimen's properties in greater detail.

specimen capture

 

Users utilize the phone's camera to capture a photo of the specimen

UI motion design considerations

This stage of the project taught me a lot about how the UI’s motion design prompts users to anticipate the app’s hierarchy and functionality (including the gestures needed to complete their task). While I wireframed, I considered each UI element's contribution to the user's understanding of the app's navigation and functionality.  

hi-fi UI wireflow

I mapped out each UI element's motion design triggers and feedback within the specimen classification task flow's wireframes.  

hi-fi clickable prototype

I created the following clickable prototype in Principle, following the actions I'd mapped in the wireflow.

reflections & moving forward

With more time, I would love to test the clickable prototype with some real users and continue iterating.