Strava Calendar. A user experience case study designing a solution for the Strava activity feed "infinite scroll".
Strava is a social networking app for athletes of any type or level allowing users to track and analyze their performances while sharing activities with friends. This app allows users to record activities like runs, bike rides, swims, and much more via uploading or in-app activity recording.
The activity tracker provides many training insights but how can users quickly access their in-app Strava activity history without having to deep scroll on the app? I proposed a simple in-app calendar feature allowing users to quickly pull up prior activities from their history.
Scope
UX Design
UI Design
User Research
Prototyping
Software
Adobe XD
Adobe Illustrator
The design solution of a simple in-app calendar feature allows users to quickly pull up prior activities. The user will be aided by a clean, interactive monthly calendar spread that was cohesively designed to fit the existing Strava UI. In addition, drop-down menu bars were designed to help guide the user to their desired date. At this step in the design process, two variations of the design were tested, on the right, we have a month, year, and day drop-down selectors, while on the left it is solely month and year, ultimately finding just the month and year to be more successful when paired with the calendar spread.
Usability Testing Results
In the testing and validation phase of the project, a series of usability tests on 7 Strava users were completed including, observing the user’s journey when asked to interact with the prototyped version and pulling up a specific prior date. From the Usability testing, I was able to determine that: 6/7 test subjects found the flow to be generally easy to understand knowing intuitively which buttons to click based on previous app language/overall nature of feature/button design. All 7 test subjects were able to understand without hesitation what the calendar feature was as well as the date selection process. All 7 users were able to understand the dropdown menu function capabilities. 5/7 users had some confusion with the selection of the month and year not knowing what was clickable due to color.
From this testing result in particular I was then able to make a concrete design change based on user feedback as the original dropdown calendar options were not dark enough in color for the user to clearly understand their use, causing initial confusion at first. In the final version, the menu selections were made a darker grey, while the selected option would appear to be slightly bolded when clicked on.