Case Study

The Stasis Insole App

Overview

This is the Case Study for the creation of the Stasis LLC Insole Companion app. I was the lead UX Designer and Researcher working on the project and I worked with a mix of SDEs, Engineers, and Data Scientists over a 6 month timeline. Designs were purely made in Figma.

Includes

This case study includes User Research and Testing, Analysis, User Journey, Wireframes, a Redesign, and my overall reflection on my own work. The goal was to design an app centered around self-reflection that would help users harness the Stasis Insole to improve their golf game

Project Background

Project

Background

Who is Stasis?

A Startup: Stasis LLC is a UC San Diego Student based start-up who is focused on making balance tech.
Focused on Balance: Our flagship product is an insole that uses Machine Learning Algorithms to improve the balance of its users.
Focused on Golfers: As of now, we are specifically interested in applying our technology to Golfers.
Founding Designer: I, as the founding designer and researcher, was tasked with creating the companion app for the insole.

User Research

Recruiting Participants

Our group lacked connections with golfers, so I was asked to come up with a plan for finding golfers we could interview.

Creating a Flyer: I created a general flyer that offered participants a $5 Amazon Gift Card if they took the time to answer our questions.
Posting the Flyer: The goal was to get as many responses as possible. We posted on sites like reddit (r/golf), Facebook pages, and sent it to the golfers we did know.
Filtering with a Form: In case of overwhelming feedback, we used a Google Form to help us better pick which users would be most relevant to our Research.
Conducting Interviews: Because of the prior steps, we felt that we had a representative sample group of our user population.

Recruiting Participants

Our group lacked connections with golfers, so I was asked to come up with a plan for finding golfers we could interview.

Creating a Flyer: I created a general flyer that offered participants a $5 Amazon Gift Card if they took the time to answer our questions.
Posting the Flyer: The goal was to get as many responses as possible. We posted on sites like reddit (r/golf), Facebook pages, and sent it to the golfers we did know.
Filtering with a Form: In case of overwhelming feedback, we used a Google Form to help us better pick which users would be most relevant to our Research.
Conducting Interviews: Because of the prior steps, we felt that we had a representative sample group of our user population.

Interviews:

As the only person on the team with a user-centered background, I made it clear to my group that we needed to include the user every step of the way.

Major takeaways:

Score above all: Even though our device is not mainly concerned with the user's score, it is a necessary part of the User's priorities.
Reflection is necessary to improvement: Users wanted a way to look back on previous swings. They need to be able to see what they did wrong so that they can fix it in the future.
Improvement needs to be visualized: Building off of the last point, users want to be able to see how much they have improved. They need access to extensive logs of their swings that need to have every swing ever done with the app.

Interviews:

As the only person on the team with a user-centered background, I made it clear to my group that we needed to include the user every step of the way.

Major takeaways:

Score above all: Even though our device is not mainly concerned with the user's score, it is a necessary part of the User's priorities.
Reflection is necessary to improvement: Users wanted a way to look back on previous swings. They need to be able to see what they did wrong so that they can fix it in the future.
Improvement needs to be visualized: Building off of the last point, users want to be able to see how much they have improved. They need access to extensive logs of their swings that need to have every swing ever done with the app.

Interviews:

As the only person on the team with a user-centered background, I made it clear to my group that we needed to include the user every step of the way.

Major takeaways:

Score above all: Even though our device is not mainly concerned with the user's score, it is a necessary part of the User's priorities.
Reflection is necessary to improvement: Users wanted a way to look back on previous swings. They need to be able to see what they did wrong so that they can fix it in the future.
Improvement needs to be visualized: Building off of the last point, users want to be able to see how much they have improved. They need access to extensive logs of their swings that need to have every swing ever done with the app.

Competitive Analysis

Most of our Pre Design Phase was conducted during the Pandemic, so Competitive Analysis was used to fill holes created by this barrier.

Major Takeaways:

We checked a number of different competitors that could give us insight into the needs of golfers.
This not only filled holes in our contextual inquiry caused by COVID, but also confirmed some of interview findings.
Our major takeaway was that we needed to broaden our scope so that the golfer got an all encompassing app. Before this, we had tunnel vision on creating an app that was solely to control the accompanying insole. However, we found it was best to create an app that could seamlessly integrate into a game of golf by keeping score, showing improvement, etc..

