Product Design
SWIM'Z

Overview

Design a wearable app for swimmers that tracks exercise, provide reports, and give feedback about pace, heart rate, laps, duration, and calories burned during activity. The app link to a mobile app with detailed overviews of a swimmer’s data.

Swimmers have the ability to create training plans for different levels of swimmers, share data, challenges, and training plans with friends and community.

Design Process

I’ll be using the Design Thinking process. I’ll conduct a research to understand the market. I’ll create a user persona, a user flow and I’ll translate everything into wireframes, and high-fidelity prototypes. I’ll then conduct a design-test-feedback loop to improve the outputs. And handoff everything to the developers with a separated Design system and ready to production design files.

designprocess

Understanding the Users

I interviewed two people (didn’t have much time to interview more) but got the most of it since one of them is a swimming coach. The other person used to track data off the pool (run and fit tracking)

From their answers I got a better understanding about their experiences and I came up with a list of goals and needs. Most of the elements are listed below.

  • Wearable have to be minimal (increase resistance while racing).
  • They both have used wearable before.
  • The swimmer always wanted to track heart rate but was never able to do it. (lack of apps).
  • Hard to check data while swimming.
  • Wants all in one tracking solution (wearable + phone app)
  • They Want an intuitive history.
  • Wearable for training only.
  • Wearable that lasts (devices get deteriorated with Chlorine).
  • Able to make smart workout adjustments.

Persona

Based on people I interviewed, I quickly designed a persona to reflect the pain points and the goals of the user.

Understanding the Users

All the previously mentioned research helped me understand John’s needs. From those information I started to grow a list of what will solve my user’s problem. Here are some of the ideas that I came up with.

  • Single All in one app that synchronize the wearable device with the phone and the desktop one.
  • Ability to track specific swimmers data like Oxygen, resistance, pressure…etc.
  • Small and waterproof device that lasts longer with the chemicals of the swimming pool.
  • Motion gesture, Audio notifications, screen brightness to be able to read data while swimming.
  • Well designed training history and notifications for the off pool data studies.
  • Community trainings and user connected app to interact with other swimmers and coaches.
  • Gamification to help users get motivated.

User Flow

Now that I have everything, I started putting the pieces of the puzzle together in order to create a full vision of the app map. the flow depends on the persona’s scenario but the process must be intuitive in order to achieve the user’s goal.

👇 Here is the link to navigate in the flow on FigJam

Wireframes

I start wireframing on figma. Starting with the home screen helped me to figure out what layout would be the most comfortable for users and how to structure information.

The wireframing stage helped me to outline the visual and typographic hierarchy of the high-fid user interface part as well as set the interactive zones and elements and plan transitions and interactions.

👇 Here is the link to check the Figma Wireframes

Icons & Color Schemes

High-Fidelity Prototypes

👇 Here is the link to navigate in the flow on FigJam

Mockups

👇 Here is the link to check the Figma Mockups

And here is the final result… Hope you enjoy it!

👇 Below is a Figma interactive prototype that you can play with and see interaction between screens.

Reflection

As I briefly mentioned before, this case study was constrained mainly due to having a limited number of participants and time. My objective was to empathize with swimmers and gain useful insights into their pervious experiences.

The next step would be to take all feedback from swimmers and use it to iterate the phone app (connected to the wearable), and also work on creating a design system to ease the development process.

Next Project
Logo Design
LOGOFOLIO