New billing platform for Square Enix

I had the chance to be involved in a core project in Square Enix, to design the user experience behind any digital purchase on the store, ideally all game's store would be using this system which has been optimized for touch screens based on responsive design principles.

Redesigning from scratch

Square Enix was having some issues with their existing user flows on their billing platform so they decided to do it all over again from scratch, this time designing first the user experience underlying the whole platform.

This was my main task on this project, to design and deliver a clean and structured UX documentation prior to some UI design as well.

Desktop wireframes

These are some screen samples from the desktop UX documentation.

It is just a sample of a much larger UX work that I worked on for 4 months, since the strategy I followed was a 'mobile first' approach, I created first a couple of hero screens for larger resolutions (desktop) in order to give me a sense of where the goals would be in terms of layout and structure.

Mobile first, flow diagram

As I created all the necessary wireframes for the platform I worked on a more IA document displaying the different user flows across the mobile platform along with the screens.

Some important notes are displayed here, such as animations or input (interaction) methods, all explained to make the devs team lifes easier.

Animating and Prototyping

A part I enjoyed a lot on this project was the creation of different animations and transitions to demonstrate some concepts and ideas for it.

This animations were designed in Photoshop and animated in Keynote, then exporting to video or gif for different purposes.

Responsive platform

A requirement was to design the website as responsive and scalable as possible, without comprising usability or affecting user's flow in any manner.

3 different break points were included in the designs as a starting point, as the project gets into shape, more breakpoints and specific rules has been added to make the best of the experience.

Prototyping (Desktop)

This is a clickable prototype made with Marvel App. Feel free to click through it and explore, don't hesitate to go and check also the mobile and tablet prototypes too.

User Interface design

What I love the most of this kind of projects and thanks to my mixed background is that certain times, I'm asked not just to create the user experience or wireframe documentation but the visual design layer as well.

Not many designers have the chance to be involved in both parts, and sometimes, details go missing on the UX-UI transition if the designers are not in touch or the UX specifications are not followed striclty.

So having the chance to design the interface I created the UX for was really good and rewarding.

Purchase summary

By default, the purchase summary appears collapse (as the platform only allows 1-item purchases) and it can be expanded with a single touch with an ease animation.

Menu access

Menu access is located on the left side and can be accessed when user taps on their avatar image.

So how is this going to end?

Even though I left Square Enix when this product was on development, it's been an incredible experience to have the chance to design such an important piece of business for a store as big as Square Enix, that will use this solution across all their digital game purchases.