I recently had an opportunity to do some visual design work for the GORUCK app (iOS and coming soon to Android). The project was incredibly fun to work on and I was able to to experiment with some new visual design approaches, so I thought I would share my process with the world.
But before we dive in, you might be asking yourself “What is GORUCK?” GORUCK is a company comprised primarily of Special Forces Veterans that leads team building endurance events. Rucking — the act of putting weight on your back and going for a walk — is a huge part of these events and GORUCK’s identity.
Goals
The primary goal of this project was to explore React Native as a viable framework for building slick and performant native apps. We have built quite a few hybrid mobile applications in the past using various frameworks — each with their own UI limitations. We set out to compare React Native to these frameworks and uncover its limitations as well. We aimed to push the envelope and get creative with animations, blur effects, and transitions to judge just how responsive React Native can be. In short, while we plan to iterate on the GORUCK app and gather user feedback as we move forward, for this phase of the project we focused on making a visually distinct and inspiring experience.
Constraints
When starting a new project, it’s always a good idea to discuss constraints. In this case, the biggest constraint was content availability. All images and content that you can find in the GORUCK app were pulled directly from the GORUCK website — anything that involved changing content, altering source images, or adding new content was out of scope.
Visual Design
I’ve always wanted to experiment with a dark UI design, but have had few chances to do so. Clients tend to shy away from a primarily dark UI because it’s unfamiliar and not as utilitarian as dark text on a light background. But for the GORUCK app, dark UI was an entirely plausible premise. Since trekking miles with a backpack full of weights strapped to your back is pretty epic, it only seemed fitting to design the app in as epic a fashion as possible. And the emotions of intensity and gravity evoked by a dark UI fit the “epic” bill perfectly.
The challenge in adopting a dark UI design was to create an experience that still aligned to GORUCK’s branding guidelines. If you take a look at goruck.com, you’ll see a clean design with primarily white background and dark text, and minimal use of supporting colors to visually emphasize calls to action and links.
GORUCK’s Website
As you can see, a dark UI would be a significant departure from the existing website’s look. However, as the term brand guide suggests, the colors in the GORUCK brand guide are just that — a guide. The guide also doesn’t pledge an allegiance to dark or light UIs. Thus, our solution was to create a dark UI and employ a mixture of the brand’s primary colors. The design’s background shows this strategy most clearly: we created a blurred background and tinted it with subtle red and blue overlays from the brand color palette.
The blur on the background is actually just a photo (found on the perpetually awesome unsplash.com) with a significant gaussian blur applied. I’ve tried this technique before with less success — the key is in finding an image that has a good range of colors in different areas of the photo. I chose the photo below because the water also had a nice turquoise tint, and when layered below the dark blue gradient overlay, the turquoise color showed through just enough to accentuate the green color in GORUCK’s brand guide.
The Source Image
The Same Image, Blurred and Rotated
I also layered a slight red gradient on top of the background to represent the red color from the GORUCK branding.
Angles
Angles are another recurring visual pattern in the app. Angles seem to be one of those design trends that are all the rage these days, and they’re becoming overused to an extent. But, similar to the dark UI approach, the effect of sharp, angled visual separators fit the GORUCK credo well.
Iterations
Like many projects before it, the GORUCK app started out as a development project because our dev team simply wanted to explore React Native. But as our team put more time into the project, we realized the potential to build a beautiful and usable experience. Enter the UX team.
Naturally, the first thing we wanted to do was make a bunch of changes. Here are a few of the more impactful changes we made, and why.
Navigation
After our first development iteration, we were using a hub and spoke navigation model. In other words, when users first come into the app, they see a launchpad — a screen displaying five main areas of the application to which they could navigate: event map, event list, inspiration, gear, and cadre (GORUCK’s special forces veterans).
Hub and spoke navigation has its advantages and disadvantages. On the positive side, it makes understanding how to navigate through the app clear and explicit for users. It also shows users the different app areas which they can visit upfront. In this case, however, there was one significant downside to using hub and spoke navigation. The user can begin on the homepage, navigate to a list of cadres, then a specific cadre. From this page, the user can navigate to a specific event which the cadre will be running. At this point, the user is four levels deep in the navigation hierarchy and would have to tap the back button four times just to get back to the launchpad.
To allow for quicker switching between the app’s main areas, we decided to replace the hub and spoke navigation with a persistent bottom navigation menu.
The bottom navigation menu also allows us to default to one of the application’s main areas. We chose to default to the events section since signing up for a GORUCK event is the user’s most frequent workflow.
Bottom navigation menus have their own drawbacks, namely that they eat up a good bit of prime screen real estate. You might be asking yourself, “Why not just use the trusty hamburger menu?” Just like actual hamburgers (the meat and bun type), hamburger menus are tempting. They tuck everything away so nicely, and free up so much room for content. But simply google the term “hamburger menu” and you’ll find a raging debate about the hamburger’s efficacy. Evidence abounds showing that hiding important navigation items on an off canvas menu has significantly lowered customer engagement for several products.
You might also be asking yourself, “Hey, wait a second — he said there were five main areas of the application, so why are there only four items in the navigation?” Touché reader, touché. That brings me to our next iteration.
Consolidating The Event Map and the Event List
Whenever we start a new project, we map out the different nouns within an experience. For example, for a personal training app, your experience will likely involve trainers, clients, a schedule, a workout plan, and exercises. Simplifying the experience down to its basic parts helps us understand relationships between those different parts and gives us a foundation to define our information architecture.
For GORUCK, the mapping was simple:
- Events
- Gear
- Cadre
- Videos
Despite the simplicity, in our first iteration the main navigation included both ”Event Map” and “Event List.” With five icons, the bottom nav was becoming too crowded. Thankfully, we could refer back to our map of nouns to see that it made more sense to have one “Events” section from which users could toggle between a map view and a list view. Essentially, these two views show the same information. The map view caters more to the location conscious Rucker, while the listview better serves a Rucker searching for a specific date or price.
Outcomes
In the end, we found that React Native is quite performant. It can hang with more advanced interaction design patterns that you would see in a purely native application. We did run into a few constraints, such as difficulty using custom SVG icons in combination with blurred backgrounds.
Next Steps
As we move forward with the GORUCK app, we are excited to get feedback from the Rucking community and start iterating on the designs. Want to check out the app? You can find it on iTunes (and coming soon the Google Play store). And, as always, if you have any comments please leave them below or give me a shout on twitter. We welcome any feedback!
