PROJECT
Footasylum Native E-commerce App
SUMMARY
I was head of design at an Agency when we were tasked with supporting Footasylum in their mission to drive sales and increase engagement
INTRODUCTION
Company background
As Head of Design within an agency, I was tasked with heading up the App UX and design for the leading sports retail brand, Footasylum. Although they already had a strong digital presence online, they were missing one key piece to their e-commerce plan, a native App.
Footasylum did have an app in the stores at this time, but it was just an iframe of their desktop website. This meant that their current App lacked any mobile UX, but it also was a barrier for sales, as the existing desktop checkout was nearly unusable on mobile. This was one of the main issues they presented us with when we all sat down together for the first time, in their offices in Rochdale HQ back in 2018.
DISCOVERY & RESEARCH
The challenges
The deeper we delved into conversations about the existing App, and what the plans for Footasylum were as a company, we uncovered more significant challenges that would pave the path for the product journey. ​
CHALLENGE ONE - WHITELABEL
Footasylum wanted to be able to white-label the App we were creating for them, to be used for their other sub-brands like Kings Will Dream and Footasylum Womens.
CHALLENGE TWO - EXISTING SYSTEM
With an existing website and CX structure, we had to ensure we were replicating and producing the correct user journeys, without compromising any mobile UX.
CHALLENGE THREE - DEADLINE
We had about 6 months to design and build this entire App, with a huge deadline for the App to be in the stores for the Black Friday/Christmas period.
DISCOVERY & RESEARCH
How did we get started?
To align our thoughts and gauge whether everyone was on the same page, I produced some quick design mockups. These proof of concepts showed some of the key features we had previously talked about and also some potential new ideas. I included two sets of every mock-up, one for the main client Footasylum and another for one of their sub-brands. This allowed the client to visually see how the white labelling was going to work and also to see some of their ideas come to life, for the first time.
DISCOVERY & RESEARCH
Scaling back the designs
With all this new-found knowledge, feedback on initial design concepts and our brains ticking away with ideas and solutions - we kicked off by sitting down internally and producing a sitemap. Although this is typically a web-based job, as mentioned above, we needed to ensure whatever we were producing on mobile, followed the existing customer journey of the website. This allowed us to visually connect journey to journey and begin to produce golden flows for our mobile wireframes.
​
From here, we discussed the many challenges we had to face and how we could plan the design and development process to cater for any inconvenience we may face along the way.
UX DESIGN
Getting down to details
Armed with user research, competitor research, user journey flows, our challenges, business goals, design concepts and a functionality doc - we proceeded into the next stage of the product journey, wire-flows.
Similar to any product, the wireframing stage began and soon enough we were able to produce a clickable wireframe to share with the team in Rochdale HQ. (using overflow - a user flow tool).
UX DESIGN
Fixing the checkout process
For an e-commerce App, the checkout section is one of the most important parts of the product - it makes or breaks sales. As mentioned above, the checkout process was one of the biggest pain points Footasylum faced when dealing with their mobile app. The current functionality was nowhere near were industry standard and it simply wouldn't be strong enough to support the traffic coming in through the native app, post-release. To tackle this part of the App, as a product team we spent a lot of time analysing the web flow vs what was currently on the App. This allowed us to fully understand where the App was going wrong, and what we needed to do to fix it.
This was a tough challenge because although we did deliver a working checkout, it was not exactly what we would have desired. There was a lot of legacy UX on the website that still needed to be replicated across the mobile app for consistency purposes. We agreed that in future phases, we would tackle the UX of the website and app flow together and provide a more fluent experience for our customers.
After multiple rounds of user feedback and iterations, we were happy that we had solved some issues within the checkout flow and made it usable. We were now comfortably in a position to begin overlaying brand design and beginning the process of white labelling the product.
UI DESIGN
Collaborating with the brand team
As a hugely established brand, it was no shock that Footasylum had an extensive brand doc for me to follow and gain inspiration from. However, there were no App/mobile-specific guides because this was the first time the company had put this much focus into this area of the business. It was ultimately down to me to take their existing guides and produce a cohesive document specific to mobile.
UI DESIGN
Bringing it all together
At this stage, we have been through multiple rounds of testing the wireframe prototype and are starting to overlay some of the brand work mentioned above. Colours and fonts began to be implemented alongside more specific components like buttons and input fields. Introducing these small UI elements allowed us to show off the Footasylum brand, for the cool and edgy nature that it is.
With this being a Whitelabel project, after each section of the main app was completed - we would move on to the corresponding section for the other sub-brands to ensure we were monitoring consistency and solving any issues that arose right there and then.
LOYALTY PROGRAM
One last thing... how about a loyalty program?
As the design and development of the build were in full swing with just a couple of months left before the deadline, Footasylum asked us how possible it would be to integrate their new loyalty program, into the App for launch. We were aware of what FA was planning to release, but never thought it was going into this first launch. Nevertheless, we knuckled down to figure out how to make it possible.
​
The Footasylum design team came on board to help produce designs for the new loyalty feature - Footasylum Unlckd. This was a huge help because it meant I could keep my focus on the main core App, albeit with some app-specific design advice here and there.
​
Once the feature was fully integrated and tested, myself and the FA Unlckd design team spent some time together figuring out how we could ensure that the user journeys between the core App and the loyalty feature were seamless.
PREPARING TO LAUNCH
Crunch time
This product did come with a lot of limitations, low resources and tight deadlines but this just meant we had to work harder, smarter and much more efficiently. So many late nights were spent in the run-up to release testing and bug reporting, It was all hands on deck. I sat in and amongst the development team, at our office and also in Rochdale, for weeks providing exactly what they needed and providing instant feedback on what they had developed. It was a huge team effort to get a working product, with most of the requested features, ready and available for launch.
​The App was ready and approved by QA days before our official deadline and was placed under expedited review. I'm pleased to say that we did manage to get a working product in the stores for Black Friday - even if it meant bug-fixing post-launch.
LAUNCH
Post-launch
For over a year after launch, we continued to collaborate on the mobile app producing new features and fixing user issues. Overall it was most definitely the most hectic project I've ever worked on, but it was very rewarding once it hit the stores.
​
💰 Footasylum managed to release the App to the Stores for their numerous brands in time for Black Friday, increasing their sales by a significant amount
​
📱 The Footasylum Unlckd loyalty feature was able to launch in time for the huge media events
​
🌟 The App Store rating went from 2.7 > 4.3
​
Although it has been quite a while since I last worked on the Footasylum App and it has evolved over the years quite a bit, please see links to the download the App here:
“Apposing understood our challenges from the outset. Bringing together their creativity, knowledge and skills they worked closely with us to deliver on our vision, whilst all the time guiding us with their expertise. Their understanding of mobile and digital products is unparalleled, and they deliver it with a passion and energy that makes them a pleasure to work with. We’re already looking forward to working with them on our next projects.”
Mike Wallwork, Head of Ecommerce @ Footasylum
