AeriaList: A Digital Glossary of Skills

A Project in Digital Product Design

This past Fall, I took a 2-credit course at the University of Michigan in Digital Product Design. It was designed to be a crash course in designing solutions to real-world problems for students who are considering a career as professional designers. In this post, I’ll talk about one of my projects for this course—a mobile app called AeriaList—as well as the process by which I tackled a problem and designed a solution.

Identifying a Problem

Around three years ago, I started learning aerial silks. If you’re unfamiliar with aerial silks, it is a circus art performance you might have seen in Cirque du Soleil where artists perform aerial acrobatics while hanging from a fabric. Over the past few years, I have taken classes at 3 different studios across the U.S. At each studio, every instructor I’ve had has recommended that students bring notebooks to class to jot down notes on the steps involved in new skills they learn.

Aerialists who are learning aerial silks want something to keep track of the steps involved in completing each skill they learn so they can easily recall how to perform complex moves that they’ve learned before.

I want to clarify that “aerialists who are learning aerial silks” could mean aerialists of any level — there are advanced aerialists who still take silks classes. Any aerialist who is still learning new skills is a potential user.

My Design Solution: AeriaList

I decided to tackle my problem statement by creating a user-populated digital glossary of aerial silks skills in the form of a mobile app called AeriaList. By keeping a digital glossary rather than a handwritten one, aerialists easily locate skills in an automatically-sorted list from the convenience of a device that we carry around wherever we go. Additionally, a mobile app would provide the option to add photos or videos to accompany notes.

Image for post
Image for post

The Process

It took iteration upon iteration of each screen in the app to arrive at the solution you see above. To shed light on some of the challenges I faced as I evaluated and re-evaluated how to design the best solution, I will walk through the steps I took to produce the layout of the app’s main glossary screen, from low-fidelity wireframes to a high-fidelity prototype. Note: I will not be discussing the intricacies of the updating the visual style, but rather focusing on my solution to the problem at hand. For the sake of brevity, I will also not be discussing iterations of other screens, the on-boarding process, or transitions between screens.

Getting Started

I began by delineating the typical use cases of a potential user of AeriaList: creating a new skill, locating a specific skill by scrolling through the glossary, viewing a skill, editing a skill, deleting a skill, and searching the entire glossary for a specific skill.

Image for post
Image for post
The first wireframes I came up with on paper and in Sketch

Iterate, Iterate, Iterate

Based on the problems with my initial wireframes, I decided to make the high-level categories “Beginner,” “Intermediate,” and “Advanced.” Then, within each category, I wanted to add the option to sort by date and alphabetically to give users greater control over how they search through their glossary. After speaking more to my friend in Open Gym about her aerial silks notebook, I also realized that one of the benefits of her notebook over my current design was the ability to easily bookmark pages with skills she wanted to practice more or string together. As a result, I decided to toy with adding a “Favorites” feature.

Image for post
Image for post
Brainstorming new ideas for the layout of the glossary screen (left); Sketch prototypes developed from my brainstorming (middle and right)

The Final Design

To address the problems I encountered with my previous solution, I decided to completely remove “Sort By” functionality, and sort items firstly by level and then alphabetically. Then, I decided to compile all levels of skills onto one page—similarly to how iPhone contacts are sorted alphabetically on a single page, with a header for each character in the alphabet to separate contacts into categories visually. This freed up space for navigation so that the top tabs could be used to navigate between the “Glossary” screen and the “Favorites” screen. Finally, I added back the “Search” button.

Image for post
Image for post
The final design I came up with for the main screen of AeriaList

Moving Forward

Overall, I believe I came up with an elegant solution to the problems aerialists face in keeping track of the skills they have learned in addition to the problems that I faced in designing iterations of AeriaList—but that’s not to say I came up with a perfect solution. If I had more time and more resources, I would have liked to investigate whether a “Favorites” screen was truly necessary. For what purpose would aerialists mainly use “Favorites” —for bookmarking skills they want to work on, skills they want to string together in a performance, skills they have learned recently, or something else? And could there be a superior feature more fitting for this purpose? Additionally, skills can sometimes be classified in categories such as “drops” (skills that involve free falling while still wrapped up in the fabric). Would aerialists find it useful to be able to sort skills by these categories, or is search functionality enough to account for this?

Closing Thoughts

Product design is challenging. In some ways, the process of designing reminds me of writing an essay: similarly to how each sentence in an essay should be a unique and productive contribution to further the thesis statement, each design decision—however small—should advance the product as a solution to the problem statement in a meaningful way. For this reason, designers must constantly think from the perspective of the user and ask themselves, “Why?” Why is this feature necessary—how does it contribute to solving the user’s problem? Why is the feature symbolized in this way, or located in this area of the screen? What information is absolutely necessary for the user?

A recent grad from the University of Michigan spending some time exploring her passions. Learn more @ hannahqin.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store