Trek Ride
Club App
Project Overview: Trek Ride Club App
One of the biggest projects I have been a part of at Trek is the new “Trek Ride Club” app currently in the works. Trek does not currently have a brand app to enhance customer engagement with the Trek brand. To solve this, a large team and I are creating a bike recording app with many features to get customers to engage in it.
Role: Digital Product Design Lead
I have been the lead designer for this app from beginning to where we are at now. I am in charge of the entire experience form an ux/ui standpoint, including the UX roadmap for the product, research, strategy, vision and delivery of this new app. There is one other designer helping on the web version of the app that uses Treks current design system.
Customer Problems
Customers do not have access to a Trek branded app (outside of our e-bike specific riding app).
They have no way of recording bike rides and engaging with their biking community from a Trek personalized standpoint.
Our retailers are looking for more touch points in their sales process to engage customers.
Who I worked with:
Product Owners
Front End Developers
Back End Developers
Business Analysts
Engineers
Software Architects
Project Managers
Customer Problems
Vice President of Marketing
Vice President of IT
Graphic Design Team
Product Data Manager
Marketing Managers
Store Manager
Illustration Artists
Step 1
Understanding our users
User personas played a pivotal role in our successful product development and marketing strategies. These fictional representations of target users helped us gain a deeper understanding of our customer base, allowed us to design products and tailor experiences that met our users' specific needs.
Step 2
Benchmarking
Where to begin! With an app of this size, it was very important to do an extensive amount of research. Benchmarking was key in understanding where our competitors stood and to gain some best practices to use. Benchmarking was done at every feature level of this project.
Step 3
Working with my Product Owner and team to align UX/UI capabilities within the project Roadmap
Once a decision was made on the feature set of this product between my research done by my product owner and I, the project roadmap was created. I was responsible for working with the business analysts and development team to make sure the UX/UI timeline of deliverables would be on target and align with development needs. This projects had a very short project timeline, so we worked together to brake the project into phases.
Step 4
Getting Setup
With a project of this size, it is important to have effective organization and communication. I first added a TRC specific swim lane to our UX/UI design board for all tickets surrounding design work for TRC that also directly linked to the TRC project board itself containing the development tickets. I also made sure we had a specific UX/UI channel within the TRC project team for communication and also a Figma setup representative of the phases to help make an efficient handoff to the developers. We also had a confluence section of key documents created by the business analysts and project manager.
Step 5
User Journey Mapping
During this phase of the project, under my lead but with the help of my product owner, we mapped out the user journey based on our gathered research and requirements. This involved understanding the needs and pain points of our target audience, exploring potential solutions, and structuring the flow of the user experience. By having a clear understanding of the user journey, we were able to identify the key touch points and pain point that.
Step 6
IA (Information Architecture)
Establishing a thorough structure of this app, both web and mobile was very important to making sure it was feasible from the back end development side of the app, and that there was an efficient and successful user flow throughout . These architecture maps established the foundation of the app.
Step 7
User Flows
At this point I had my user personas flushed out as well as a solid architecture map so I was able to begin user flows so I could then start sketching out the app and begin wire framing.
Step 8
Wireframing
After user flows, I began designing the basic structure and functionality of a the app, focusing on the placement of elements to help give a visual blueprint without diving into branding. It was very key to defining what components were needed and how the feature sets would fit.
Step 9
Design System
Our first Trek App! With that being said, we do not have an app based design system. As part of this project, it was necessary to begin the initial bones of an app design system. The essentials for the first couple phases are typography, color, and components. Treks visual design teams handled the illustrations.
Step 10
High Fidelity Screens
High fidelity screens were created and annotated for developers. These screens include precise visual elements, interactions, and user flows that closely represent the finished product.
Launch coming soon
Steps not shown above
This page could go on for far too long, in order to keep it from being overwhelming there are steps and parts to the project not shown. Please ask me more about the following that were part of the project and process:
Translations
Animations
Clickable prototypes
UAT Internal (User Acceptance Testing)
Android design
Web app