Life is Strange Brand Site

Revamping the appearance of our digital retail touchpoints

With a brand new entry in the franchise, Life is Strange True Colours needed a website to promote the new game. This gave the team the chance to revamp our digital retail touchpoints that can be seen on every dedicated game page. The previous buy pages had been continuously built on over time, resulting in them becoming convoluted and difficult to navigate, especially for new visitors. Analytics had also noticed an increase in our bounce rates on these pages which could affect our sales negatively.

Putting everything into context:

What is a dedicated buy section on a brand homepage?

A game buy page for a dedicated game website differs from a "regular" eCommerce buy flow. These types of pages often link out to other retailers and customers don't always get the option to purchase directly from the game company. This posed a great issue for us since we saw a high bounce rate on these buy pages – people weren't actually clicking on the retailer link.

Assessing the Problem

With how the buy pages are set up, the Online Publishing team is reliant on information being pulled in from a system another, adjacent team is maintaining. In order for the both systems to work together, designs had to be follow a rigid pattern which resulted in options being hidden in drop-down menus or huge, overwhelming logo gardens for retailers. Buy pages weren't scannable, accessible and didn't give the user any sort of overview.

Analysing the competition

Knowing our standard layout for Buy Pages was outdated, and curious to know the strengths and weaknesses of our competition, I started the redesign process by looking at competitor pages. I analysed other companies' buy pages and flows to try and gain and understanding of how they solved complex issues like displaying games for a variety of platforms and retailers.

Additionally, I looked at websites that weren't direct competitors, using Baymard as a resource to analyse product pages.

I asked myself these questions during this process:

• How is their information architecture structured?
• Does their approach work and why? Why not?
• What unique features makes their pages differ from ours?

Once I finalized my competitive analysis, I turned to our current buy page format and conducted a heuristic evaluation to uncover points of friction and how we could improve them. I also thought about the goals our buy pages have to meet as they differ from a standard product page due to its lack of a "traditional basket".

Collaboration and collective brainstorming

The Buy section was the only part missing from the page at that point with the rest of the design finalized, I checked in with design to share my findings and we started ideating to come up with different ways on how to display all buy page components the best.

The difficulty with this product was that this wasn't a buy page for one singular game – it was a digital retail touchpoint for the entire franchise which consists of three games, all available on different platforms and different formats.

It turned out that it was too early to ideate. We saved our previous ideas to come back to at a later stage and focused on the userflow itself.

Simplifying everything...

The design team had already made their first iteration of the buy page which split the page in half – half of the screen is used for the buy flow, the other half would show either the box art or screenshots of the selected game. The buy flow itself was split into multiple pages – one page per step – aimed to streamlining the userflow and keeping the user on a one-way track to the retailer click.

While this initial design was very in line with what was on the old Life is Strange page, it repeated all of the old mistakes too and wasn't very effective for mobile as we couldn't split the page in half without it negatively affecting the layout. Stacking the box art on top of the user flow would result in the buy flow being hidden under the fold which wasn't desirable either. Additionally, this system also didn't support any errors: If the user selected an invalid option, they may abandon the page as it would be too much effort to figure out which step combination would work. Users may not be patient enough to wait for each step to load in the first place either.

Instead, I suggested keeping the flow extremely simple and showing the users all their options at once. This way, the user isn't put on rails and allowed more freedom while still guiding the user through every single step. It also takes off the pressure of “getting it wrong” as they can always scroll back up to see their options. Finally, while it is imporant to show the user what they get when they are buying, screenshots of the game don't need to be shown inside the buy section as they are shown everywhere else on the page. As it'd result in repetition of the same assets, it might result in the user just skipping over the images.

... while guiding the user through the complexity

The only tricky part about showing all options at once was not overwhelming the user with the sheer amount of options. The Marketing team had provided us with a handy graphic showing which game options would be available throughout the product cycle which enabled us to think ahead for the future.

Before fleshing out all of the individual paths the user would be able to take, I made a minimalist user flow diagram based on the choices a user would have to make when going through the buy flow.

Ideation but this time for real

As it was creating more issues than it was solving, we decided to abandon the split-page design and started over from scratch.

I sketched out a few ideas for both layouts and flows by trying Crazy Eights, sketching out a lot of ideas for possible scenarios, based on my research findings and common best practices that were applicable to this situation (eg consistency, error prevention, allowing users flexibility etc).

After asynchronously generating ideas, we came together in an ideation session to discuss our ideas and thoughts.

In this session, we rapidly prototyped in Sketch, exploring ideas and discarding what we deemed too complex immediately.

We came out of this session with two possible flows in mind but weren't sure how realistic they were to implement as they required the page to be dynamic. We went with the “display all steps at once” idea, and as per my initial basic flow, we kept the user input to a maximum of 5 clicks (game selection, platform selection, edition selection, format selection, retailer selection). The order of these steps was the only thing we initially were unsure about as those are fairly interchangeable.

Getting dev input

After finalizing the flow, I initiated a session with the developers who would be working on this project and presented them the solutions. The devs shared some insights with us and there were differing opinions on what the order of steps should be – mostly for the prevention of roadblocks (eg how might we display that the user selection doesn't exist if for example they selected a platform that isn't available for a certain game).

Since the game edition was only relevant for 1/3 games within this flow, we decided to let the user select their platform first. Users who decide to buy a game tend to already know what system they own and buy games for. The way the design and the page were set up, we were also able to launch an A/B test to test the order of these steps if we deemed it necessary.

Learnings:

While only a small part of the page, I was glad to be involved in improving our buy page. We are already seeing a reduction in the bounce rate on this page as more users actually make it to the retail click.

The process itself was a little messy since we uncovered more issues when we initially jumped into ideation a little too early. However, it was great to be able to pivot and rapidly come up with new ideas to solve the issues thrown at us. I also enjoyed the collaboration with the design and development team as well as facilitating the discussions between these teams.

The UX maturity in the wider online development team currently is in its beginning stages, so with my proactivity I managed to get many people in my team on board and think about our design issues from different angles which I consider a major win.

← Back to Portfolio Overview