Debenhams Logo

Tablet replatform - 2018

expand_more

The brief

After the success of our mobile website replatform & relaunch onto the PWA platform, the question of whether we should reassess and replatform our tablet site also arose.

Our tablet site hadn't been given much love in the past, despite being a high percentage of our user base, and was basicaly a scaled down version of the desktop site. This led to some major usability issues and also to some pages breaking due to not scaling properly.

It was not only hard to use but it also was now outdated against our new design system, didn't encompass any touch optimised design patterns and was also too relient on desktop updates to be able to make any tablet specific experience improvements. So we started the process of reviewing the journey and what should be done in order to improve this experience for our customers.

Understanding the journey

As a start point, we needed to understand the current tablet journey, and highlight key customer pain points in this journey to focus on.

We also layered on analytics at this early stage so we could understand what our most used tablet devices were.

We started by mapping out the journey, getting it up on the wall and traffic lighting key experience improvements as we went.

Once we had done this, we began to get a technical understanding from our developers on how difficult fixing some of these issues wuld be. Due to very tight time contraints and need to get an MVP live - we used this and customer insight to begin prioritising what our areas of focus should be.

Once we had done this the sketching and wireframing process begun, I worked closely with a UX designer to complete this process quickly & efficiently due to time constraints.

Prototyping & testing

We then began to work on the key areas we had identified key experience improvements for MVP go live (Header / Navigation & Product list page).

We started by prototyping a number of different options for the header and navigation. We had identified from past customer insight that a difference in navigation interaction & display between portrait/landscape devices was expected from customers, so we looked to optimise this.

We came up with some quick wireframe ideas as a team and I created some quick hi-fidelity mocks in sketch, and worked with a UX designer who built them up into a clickable prototype in Axure. I also created some other clickable prototypes in InVision.

We then took these prototypes to store for some gorilla testing with customers, once we had got these learnings back we further optimised the designs and then re-tested in store until we were happy.

Creating the final UI

We then started work on the final UI. To begin, I planned out the sections of the site that would need UI and divided them between my team. I drew up a design sprint plan to make it clear to all of the product team members when I estimated each section would be designed by, that then allowed us to ensure the dev sprints could align with this.

As well as bringing in members of my UI team in to help with the creation of visuals (we had a 4 week deadline to redesign the full site), and mentoring them through the project - I was also hands on in creation of visuals.

I asked my team to use the design system components and rules I had defined in the mobile relaunch to ensure consistency, and I reviewed each section once complete to sign off and ensure the site looked consistent throughout.