GoSend

A progress tracking app for outdoor climbers

Native mobile app

How can outdoor rock climbers keep track of their achievements to stay motivated?

Overview

GoSend is a tracking app for outdoor climbers to log their achievements and share with friends. It has been developed as a native app for both iOS and Android.

You can view the Behance version of this case study here.

If you'd like to view the prototypes first, both iOS and Android versions are available.

Role

UI Designer

Timeline

Feb - Mar 2022, Apr 2023

Tools

Adobe XD, Adobe After Effects

Project Type

CareerFoundry student project

Problem

Currently, there are very few apps that help climbers track their progress outdoors, which is one of the most concrete ways to nurture their motivation to continue to improve. Some climbers go old-school and use the checklists in the back of their guidebooks to check off each ascent. Other more statistically minded people create their own Excel sheets and manually input their statistics. These methods require a lot of time and effort. There are various climbing apps available, but most focus on either indoor training or sharing information on climbing areas. GoSend aims to fill in this gap.

Solution

With GoSend, climbers will be able to search for their climb, log their "sends" or ascents of these climbs, follow the progress of their friends, and set their own project goals. One of the most exciting and rewarding parts about climbing is seeing the progress and improvements along the way, so this app aims to make these achievements trackable and easy to share.

The Process
GoSend Final Design Walkthrough Playlist

01

Competitive Analysis

As an avid climber who would fall into the target audience for this app, I already had a good idea of what it should do. However, before jumping into designing it, I conducted a competitive analysis of other climbing oriented apps.

Of the various climbing apps available, KAYA and Stōkt offer the closest services to GoSend's primary objectives. By evaluating each app, I found features and UI patterns that I wanted to emulate in GoSend's final design.

Kaya

KAYA's badges inspired my achievements page, which gives users set goals to keep them motivated throughout their climbing journey.

kaya-badgeskaya-stats
Stōkt

Stōkt's stats page was well organized and easy to read, so I modeled a portion of the GoSend stat page after their design.

stokt-homestokt-stats

02

User Flow Diagram

The basic tasks that the user needed to be able to accomplish with this app were as follows:

From this list, I developed the user flow diagram below.

gosend-user-flow-diagram

03

Low-Fidelity Wireframes

Learning from my last project, instead of sketching with pen and paper (which has its uses), I went straight to sketching low fidelity wireframes in a note-taking drawing app on my tablet.

lofi-onboarding
lofi-home
lofi-search-climb
lofi-sends-tab
lofi-profile-friend
lofi-add-send

04

Mid-Fidelity Wireframes

At this point, wireframe development diverged into both the iOS and Android platforms, using the Human Interface Guidelines and Material Design 3 standards, respectively.

For clarity, only the iOS wireframes are shown.

ios-midfi-landing
ios-midfi-home
ios-midfi-search
ios-midfi-sends
ios-midfi-filter-menu
ios-midfi-achievements

05

Mood Board

Once the mid-fidelity wireframes were established, it was time to give them some character. To start, I created a mood board based off of keywords that the app should convey to its target users.

Keywords

Motivational | Inspiring | Friendly | Analytical | Community-driven

Imagery

A pattern began emerging from the imagery I selected for my mood board: warm accents against cool backgrounds with high contrast elements. I used this trend as a starting point for my style guide.

adi-cohen-inspirational-poster-1lindsay-kneram-climbing-poster
ali-hooten-climbing
katya-kamenskaya-magazineadi-cohen-inspirational-poster-2
ascent-pilcrance

06

Style Guide

Typography

gosend

Logo - Cubano Regular

Aa

Headings - Agenda

Aa

iOS Body - SF Pro

Aa

Android Body - Roboto

Color palette
Near Black

#2C2C33

Dark Cool Gray

#515765

Yellow

#F1C22C

Ivory

#E6EBE0

Cool Gray

#98A0B3

Seafoam

#87C1B9

UI Elements
Navigation
gosend-navigation-ui
Listings
gosend-listings
Input fields
gosend-input-fields
Horizontal Scroll
gosend-horizontal-scroll
Buttons
gosend-buttons

07

High Fidelity Design

While the design was developed for both iOS and Android, only the iOS screens are shown below for clarity.

Signing up and onboarding

The onboarding process involves just two questions that help personalize the experience for new users. These can be changed at any time via the settings preferences.

high fidelity landing screen

Landing screen

high fidelity sign up screen

Sign up

high fidelity onboarding question 1

Onboarding question 1

high fidelity onboarding question 2

Landing screen

Your dashboard

From the home screen, you can:

  • Search for climbs or people
  • View your basic stats
  • Log a new send or project
  • View suggested videos from sends or near current location
high fidelity home screen
Find and follow friends

You can view and follow your friends' profiles, watch their uploaded videos, and keep each other motivated with a congratulatory message and positive vibes!

high fidelity search for friend

Search by name

high fidelity friend's profile page

Follow and socialize!

Log an ascent

When logging a send, you can provide extra details including your rating of the climb and any photos or videos. When you post it, the send is added to your profile and logged with all your other sends. Watch how your stats grow with each climb!

high fidelity add send menu

Add send menu

high fidelity add send details

Provide send details

high fidelity send page

The send page

Add a project

We know lots of climbs take years of projecting to finally send. Keep track of what you've learned over each session by logging a project. Your projects are private and available offline, so you can access them in the most remote locations. No cell service needed. Keep adding details and notes after each session until you send!

high fidelity add project menu

Add project menu

high fidelity provide project notes

Add project notes

high fidelity project page

The project page

Track your progress

You can track your progress in the "My Sends" tab, whether you're more statistically-minded or like reviewing each send one by one. You can view both completed ascents and projects in progress. Under the "Profile" tab, fun achievements with preset goals provide further motivation to keep exploring and pushing your limits.

high fidelity search for friend

"My Sends" tab

high fidelity Achievements page

Achievement badges

View climb details

It's always nice to know what other people are saying about a climb: Is it worth trying? Do other people like the movement? How the heck did everyone else do the topout? If you're curious, go to the climb's page and see! Watch videos to see how other people completed the ascent.

And if you want to figure out the climb on your own, don't worry. The other people's beta comments are kept hidden until you want to see it.

You can also socialize with likes and comments on other people's sends! See what they thought of the climb. Celebrate (or commiserate) together!

high fidelity view climb details

08

Prototypes

Once I completed the first version of the high fidelity screen designs, I used the prototyping tool in Adobe XD to create prototypes for each platform. I shared the prototypes with seven colleagues who provided constructive criticism. The feedback on the overall design was positive with suggestions on cosmetic changes, such as color use and text hierarchy.

09

Walkthrough Animations

I returned to this project after a UI animation course, and created walkthrough videos to show in more detail how users would complete their tasks and interact with the app.

Youtube Playlist

Reflections

What went well?
  • UI kits streamlined design process when splitting to iOS and Android screens
  • I based the design prompt of this project on my favorite hobby. Being the part of the target user base helped me craft the foundations of the app.
What did not go well?
  • Overambitious with the features included in the first iteration. Paring down with a MVP document would have helped.
  • My mentor left during the project. I turned it into an opportunity to improve my presentation and communication skills when I downloaded the project to my new mentor.
Further refinement

After completing a UI Animation course, I returned to the project to put my new skills to use. I created UI animations that explored transitions, micro-animations, and video play screens in further detail. Revisiting the project allowed me to fix errors, refine the design, and even create some new screens for previously unexplored user flows.

Previous

Nest Egg

Next

Tranquil