The CrossFit Journal was a publication in support of the CrossFit brand. Users could go the site and view articles written about supporting health, workout programming, stories of success and many others. While most of the journal was free, there was a premium portion where users could pay to have full access to the site, enhanced articles and video.
Project Goal
With 15,000 global affiliates, the focus of CrossFit HQ has shifted to helping a broader global audience. The Journal featured articles and videos produced in english, with users often having to utilize translating software to read and view. The goal for HQ was to provide a platform where anyone could come and find any article in their language. The mobile applications had their own product build, with the goal to support these new feature requests.
My Role
I was tasked with identifying potential flow and design solutions that would
- display a way for the user to identify a language that they would like to view the publication in
- have the ability to target specific interests and topics within the Journal system. An example; I want to see nutrition articles in Italian.
I would need to present my solutions to the project team, identify any potential user concerns and pain points and show stakeholders how the app would be used. Once finalized, I would provide mock ups, design specs and assets for our developers to begin production.
Researching and Exploration
With the goal in mind from the start, the first problem to crack would be identifying how the current release of the Journal application worked. The current build was created before our application team was hired at the company and was designed and built by an outside firm. We were asked to work within the the current design guidelines, keep the same look and feel while adding the new feature requests.
After whiteboarding several potential ideas on how the new features could work, we decided to piece together a few sample personas based upon our expected users. These ranged from US-based, english-speaking soccer mom's looking for nutritional advice to affiliate owners looking for programming tips and tricks who live in Venice, Italy. The key was to identify potential patterns in how they would interact with the app, how they would search if they could not find an article or video they were looking for, or if a page was unavailable.
Collaboration and feedback were important during the discovery and user-flow planning stages. Working within an agile release environment, it was important for us to speak about our findings while presenting potential flow issues and possible set backs.
Prototyping Solutions
Once the flows were mapped out and approved by the team, I moved on to prototyping how the app would work. Since the app was to work within the current design specs without any major changes, wireframes and low fidelity prototypes were already in place. However, one set back did happen during this phase. As noted earlier, the current build for the app was provided by an outside firm. Unfortunately, we did not have the design files to quickly produce the newest updates. This required me to create all screen assets, buttons, navigation bars, and icons from scratch. A bit of s step back, yes, from the start, but it gave us a better option in the long run that we could create and keep these assets updated within our internal design system library.
The current design in place for the application showed the title of the application (Journal), the section of the app you were in and a magnifying glass icon which enabled the search feature. With new features being rolled out in this release, the goal was to find a way to make everything work together seamlessly. Based on this, we found that if we were to release everything as-is, with the new additions, the navigation bar would become overcrowded, creating a potential user nightmare (as well as a design nightmare). The current build also created an extra screen while in search-view, which we wanted to eliminate.
Previous navigation bar layout
With this in mind, the design moved forward with the following navigation bar;
- Get rid of the App Logo branding at the top. It was using valuable space that could be used for other features.
- Keep the ability to switch between "Media" and "WOD" features.
- Eliminate the magnifying glass icon on the right, and enable a search field in the middle of the navigation bar
- Replace the magnifying glass with the new "filtering" feature
- Identify filtering icons for design, showing an active/inactive state
- You could filter the journal by;
- Content
- Language
Updated design with new features
One concern initially from our dev team were how our system would handle the filtering. Initially, the app would respond to each filter clicked in real time. This created a heavy load on our backend if there were a great deal of users at one time. The solution was to add an action button to the bottom to initiate to the response of the app and what the user gets returned to their feed. For example, they click Instruction and Business, in both English and Spanish, hit done and the app would return the results.
Updated design with filtering
Another concern was how should the app display the language filters; in the users native language, or in the native spelling? There was back and forth from our team on how we should tackle this. Since the user logs in, the app would read their settings and see display the app in their language by default. Ultimately, displaying the languages in it's native spelling was approved.
The new and improved CrossFit Journal
Outcome
Although the project was updated, tested by QA and to select users during the pre-rollout, the project would be consumed by a new, larger project; the redesign for crossfit.com. The new "mainsite" would merge the journal content into it's own and dissolve the Journal. The app is still currently available, however not in production nor updated. You can view journal articles within the new crossfit.com