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.
Usability Testing of the Xplosion iOS app.
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.
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.
- 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.
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.
Usability Testing current iOS app
- 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.
Player Dashboard Before Redesign
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."
Personas are based on the information gather in user interview and online research about coaches.
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.
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.
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.
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.
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.
These wireframes I did in Sketch.
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.
- 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.
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.
Xplosion wasn't ready for these changes but they would make this app functional for a broad group of people.
- 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.