Competitive Analysis

Most of our Pre Design Phase was conducted during the Pandemic, so Competitive Analysis was used to fill holes created by this barrier.

Major Takeaways:

We checked a number of different competitors that could give us insight into the needs of golfers.
This not only filled holes in our contextual inquiry caused by COVID, but also confirmed some of interview findings.
Our major takeaway was that we needed to broaden our scope so that the golfer got an all encompassing app. Before this, we had tunnel vision on creating an app that was solely to control the accompanying insole. However, we found it was best to create an app that could seamlessly integrate into a game of golf by keeping score, showing improvement, etc..

Competitive Analysis

Most of our Pre Design Phase was conducted during the Pandemic, so Competitive Analysis was used to fill holes created by this barrier.

Major Takeaways:

We checked a number of different competitors that could give us insight into the needs of golfers.
This not only filled holes in our contextual inquiry caused by COVID, but also confirmed some of interview findings.
Our major takeaway was that we needed to broaden our scope so that the golfer got an all encompassing app. Before this, we had tunnel vision on creating an app that was solely to control the accompanying insole. However, we found it was best to create an app that could seamlessly integrate into a game of golf by keeping score, showing improvement, etc..

Synthesizing and Presenting

Insights

Synthesizing and Presenting

Insights

Sharing Findings with the Team

With such a diverse team, it was important that we came together after the user interviews to organize and personalize the findings.

Notes & Transcripts: After each User Interview, I went back and watched the recordings. From there I took copious notes, as was focusing on the user during the interview.
Personalized Takeaways: The team consists of a mechanical engineer, data scientists, and computer scientists. With such a diverse team, it was important for me to share actionable insights with each field of expertise.
Personas: Personas helped me and the team empathize with our users and also organized findings from the user research stage.
User Journey: As seen in the diagram below, the whole team came together to make a User Journey Map. This helped us to synthesize our own perspectives and helped us agree on how the user should interact with the product.

Sharing Findings with the Team

With such a diverse team, it was important that we came together after the user interviews to organize and personalize the findings.

Notes & Transcripts: After each User Interview, I went back and watched the recordings. From there I took copious notes, as was focusing on the user during the interview.
Personalized Takeaways: The team consists of a mechanical engineer, data scientists, and computer scientists. With such a diverse team, it was important for me to share actionable insights with each field of expertise.
Personas: Personas helped me and the team empathize with our users and also organized findings from the user research stage.
User Journey: As seen in the diagram below, the whole team came together to make a User Journey Map. This helped us to synthesize our own perspectives and helped us agree on how the user should interact with the product.

Sharing Findings with the Team

With such a diverse team, it was important that we came together after the user interviews to organize and personalize the findings.

Notes & Transcripts: After each User Interview, I went back and watched the recordings. From there I took copious notes, as was focusing on the user during the interview.
Personalized Takeaways: The team consists of a mechanical engineer, data scientists, and computer scientists. With such a diverse team, it was important for me to share actionable insights with each field of expertise.
Personas: Personas helped me and the team empathize with our users and also organized findings from the user research stage.
User Journey: As seen in the diagram below, the whole team came together to make a User Journey Map. This helped us to synthesize our own perspectives and helped us agree on how the user should interact with the product.

The Design Phase

Sketching

Purpose

At the beginning of my design process, I created sketches to summate everything learned in the user tests and competitive analysis.

Used Pencil and paper
These sketches show the 3 major pages of the Design: the Feed, Insole Page, and Device Settings respectively.
The Feed: A collection of past games that can be looked at anytime. This was added because users were adamant about being able to reflect on past games and strokes.
Insole Page: This is the main companion page to the insole. From here the user will be able to record swings and look at a heatmap of their current foot pressure.
Settings Page: This page will allow the user to customize their experience to their liking. It will include settings such as vibration intensity, battery levels, pairing, etc.

Sketching

Purpose

At the beginning of my design process, I created sketches to summate everything learned in the user tests and competitive analysis.

Used Pencil and paper
These sketches show the 3 major pages of the Design: the Feed, Insole Page, and Device Settings respectively.
The Feed: A collection of past games that can be looked at anytime. This was added because users were adamant about being able to reflect on past games and strokes.
Insole Page: This is the main companion page to the insole. From here the user will be able to record swings and look at a heatmap of their current foot pressure.
Settings Page: This page will allow the user to customize their experience to their liking. It will include settings such as vibration intensity, battery levels, pairing, etc.

