Dr. Scholl's 3D Inserts

An app and web experience that let’s you create custom made, 3D printed inserts that will be delivered right to your door.

Summary

Designed a multi-platform experience (iOS, android, and web) for Dr. Scholl’s 3D Inserts. With just a few photos on their mobile device, customers are able to get their feet measured and receive a pair of custom-fit inserts delivered to their door within 14 days.

My role

UX, UI, Front-end dev

Responsible for creating UX flows, wireframes, high fidelity prototypes, UI designs, user testing, and the front-end development of the e-commerce store front.

Challenges

Help customers understand the value of the product.

Build user testing prototypes for the capture flow when the UI relies on computer vision and real-time feedback on the mobile phone.

The Problem 😱

Insoles. When you read that word, you’re probably thinking of foot pain and inexpensive, off-the-shelf solutions. Not so trendy and ground-breaking, am I right? How can we switch gears and make it a high tech, innovative, and premium experience?

This is a story about how Dr. Scholl's--known for their inexpensive, mass manufactured off-the-shelf insoles--teamed up with a Vancouver tech startup to step up their game in the today’s e-commerce space with a multi-platform brand experience and a direct-to-consumer product.

User testing

The app was primarily built upon an existing app by Wiivv (my current workplace). We leveraged the existing experience (i.e. user stories, personas, data, design) by facilitating user tests with it, and gathering feedback that would further improve the ux for the Dr. Scholl's app. We discovered a few pain points in the user journey. We carried out an A/B test for the user testing sessions in order to explore which option carried the least amount of friction.

By the way, this emoji: 😕 = pain point.

Pain points of Flow A

  • With the carousel onboarding, users found it unengaging and just skipped through it. There were 5 slides, which is a lot to go through. Users questioned us with "How do the insoles get made?" as a result of skipping the slides.

  • There was some confusion and frustration with the foot photo capture process. The main concern we gathered from our users was: "Am I even doing this right?"

  • When it was time to create their account, the common concern we gathered here was: "Why do I have to make an account?"

A better understanding with Flow B

  • Users who tested this flow got the gist of what the product value and benefit is all about even if they skip reading the content--there's a short brand experience video that loops in the background.

  • They understood right away how the custom fit products were made after being onboarded with the photo capture process. The account creation to save their foot profile made sense to them.

  • The photo capture process itself improved after going through a few iterations. We designed it to boost the users' confidence so that they won't question too much about the quality of their photos. More on the ux/ui improvement of this feature below.

Exploring camera leveling concepts

During the top-down photo capture process of each foot, an important step to ensure the quality of their photos is to have the users level their phone so that it's parallel to the ground. I came up with a couple of concepts with my Design Lead, and we mocked up static prototypes to get quick feedback from a few test users.

We had positive feedback with the crosshair concept. Our test users understood that the crosshair needs to go inside the circle target. With the corners concept, there was misinterpretation--our test users thought that they had to match the corners of the paper to the level-detection corners--which wasn't the case. There was also a sense that the margin for error is too small with the corner concept.

The final design of the leveler

We moved forward with the crosshair leveler. My Design Lead and I worked with the computer vision team and mobile app team to create a working prototype for more test users to interact with to further refine the UI for the final design.

Design and front-end development of the Shopify storefront

While working on the web design with another UI designer, I was responsible for making sure the look and feel of the layouts reflect the Dr. Scholl's brand and that the design elements were in line with the app. Elements included type, colors, imagery, etc. I also prepared pixel-perfect design comps and documentation as part of the design-to-development handoff.

I took over the front-end development of the Shopify theme when our contract with an external developer ended. While the contractor was on the project, I was responsible for overlooking the development progress and providing design feedback. I helped out with building the theme of the storefront using my own experience with HTML, CSS, and Javascript--also learned a little bit of Shopify's Liquid syntax along the way.

Shop home:

Product page:

Cart:

Launch and beyond

It felt good to make the initial launch for both the app and website, but the design and development isn't quite done yet. We're still tracking data on the app and website using tools suchs as Mixpanel and Google Analytics to gain insight on conversion and drop-off rates. We'll still be iterating and testing designs, so stay tuned for updates!

My takeaways from this project:

  • Never underestimate the power of a hi-fi prototype for users to test with. Especially when it comes to something that is supposed to work real-time in the app (referring to the camera leveler).

  • While I enjoyed building and styling the shop theme, the work would have been a better experience/more efficient had there been a process put in place--I was making updates/changes/bug fixes on the fly with no insight on priorities.

  • When developing on a platform that I'm not 100% familiar with (i.e. Shopify), buffer in some time to learn the platform-specific syntax and workflows. This will save time as the project comes close to finishing.

Next project: Illustration >

Let's chat!

Coded with a matcha tea latté in my hand. 👩‍💻☕

© 2019 Mary Ngo