TunedRun
Duration
Team
Designer - May S.
My Role
iOS Designer
What's This Project About??
PROBLEM
Ari's challenge was clear: existing running apps like RockMyRun, WeavRun, and PaceDJ didn't meet his specific marathon needs.
He sought a personalized solution, one that automatically adjusted music based on BPMs and different marathon phases.
SOLUTION
This drove our mission: create a unique running app that synced music seamlessly with his pace, transitioning at specific distances.
Our collaboration aimed to blend technology and art, ensuring Ari's marathon experience was enhanced, motivating him every step of the way.
Project Insights
1
2
3
About
TunedRun is a running app that tracks your run while playing your favorite songs at the right time.
Users would sign-in with their Spotify or Apple Music subscriptions and build playlists for each mile of their run. With these playlists built, all they would have to do next is select one to start recording a run.
Set-Up
.png)
Kickoff Mtg
In our kickoff, we outlined project objectives, introduced the team, and discussed roles, responsibilities, and timelines.
We addressed challenges collectively, fostering a proactive approach, and emphasized open communication. The meeting concluded with a motivated and well-prepared team, united under a shared vision for the project.
Brief Review Unveiled
During our app brief review, we focused on TunedRun's core concept: synchronizing music seamlessly with the runner's pace.
As a passionate runner myself, I deeply understand the frustration of trying to match my runs with the right music beats. We delved into key app screens, envisioning the Launch (Splash) Screen, Login (integrating Spotify/Apple Music), Landing/Home Page, TunedRun Creation Screen, and Songs Playing Screen. We meticulously analyzed their functionality, aligning each with the user's goals for a seamless experience.
Additionally, Ari and I discussed design preferences, emphasizing a clean and intuitive interface to enhance user engagement. Our shared vision and attention to detail promise an app that not only meets but exceeds the expectations of every running enthusiast.
.png)
Lo-Fi
.png)
Existing Lo-Fi's
The client came with a clear vision for the app, providing a solid foundation which he already crafted as lo-fi wireframes using Figma.
Given the client's role as the perfect user archetype, we opted to temporarily bypass extensive user research.
This decision streamlined our process, allowing us to focus on refining the app according to the client's firsthand insights, creating a more personalized and user-centric experience from the start.
Logo Design
.png)
Competitor Research
In researching competitors such as RockMyRun, WeavRun, PaceDJ, and FitRadio, I noted a prevailing trend in their branding—either energetic orange or cool blue tones, often accompanied by dark mode aesthetics.
Understanding the client's desire for distinctiveness, I embarked on a journey to create a brand that would break away from the conventional mold. The emphasis was on modernity, exploring unique shapes and logo designs that would set the brand apart in a vibrant and contemporary way.
The goal was not just to stand out from the crowd but to make a bold statement that resonated with the client's vision for a cutting-edge and memorable brand identity.
Mood Boarding
In our quest to differentiate ourselves, I sought inspiration from platforms like Dribbble and Behance, delving into terms like "running app," "running icon," "energy," "fun," and "motion." The exploration uncovered visuals with high contrast, vibrant tones against dark backgrounds, and playful, bright colors.
These elements promised a dynamic representation of fun, energy, and motion—a departure from the typical aesthetics in the running app landscape. It was a creative journey fueled by the desire to carve a unique identity, and the discovered visuals laid the groundwork for a distinctive and lively brand that would captivate users from the outset.
.png)
.png){kind=logo}
Typography + Sketches
Given our tight one-week timeframe, we made a strategic decision to stay within scope.
We chose to concentrate our efforts solely on the homepage, bypassing an in-depth exploration of the information architecture for now.
Our plan includes making updates to the other pages in the upcoming phases or projects. By focusing on the immediate needs, we aimed to ensure a polished and impactful homepage experience while keeping the door wide open for further enhancements in the near future.
Final Logo + Color Treatment
In our redesign endeavor, I meticulously studied websites like Secoda, dissecting their content layout strategies.
Our focus was on creating a homepage that epitomized clarity and cognitive efficiency. We opted for a design aesthetic that embodied cleanliness, high contrast, and abundant whitespace. These choices were deeply rooted in research findings, geared towards optimizing content skimmability.
By integrating these insights, we endeavored to craft a homepage that not only mirrored effective design principles but also enhanced user engagement through seamless information processing and effortless navigation.
.png)
Click image to see the typography and previous color treatments
Prototype
.png)
Applying Color to the Bones
With existing lo-fi wireframes in place, my focus shifted to infusing the new brand into high-fidelity mockups. Implementing the UI redesign, I strategically considered the user experience, adhering to Apple's human guidelines for familiarity.
Ensuring each animation resonated with iOS users, I aimed for a clean design philosophy. Each page was meticulously crafted to offer a singular, intuitive action, enhancing user engagement and simplifying navigation.
Reflection
Creating my first mobile app was an exhilarating experience, driven by my deep admiration for Apple's design ethos. Despite my initial apprehension, collaborating with a supportive colleague eased the pressure to be flawless, fostering a creative environment with invaluable feedback.
Throughout this journey, I discovered my passion for logo design, reveling in the art of crafting brand identities through the harmonious interplay of shapes, colors, and typography. This endeavor not only allowed me to explore my creative instincts but also instilled a newfound confidence, reaffirming my love for visual storytelling in the realm of design.
Collaborating with May on TunedRun, my iOS app for runners, was an absolute joy! She's not just a designer; she's a creative wizard. May effortlessly turned my fuzzy ideas into a beautiful and user-friendly experience.
– Ari F., Developer
📓 Learnings
1
There are tons of free resources for illustrations that can be utilized for an initial launch of a product.
2
Apple's Human Interface Design Guidelines helped streamline interaction animations between pages, buttons and cards.
3
Figma exceeds Adobe Illustrator in its ability to create vector files for logo design while also cultivating a collaborative environment.
📈 Long-Term Vision
1
I would test the prototype with users to understand where the painpoints are in the user flow.
2
I would work with the developer to craft pre-made playlists for users to provide higher adoption and prove value of the app quicker.
3
I would test the usability of the music player page to see if it is easy to use while running.