Lo-fidelity Prototype

I created wireframes to further flesh out the design ideas discovered in the user research and sketching parts of the design process.

This wireframe shows about a dozen different pages and the interactions between them.
Lo-Fidelity: This was the first prototype that was made for this project, so the goal was to focus more on interactions and layout.
Feedback from Sketches: User testing showed that there needed to be a visual analysis of the stats so that was added to the design (0:03-0:10 in video).
A cleaner layout. Information is easier to digest.
Used Figma

Lo-fidelity Prototype

I created wireframes to further flesh out the design ideas discovered in the user research and sketching parts of the design process.

This wireframe shows about a dozen different pages and the interactions between them.
Lo-Fidelity: This was the first prototype that was made for this project, so the goal was to focus more on interactions and layout.
Feedback from Sketches: User testing showed that there needed to be a visual analysis of the stats so that was added to the design (0:03-0:10 in video).
A cleaner layout. Information is easier to digest.
Used Figma

1st Hi-Fidelity Prototype Iteration

UI Design

Once I tested out all usability mistakes, I started designing a hi-fidelity prototype in Adobe XD

Clean Design: The stakeholders in the project were adamant about making a design that was both easy to use and easy on the eyes.
Branding: All of the colors and fonts used were based on the style guide that I had made for Stasis LLC.
Designing for IOS: This is the first time I used the IOS style guide. I am currently still working to make sure everything is close to pixel perfect.
The Users: This companion app was designed with user growth as the centerpiece. Because of the user input given throughout the process, my goal was to create an app where users could reflect and improve their golf skills.

UI Design

Once I tested out all usability mistakes, I started designing a hi-fidelity prototype in Adobe XD

Clean Design: The stakeholders in the project were adamant about making a design that was both easy to use and easy on the eyes.
Branding: All of the colors and fonts used were based on the style guide that I had made for Stasis LLC.
Designing for IOS: This is the first time I used the IOS style guide. I am currently still working to make sure everything is close to pixel perfect.
The Users: This companion app was designed with user growth as the centerpiece. Because of the user input given throughout the process, my goal was to create an app where users could reflect and improve their golf skills.

User Testing

User tests were conducted after every iteration and changes were made based on the testing results

My goal was to find outstanding design flaws and to fix them in the next iteration.
Unfortunately, because of COVID, there were some limitations on who I could test. Most of the user tests were conducted with people over Zoom.
Most of our user tests were focused on finding usability errors. For example, one user talked about how they wanted to see the date for every game of golf. This change was made in the next iteration.
User testing was an ongoing process and we involved customers as often as possible.

User Testing

User tests were conducted after every iteration and changes were made based on the testing results

My goal was to find outstanding design flaws and to fix them in the next iteration.
Unfortunately, because of COVID, there were some limitations on who I could test. Most of the user tests were conducted with people over Zoom.
Most of our user tests were focused on finding usability errors. For example, one user talked about how they wanted to see the date for every game of golf. This change was made in the next iteration.
User testing was an ongoing process and we involved customers as often as possible.

2nd Hi-Fidelity Prototype Iteration

What did we focus on?

With the First Iteration, the focus was to create an early days prototype that we could show to research participants. With the second prototype we focused on:

Feedback from Usability Testing: As mentioned, our findings from user testing consisted of adjusting minor errors and adjusting some of our user flows.
Content Design: The first prototype consisted mostly of place holders, so we felt it was time to begin filling in the content.
Adding more features: Since we were happy with the feedback from the first set of user interviews, we decided it was time to add more features. As seen, there is now a profile page, filter, and alternates to the heat map.
Minor UI edits: As with basically any prototype, there were a few bugs that needed to be fixed.

Wrapping Up

My major takeaways

This project was influential in my growth as a designer because I was the sole UX Designer, Researcher, and Visual Designer.

The most major takeaway for me was to trust myself. As the founding designer at this startup, I really did not have other designers to lean on.
Since we are a small startup, I was essentially working on the design alone. Therefore, I prioritized feedback from users and fellow group members so I did not get tunnel vision. I cannot stress how essential this was for me!

Working on this project taught me how to work in a startup. It was fast moving and I had to wear many different hats, but I enjoyed every second.