Published on | Prototyping: From UX to Front End — Medium Pontus Persson

As the Lead UX Designer on the adidas GLITCH app, I followed it through all the way from the pitch to releasing version 2.0.

GLITCH was a project that challenged everything adidas normally does; A new type of interchangeable boot, launched without a big football star, not available at any of their stores but only available through an app. All this combined with an audience of young urban footballers makes it a dream project for any app designer.

If you want to read about how we made it, keep reading. If care more about the result and impact, scroll to the bottom.

<a href="https://medium.com/media/59eed61ce73853cc84d8939aa43db3a2/href">https://medium.com/media/59eed61ce73853cc84d8939aa43db3a2/href</a>

We knew we couldn’t just do a normal ecommerce app, we needed to create something special. We wanted to create an experience that goes beyond just an app, trying to bring the real world into your phone and the interactive world into reality. We wanted you to try out and experience this new type of boot through the screen of your phone before you hold it in your hands.

Pitch

In just 3 days, Pablo (ECD), Wojciech (AD/Lead designer) and I (Lead UX designer) worked on the pitch in hope to win the adidas GLITCH project. We went through the brief, analysed the requirements and challenge and created a plan. Pablo gave us his vision and Wojciech and I locked ourselves in a tiny room without windows.

Our initial sketches

First day, we drew an end to end user flow, reiterated it a few times to make it flow free of resistance. We did the same for all the other key features before we drew each screen on a piece of paper and put them up on the wall.

Second day, while Wojciech worked on the visuals, I created digital wireframes of our screens and materialised the low fidelity interactions we came up with the day before. We caught up with Pablo every couple of hours to make sure we weren’t drifting into the wrong direction.

Third day, Wojciech started to colour in my grey and blue boxes and circles, I worked on removing clutter and simplifying each screen. When things started to look good, we ordered a few pizzas and cracked open a beer (it was Saturday after all), and created a clickable Marvel prototype.

A month after Pablo worked his magic in the adidas office in Germany, we had won the project. Wohoo!

Discovery phase

One of the delights working with clients like adidas is all the information you get for free. As far as the discovery work we had to do didn’t go much further than sitting down with their internal research and customer personas. That together with the strategy work iris had done with almost 300 “micro-influencers”, which we also gained access to was extremely valuable.

After digging into this goldmine of information, we had an extremely clear view of our audience and so, started the hard work of designing the application.

Definition & validation phase

We had done a lot of legwork during the pitch, but that now needed validating and be built upon.

Together with the adidas product owner Hans-Eric and his team, we set to deliver a clear overview of the entire application before delivering full wireframes, specification and in some cases prototypes, component by component along the project.

My linear flow turned into an uncontrollable beast when adding more and more states and conditions, so I ended up creating a circular flow for each state, which I wrote an entire article about.

The 4 states a user go through in the GLITCH application

Once I had the application overview, I started digging into the wireframes. Normally I would start in order of development but in this case we knew that the navigation and the product selector would dictate what we do for the rest of the app.

We had ambitious plans for our product selector, a normal product grid wouldn’t cut it. Since the boot is only available through the app, the consumers first impression of the boot is on the screen. We wanted this screen to be highly interactive with the boot in centre of attention. I had this idea of turning the boot into the interface of this key screen (I wrote an article about this as well).

The first sketches of the nav structure and the ambitious product selector (which we called configurator back then).

We designed this screen with our users in mind. The application is built with react native which at this time hadn’t been tried on many elaborate interactions. The interactions we ended up building into the product selector really pushed the technology into new pastures thanks to our fantastic developers at POSSIBLE Budapest. We stole many of their evenings and weekends with our vision of this screen, without them we wouldn’t be here today.

Together we put a lot of effort into the product selector, it was bold and ambitious to go down that road and it needed to be validated before burning more time and resources. The Budapest team built the prototype below that we then validated with around 20 influencers.

<a href="https://medium.com/media/2772e6a0c1bd3f7f9efe8d1c72b7eeb7/href">https://medium.com/media/2772e6a0c1bd3f7f9efe8d1c72b7eeb7/href</a>

iris hooked us up with a room and influencers. At the end of the day, all of our participants went over the moon when they saw it and we knew we were on the right track. We did find that, while splitting the view to be able to swipe both innershoes and outerskins was a cool feature, most users found it a bit tricky to operate.

We solved that by only letting you swipe between outerskins until you separate it from the innershoe. You are then able to swipe both individually, as seen in the final delivery. Later on we added indicators at the top to isolate the innershoe completely.

Me having a coffee half way through a full day of validation testing.

Going into the sprints

Once we had delivered the main blockers that would allow us to offer the experience we wanted, it was about time to start deliver work that would help the developers build this app on time.

We had already defined the high level user flows so now we had an exercise of turning that into actual screens and requirements before our hands. We worked closely with the adidas team through the wireframes and acceptance criteria for each feature and edge case.

To go over every single feature would turn this case study into an entire book, so I’ve called out a few key wireframes below. I designed over 250 unique screens for this app and probably went over 2–5 iterations of each single one before ending up with what we were all happy to go live with.

A few key screens

Launch

6 months after we drew the first line on a A4 paper, we were ready to go live.

We had designed an app with over 250 screens including all states and edge cases for both iOS and Android.
We had built a back office for the adidas city managers.
It was all connected to the newstore ecommerce platform and to CitySprint who would deliver all London orders within 4 hours.
We were connected to 2 payment providers.

You can imagine the amount of testing needed to assure the quality of this beast. For over a week a large part of our team bunkered up in CitySprint’s warehouse to test it end to end. It was a week full of sweat and tears but we came out on top ad were able to release a bug free application to Apple App Store and Google Play Store on time.

<a href="https://medium.com/media/f160f5a49f3bc9fea7eb0cc006a5d723/href">https://medium.com/media/f160f5a49f3bc9fea7eb0cc006a5d723/href</a>

Impact

We launched without a single ad, no big star endorsing it, no traditional PR and it wasn’t available in stores.

We gave access to the almost 300 influencers that helped us develop the product and the app and gave them 5 invite codes each. It spread through London like a wildfire in a dry bushland. People were selling invite codes on ebay, influencers spread it all over social media and publications picked up the story without a press release.

Most of all, the below stats exceeded our wildest dreams:

This was written from a UX point of view and there is so much more to say. Every single person in the team listed above played a hero role in this project. It feels like we got the full potential out of each and every team member

I’ve deliberately not gone into detail because it’s just too much to cover. If you want to hear more or see more wireframes, user flows or fancy diagrams, feel free to contact me or read my other articles that go into more detail.

Peace out!

P.S. I’m currently available for contracts

UX Case Study: adidas GLITCH was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Case Study: adidas GLITCH

Cool stuff, every week

More Articles