Xplosion iOS Redesign

Banner Image 1.png
 

Xplosion iOS app Redesign

Using user interviews, SME interviews, and domain research we refined the data visualization. I also worked with the Internet of Things to create better interaction design for users. I did the initial sketching for all of the screens and later wire framed the Create Team and Add Player flows.

 
IMG_20171102_200351.jpg

Usability Testing of the Xplosion iOS app.

 
IMG_5688.JPG

Research

 
 

Initial Research Summary

Meeting with the CEO and COO of Xplosion gave us the vision of they have for their product. The goal of this project would be to present the tracked data in a user-friendly ways to coaches.

Coaches have the most influence on players daily practice habits, so Xplosion wanted to target coaches as the user group.

Domain research verified that targeting coaches would give Xplosion a competitive edge. I also used competitive analysis to see how other companies display their data points.

To understand the information metrics we're working with, I did a content inventory of the Xplosion app. To better display the data I did a competitive analysis to determine how other app report data metrics. I compared this information to the content inventory for Xplosion. The results gave us a clearer idea of the industry standard for data metrics.

IMG_20171031_121733.jpg
 

 
 

Data Visualization Expert Interview

Data Visualization expert, Craig Fryar from Tableau, met with us to go over best practices for displaying data visualization on mobile.

Takeaways:

  • Only show one metric graph per screen. On Mobile, it becomes overwhelming to do more than that.
  • Discovered the essentials metrics for coaches
  • Don't use more than three visualization charts at a time

Through our meeting with Craig, I add series of questions in the user interviews. These new questions focused on seeing which metrics were most important to coaches and provided valuable information later in the design process.

IMG_2067.jpg

 
 

User Interviews

Visiting batting cages and training facilities from South Austin to Georgetown for user interviews we were able to reach our target users group.

The coaches ranged from t-ball through college level. These seven interviews gave us examples of the best methods they use while coaching.

It became apparent that if I could display the data with more context and clarity, it would be sticker.

User interview summary

IMG_2046.jpg
 

 
 

Usability Testing current iOS app

Positive Findings:

  • The app is an impartial communication tool with players
  • Viewing individual players beside his or her peers
  • The ability to record more than one body metric

Coaches Had Issues with:

  • Navigation and that the data was difficult to read
  • Confused by unit signifiers as no unit of measure was given
  • Weren't using the feedback mechanism of good/bad
  • Data on the team dashboard overwhelmed them.
  • Felt like a leader-board was counter-productive

I needed to narrow down the information that coaches saw at a glance and provide better navigation. But still, let them adjust the data between per players. I decided to look for ways to provide more user freedom.

 
IMG_1977.PNG

Player Dashboard Before Redesign

 
 
IMG_2104.jpg

Planning

 
 

Personas

Both the professional and the parent coach have different wants, goals and pain points that change they interact with the app. So I showcased those in the personas.

There are also two different coaching styles that either persona might use. The data-driven coach and the hands-on coach.

Data driven coaches to want to show fact to players giving a stable baseline for change. Hands-on coaches want to show each players how to improve based on their communication needs.

Both coaching style have a firm belief that each player is different and their goal is to bring each player to their own "ah-ha moment."

Primary Persona

 

Secondary Persona

Personas are based on the information gather in user interview and online research about coaches.

 

 
 

Sitemap

As part of the research, I created a sitemap of existing iOS app. I found a lot of screens that could combine for better accessibility of the app.

The main function of the app, connecting the sensor, was hidden within a submenu. Also the iconography was not clear labeled making it even harder for user to connect the sensors.

Sitemap for old version of the app

Sitemap for the redesign

Navigation is more transparent allowing the user direct access to the focus point of the app. 

 

 
 

Internet of Things

While planning the app, we realized that a more in-depth knowledge of how the sensors and app communicate was needed. We set up a live demo with the client to see how the sensors work with the app.

During the demo, I found that good/bad button, was design because the app needs a way to capture data in segments to measure swings. Currently, a capture button needs to bring each new swings data into the app.

The next phase of development is planned to be a move to streaming data from the sensors to the app as a matter of course. So we got the go ahead to design for streaming and not the current data capture method.

Screenshot_2017-11-03-16-02-15.png
Hannah speaking to Isis .JPG
 
P5 - Benmark 1 - Mockup.jpg

Design

 
 

Interaction Patterns and Sketching

I added an option to rank the body metrics coaches wanted to see first while they where creating a team. The team dashboard would display only the select body metric as well. Coaches could select a target range for each player when adding players.

Using the inputs entered by coaches, I too created a new format for the team dashboard. Only one  metric would be displayed, which would be the last swing. Also, a circle would outline it showing how close each player was to their target number.

IMG_2033.jpg

I used a whiteboard to sketch the interaction patterns.

 

 
 

Sketching and Wireframes

Making the record session feature the focal point of the navigation bar was necessary to keep the primary function of the app quickly accessible.

We decided as a team to kept the connect to sensors options the same and to add the ability to select team members on that screen. Users could then hit the Start Session button to start recording data and Ends the Session with the same button.

Sketches

Early Wreframe

 

 
 

Style Tiles

Mixing the color pallets from the current iOS, and Android apps I brought out elements they wanted. Such as Motivation, Movement, Bold, & Energy. It's named Xpotivation.

Klavika Medium Italic Headlines and gradient colors convey a sense of motivation, bold and energy. To balance out the bold orange's I used a navy purple for the text and a violet for the calls to action.  Also for balance, I used Heebo the list copy.

Style Tile

To provide Xplosion with options for a style guide, I did a style tile workshop with the client.

 

 

Final Mock-Ups

These wireframes I did in Sketch.

 
IMG_5439 2.JPG

Testing

 
 

Usability testing

While Usability Testing the new design, we traveled to batting cages from Austin to Georgetown and spoke to six different coaches. Using the InVision app gave coaches a more realistic experience of how the app could be used at practices.

Key Findings:

  • With the Create Team screen coaches where confused by choice, of selecting a default metric. They kept trying to skip creating a team without choosing a metric.
  • Wanted to know players position. (infielder, outfielder, etc.)
  • Slight confusion over what a session was. Once they clicked on it though, they had no further issues.
  • The language of the navigation bar confused them. They wanted to see data for the whole team under Team and only data about individuals under Analytics
IMG_5682.JPG
 

 
 

Iterations after testing

The language of the navigation bar was changed to say Players instead of Team and Team Charts instead of Analytics. Better identifying the use of each area.

Because coaches had such significant issues with the default metrics in the Create Team I had to rethink this flow. I got rid of the default metric. Also the player's ranges on the Add Player setup. Instead, I add a field to the player's position on that page.

These changes also removed the progress circle around the numbers on the Team Dashboard. A toggle menu at the top of the page allowed me to keep one number on this page at a time.

Create Team 1st Screen.png
 
 

 
 

Wrapping up

Xplosion wasn't ready for these changes but they would make this app functional for a broad group of people.

Future Iterations:

  • A Control Panel for coaches to change settings for already created teams and players.
  • A complete walk through flow for first-time users
  • More in-depth focus on the individual player data dashboard
  • A separate player interface so coaches can share data with players
  • More gamification within the interactions patterns. One place this could happen is the Record Session screen. It could enlarge beyond the navigation bar when pressed.  Then screen could then swing up from the navigation bar like a bat to fill the screen.