Liftie is a hypothetical app that I designed in 2018 to be used by skiers and snowboarders while on the mountain. This scenario presented an interesting set of needs and challenges:
User Needs
Trail Map
Snow Conditions
Weather
Event Schedule
Challenges
Precisions while wearing gloves
Readability in bad conditions/without glasses
Data usage
Battery life
My solution was an app that predownloaded the relevant information for a ski trip and presented it in a clear, glanceable way.
I used a less-than-traditional navigation scheme based on four directional swipes in the hopes of making an interface that was "easy enough to use with your nose." After a few rounds of prototyping and usability testing, I had a design I was reasonably satisfied with.
•The Problem
While I was very pleased with my work at the time, I'd learned a lot since those first few iterations, and I knew I could do better. As an added twist, I wanted to approach this as if this app had already been built, meaning I had to do my best to work with what already existed.
•User Feedback
As a first step to revisit the app, I took a look at the findings from my last usability test, which never made it into a design iteration. The insights gained from these tests can be boiled down to a few key issues:
Bad Design
Liftie's design was functional at best and completely unappealing and useless at worst. There's a lot that could be improved.
Action Item: A. General UI Improvements
Confusing Navigation
While all of the participants got the hand of it pretty quickly, there was definitely confusion in the first few seconds for each user.
Action Item: B. Navigation Fix
Tiny Map
Ski mountain trail maps just weren't designed to be read on mobile screens. They have unnecessary detail and hard-to-read text.
Action Item: C. Trail Map Alternative
• A. General UI Improvements
To begin improving the UI, I started by considering the overall visual direction of the app. My goal was to be conscious of how every aspect of the design could serve the goals of the app.
This little UI element is a good example of the changes I made.
In this redesign, I thought about what Liftie was supposed to be: a friendly, simple, easy way to check basic information while skiing. To that end, I made the Liftie logo rounder, more squat, and simpler in an attempt to be more friendly and less intimidating. Similarly, I switched from Futura to Graphie, which maintains the pleasing simplicity of a geometric while adding some humanist touches to make the font a little more friendly.
Also, I abandoned that weird fascination with all caps and all lowercase.
A comparison of my old (left) and new (right) UI for the Conditions, Events, and Weather pages.
The new design is dark, taking advantage of increasingly popular OLED screens to lower battery life consumption.
I was very conscious of color contrast while designing; this was doubly important because the app specifically invites users with situationally induced impairments and disabilities: users who have reduced visibility due to snowy mountain conditions or swapping their glasses for ski goggles.
The weather page posed a separate issue: is there value in providing weather information every user already has access to? In keeping with the innovative spirit of this design, I decided to frame the forecast from the user's perspective rather than as an hour-by-hour breakdown. This would likely make the data more glanceableat the cost of familiarity and detail. A separate round of user testing would help determine if this change is necessary.
• B. Navigation Fix
The navigation is unusual, and that makes it less usable.
Each of the test users faced initial confusion with the navigation, but I'll admit that I was reluctant to abandon my idea. Generally I'm an advocate of killing your darlings, but in this case, I think my stubborn side had a point.
Each user got the hang of it pretty quickly despite the early confusion. In fact, I watched my professor enjoy the navigation so much that he continued to play with it for about 30 seconds before continuing to explore the app. In addition, swipe-based navigation is becoming increasingly popular. While the four-direction navigation isn't quite the same, there's still a lot more familiarity than there used to be with the paradigm.
This evidence suggests that the best solution isn't to remove the potentially delightful navigation immediately, but to attempt to mitigate or remove the initial confusion.
Animations to guide the user through the nontraditional navigation.
I took my existing navigation demonstration animation and built it into a simple feature tour that would guide the experience of the first few moments, controlling first impressions.
Oh, and I also decided to let users tap the UI elements on the home screen if they preferred. They already looked like buttons anyway.
• C. Trail Map Alternative
Finally, let's take a look at the trail map issue. Test users had difficulty zooming in to the map on the initial prototype, but the real problem stems from the design of the map itself.
This trail map was designed for large signs and moderately-sized handheld pamphlets, and even in those cases it's hard to read. All the text is tiny and alternates between orientations, and much of the information is extraneous and overly detailed.
During a portfolio review I was presented with the idea of redesigning the map in a style inspired by subway maps. I'm not the first one to try this: a quick search reveals a subway-styled ski map by Walker Milhoan. His map does simplify the presentation, but it's still far too large with text that's far too small. Nevertheless, I used his piece as aesthetic inspiration for my first few (lo-fi) attempts.
Some of my lo-fi attempts at a subway-styled ski map. They didn't go well.
There are obviously some issues with my first attempts; I didn't quite understand how the style worked, so it looks pretty bad. In later attempts keeping to a grid of horizontal, vertical, and 45 degree lines kept the diagrams looking a little prettier. This grid also allowed me to keep distances between trails fairly regular, although I preserved some irregularities where I felt it would help trail recognition.
Pretty quickly I realized that fitting a whole mountain onto one vertically-oriented screen was impossible, so I compromised by separating the map by lift.
In addition, there are some innate incompatibilities between the transit map style and the goals of Liftie. Most transit maps rely heavily on color-coding, but this has two major disadvantages: accessibility and the fact that trail maps already use color to convey difficulty.
Even when labelled, the new Lift Maps are way less cluttered and more readable.
Lots of compromises had to be made in the name of a simple, readable final product. Utilizing the existing vocabulary of shapes as difficultyhelped lessen the reliance on color, which has regrettably low contrast between trails in order to maintain a higher contrast against the background.
Trail name and difficulty are only noted at the beginning of trails to reduce clutter; the design relies on continuous lines to denote when a trail name remains the same. Due to the fact that all of the trails lead to about the same place, being able to discern the difficulty of a trail ismuch more important than being able to tell them apart.
A demonstration of the main features of the app and its navigation. Limitations of Adobe XD's "drag" interaction made a fully-fledged prototype impossible.
• Conclusion
There were definitely some rocky aspects to this project. I'm still concerned that some aspects of the design are too unfamiliar/experimental to work. If I revisit this project again, I'll begin with some user testing to validate my success in mitigating confusion.
From a personal perspective, I'm really satisfied with the outcome of this project—at least for now. I turned Liftie into something I can take pride in again.
• Lessons Learned
Really think about your software choice. I chose Adobe XD out of convenience, and that led to a lot of issues in the prototyping stage.
Animation is worth the effort. I had always been too intimidated to try animating before, but a little bit of motion goes a long way.
Scale personal projects down to the essentials. I'm really proud of this project, but I did way too much work on it; a lot didn't even make it into this case study.
