Little Thunder Co | Web Design Belfast, Northern Ireland.

Electronic Arts

Product Design

EA exists to inspire the world through Play. As one of the world’s leading games publishers, they have a global team who are passionate about making the very best games and also delivering a customer experience to match. With more than 15,000 employees, they have a wide range of websites and applications that help deliver a world-class service.

We worked closely with the super talented Experience Design team at EA with the aim of creating a framework that would provide continuity and consistency across their global IT products. That system is called Joystick - a powerful new toolkit to help developers, designers, and content creators do just that.

It was an exciting opportunity to work with such a large enterprise company on design led thinking. The final product is modern, flexible and most importantly, super easy to use. We wanted to make it a breeze to create an app that not only looked great on any platform, but was also easy to develop.

EA

Joystick is a living design system, with an ever growing number of components available for use. From icons and buttons, to dashboard interfaces and loading spinners, it’s as easy as copying and pasting the code to get started. This allows for teams at EA to focus on the functionality of the product, to create a truly amazing experience for its users.

Research and Planning

The key to building a great digital product begins with research. To kick things off, we got together to talk about project goals and objectives, including challenges, roles and opportunities. To ensure everyone’s moving in the right direction, it’s important to establish how we’ll measure success.

EA - Research and Planning
EA - Research and Planning
EA - Research and Planning
EA - Research and Planning
EA - Research and Planning
EA - Research and Planning
EA - Research and Planning

Then we look at user personas - The creation of fictional users that represent the target demographic for the project. User personas offer high-level understanding of user needs, and enable a format to empathise with them that is a useful backbone for designing the user experience.

EA - Research and Planning

This leads into our first sprint stage - a paper prototyping session to establish the user’s flow and look at what steps different users take to complete specific tasks. The result is a comprehensive user flow chart and site map.

Prototyping

Research from the discovery phase helps us define screen layouts for desktop, tablet and mobile as well as establish user interactions. With a considered approach, we create designs that resonate and engage users.

Low-fidelity designs known as wireframes are quickly created using pen and paper, and then later refined on screen.

EA - Prototyping
EA - Prototyping
EA - Prototyping
EA - Prototyping
EA - Prototyping

Style guide with framework templates

Joystick also provides a wide range of components designed with care and built in CSS that are platform agnostic. Regardless of whether a team used Angular, .NET or PHP, Joystick’s CSS-only UI framework was created to play nicely with any workflow.

EA - Joystick Framework Sketch Template
EA - Joystick Framework Sketch Template
EA - Joystick Framework Sketch Template

Joystick Product Site

Once the Joystick framework was designed and built, we created a product site for users to find out about it. We wanted to introduce personality — to what is essentially a technical product — so we illustrated a series of characters to promote a sense of community around Joystick and also convey the culture that exists at EA.

EA
EA

Docs

In order for a framework to be adopted, it’s important that there is good supporting documentation. We also helped to create the Joystick Docs site that housed all the information a user would need to get started. This also existed in parallel with ‘Joystick Guides’ which are less technical, learning focused tutorials.

EA EA
EA EA
EA
EA
EA
EA

Introducing Joystick Video

Finally, to tie everything together we created a short introductory video to promote Joystick and to give an overview of its benefits and features.

The team in EA Austin shot some footage of their office and sent it to us along with a voiceover, and we composed the rest of the shots and animations in our Belfast office (cue cameo of our team).

EA
EA
EA
EA
EA
EA
App Design & Development

Read more about Joystick

Joystick is an internal EA product, but you can find out more about it here

Read More

Work With Us

If you have a project in mind we'd love to hear from you. Click below to get in touch with us with details of your requirements.

Start a Project