SKIIN Troubleshooting Guide

What is SKIIN?

SKIIN creates clothing that connects you to your body, your community and the world around you to help you live healthier, stay safer, and achieve more.

 

Challenge

How can we empower users of the SKIIN garment to troubleshoot their own garment and app connectivity problems?

Design Touch Points

Mobile App Design

Solution

The troubleshooting guide provides a way for users to accurately visualize their app-garment connectivity issues while providing contextual solutions to troubleshoot their problem.

 

The Problem

The current troubleshooting method needs to be improved to make it more intuitive for users to diagnose the specific connection issue they have and also troubleshoot it easily themselves.

 

OLD DESIGNS

 

An Internal Audit

AUDIT - ERRORS

Collaborated with software support team to gather data on the different types of connectivity issues that could occur within the app as well as the recommended solutions.

 

Excel Doc showing the different error types, error messages and possible solutions

 

Key Takeaways

  • Errors categorized into wifi, phone, bluetooth, pod and garment

  • Redirects user to General FAQ page

  • No specific actionable steps to troubleshoot issues

 

Analyse the Old Troubleshooting Flow

 
 

Key Takeaways

  • Steps to troubleshoot could be made shorter

  • Process could be made easier

 

Create Design Principles

  1. How can we make this glanceable?

    • Users can easily see all the solutions to their problems

  2. How can we make this contextual?

    • If the connection is a wifi problem they can clearly see what it is

  3. How can we make this intuitive?’

    • Using icons/language that is familiar to the user

 

Designed Wireframes

Iteration #1

The first iteration was about placing the different connectivity components in an easy-to-see layout and finding solutions for our requirements. Initially, our focus was on finding a good way to display the connectivity relationship between all the different connectivity components.

 
 
 

Key Takeways

  • All connectivity components not visible in the horizontal view

 

Iteration #2

The second iteration focused on displaying the connectivity components in a layout easily glanceable, and visible to the user. Also how to display all the garment solutions in an easy to view

 
 
 

Final Designs

These final designs are from Option C which met all the 3 design principles identified before designing the wireframes of being glanceable, intuitive and contextual.

 
 

Result?

Since the product was still in its early phase of launching to the public, we tested these out with our test participants on UserTesting.com for a period of 2 weeks and noticed:

  • A significant drop in emails to the software support team by about 50%

 

CREDITS

Codesigned with: Danielle West (Graphic Designer), Cheryl Tsui (Product Manager)

Responsive Web Design

Connecting people to local events and hospitality businesses.

Thanks for stopping by!

Here’s some more work

Mobile App Design

Empowering patients to take control of their app troubleshooting experience

Mobile App Design

Enabling remote patient symptom monitoring