Skip to main
Case Study
World's greatest athlete, Stacy Kvernmo's latest bike ride stats and mapped route

QuarqNet

Real-time telemetry & sharing for athletes

A custom application we designed and built in collaboration with Quarq’s internal developers – including a responsive interface, real-time mapping & telemetry, social networking, and third-party integrations with Strava, Training Peaks, Dropbox, and Today’s Plan.

A mobile-friendly design that will let users see the live tracking and performance data, even on the go, making it easy to connect up with others while out on a ride.

QuarqNet captures the data and seamlessly synchronizes activities with analysis sites like Strava, TrainingPeaks, and Today’s Plan. Athletes get unaltered, high-definition data and training log perfection.

What We Did

sign-in form with bike race mountain road
        scene in the background

Services

  • Research & Concepting
  • Project Management
  • UX & UI Design
  • Front-end Development
  • Ongoing Maintenance
  • Usability Testing

Languages & Tools

  • Adobe XD
  • Herman
  • JavaScript with Backbone & Marionette
  • Sass & CSS

Quarq partnered with OddBird to redesign and refactor QuarqNet, their existing activity tracking web application for professional athletes – making it responsive and user-friendly.

QuarqNet needed to integrate with Quarq’s existing brand, both the e-commerce site, and the packaging and printed collateral for the Qollector, Quarq’s wearable, activity-tracking hardware. The QuarqNet brand also matches Quarq Race Intelligence, another Quarq web application OddBird had the privilege to design and develop.

Planning & Discovery Phase

User Profiles

Together, we identified three distinct users – athletes, coaches, and friends/family. Each type of user wanted to use QuarqNet in unique ways. Athletes, the primary users, might use the app to track routes and stats in real time, connect with other athletes, or share stats on third-party sites. A friend may want to check an athlete’s location to meet up for an activity, and a coach may want to track an athlete’s progress over time.

User Stories

We created an itemized list of user stories – a representation of all the user interactions. Each user story defined one task that an athlete, coach, or friend might want to accomplish on QuarqNet. Before beginning development, we estimated the user stories, and Quarq prioritized them. The process of creating, estimating, and prioritizing user stories continued throughout the project, allowing Quarq to remain up-to-date and in control of the project cost and scope.

Data Models

The data model provides a sense of back-end database structure and object-relationships, built around conversations with the entire team to determine not just what is included but how users will interact with the available models: “An ACTIVITY represents a single timespan during which a user’s Qollector was turned on.” The resulting document also acts as a glossary of terms, to help the entire team communicate consistently and write code that integrates smoothly.

Communication

Before diving into process details, a word about communication. At the beginning of each project, we establish a communication system for designers, developers, and clients – a shared Slack channel for daily communication and a schedule for weekly video meetings. User stories are prioritized in Pivotal Tracker and contain scope goals and a task list.

To establish color patterns for QuarqNet, OddBird designers started with the existing brand colors and selected related user interface colors. These colors were communicated via Pivotal Tracker and coded as Sass Maps to establish front-end development patterns as well as an automated “living” style guide.

User Story

OddBird’s user experience design and development process always begins with a user story, written from the perspective of a single user. One of the very first user stories on the list for QuarqNet was: As an athlete, I can view my activity (map & data).

Initial Sketches

initial sketch of activity map and data

Because of our focus on users, OddBird’s development process for each user story begins with rough sketches showing the flow of a specific user through the content. The athletes using QuarqNet needed easy access to the map of their route as well as the activity data. This initial sketch displays the map and activity details together in a single view. No clicking necessary to access the most useful information on both mobile and larger screens.

Hi-Fi Mockups

After the design direction for a user story is approved, we create static or interactive mockups, often using Adobe XD. These mockups allow us to experiment with brand implementation as well as clarify user flow and interaction – identifying sticking points and iterating quickly. In conversation with Quarq, we worked to create a simple, scannable layout for the activity data. We don’t linger too long on this step or attempt pixel perfection, as new UX problems nearly always present themselves during implementation.

Implementation

Additional UX design changes happen during implementation as we begin to interact with the new features in the context of the browser. Whether working with our own internal developers or partnering with external developers, we maintain a tight a feedback loop between designers and developers as well as the clients at this stage. We have frequent video calls to demo, discuss, pair, and re-design features. For this user story we improved the dotted line, font size, and spacing of the activity data within the browser.

User Story

Our process is agile and iterative, aiming to deliver usable functionality quickly and in small increments. The faster our work gets in front of stakeholders and alpha-test users, the faster we can make adjustments and deliver exactly what’s required, even as feedback along the way alters the project requirements (which, in our experience, it always does).

As we tested implemented features with QuarqNet users, we identified bugs and user flow issues. The activity data box had become quite complex. The same box displayed activity data, a list of past activities, and more. During testing, users were not able to move quickly between the pieces of information they needed. Plus, the tab navigation we created hid too much of the map on mobile screens, a no-go for our active QuarqNet users. A new user story was born: As an athlete, I want to move quickly and easily between activity list, data, and map.

Sketches

Back to the sketch pad. The new proposal? Clarify wording, add a collapsed view, make the tabs more compact, and move navigation to the bottom of the activity box.

Interactive Sketch

For this core user experience interaction, our designers fleshed out the proposal further with a cross between a sketch and an interactive mockup. The blue boxes below represent click targets and demonstrate the user flow between activity list, data, and collapsed views. Play with the interactive InVision sketch.

Hi-Fi Mockup

A hi-fi mockup added further detail, defining colors, shadows, icons, and other visual clues to improve user comprehension of the new flow.

Implementation

After minor design tweaks in the browser, we had our solution!

Recent Case Studies

  1. School schedule grid
    Case Study post type

    TimeDesigner

    Whole-School Design Thinking & Scheduling

    TimeDesigner helps school teams rapidly create multiple scheduling scenarios from various perspectives, and plan ahead for future iterations. OddBird helped Tegy plan, design, develop, launch, and maintain their school scheduling web app using CSS Grid and custom property wizardry on the front-end, and well-tested Django/Python on the back-end. Currently, the…

    see all Case Study posts
  2. Illustrated game question about which font is most calligraphic
    Case Study post type

    Typographic Superpower Game

    A meditation on typography

    A meditation on typography, Adobe Fonts’ Game allows players to choose the fonts that they feel apply best to different scenarios. Players’ input helps Adobe Fonts continue to improve on their new browse-by-tags feature. We worked closely with Adobe to create animated & interactive illustrations using GreenSock, NuxtJS, and CSS

    see all Case Study posts
  3. CoachHub's services and platform demos
    Case Study post type

    CoachHub Application

    Responsive platform for integrated health coaching

    A custom application we designed and developed with the ORCAS team – integrating their suite of self-management tools. We built in support for video chat, in-app messaging, public Q&A, webinars, file sharing, health assessments, and more. The app has been used internally by the US Coast Guard, US Military…

    see all Case Study posts