Our Product Design Process

We, the Experience Design Department at Perform Group, have documented our ideal product design process. This is the process we use to launch and continually improve our products across the company. We’ve created a range of products across the sports media landscape successfully applying this process for brands…such as Goal, Sporting News, Voetbalzone, and more.

The Problems We Faced…

Prior to introducing our process we as a design department faced several challenges:

  • There was a lack of understanding of UX from the wider business.
  • The lack of understanding meant it was difficult to get stakeholder buy-in and apply a user centric approach to all projects.
  • It wasn’t clear what our role was to the wider business. Our aim is to solve problems, but we were mistaken as artwork-ers or wireframe-ers.
  • There was an inconsistent approach to different projects, making them a nightmare to manage and resulting in key stages being missed.

By introducing our process we’ve reduced the impact of the challenges we face.

We started by brainstorming our process

Our Solution…

We have defined our process into 7 key stages. For each stage we explain what it is and why we do it. Throughout we have used three people who represent the key people within the project team.

Let’s begin,

Time to grab the popcorn 🍿 Enjoy!

01 — Kick Off Meeting

The kick off meeting happens on the first day of the project. The whole project team comes together to define the project. 3 things to come out of this stage are: 1) why are we doing it? 2) who is it for? 3) what are the KPI’s? — oh and not to mention we make sure everyone is clear on their roles. Whilst everyone is in the same room this is also a great opportunity for people to share their expert opinions and ideas.

02 — Research

After gaining clarity on the initial project definition both the Product Team and the Design Team dig deeper and investigate the project through research. The Design Team focuses on investigating user needs, the existing market and what the key business stakeholders want. In the meantime The Product Team investigates the key business constraints and ultimately how the product will make money.

3 — Requirements Alignment

Once user and business requirements have been gathered, the project team re-groups. Within the alignment meeting the team create a series of project goals. This is where we make compromises with the aim to satisfy as many business and user requirements as possible.

4 — Ideation

Once project goals have been identified we feel it is important that everyone has a chance to express their ideas. As well as giving the whole team a voice it is another great opportunity to get a diverse range of ideas and expert opinions as everyone comes together.

5 — Part 1: Ideation & Prototyping

This stage of the process is all about creating tangible outputs which can be shared with the team for discussion and furthermore used for usability testing. As famously quoted from David Kelley, our goal is “Fail Fast, to Succeed Sooner”.

This stage can range from low fidelity prototypes which could be quick sketches linked together to make a clickable prototype. Or high fidelity prototypes that mimic the final user interface, these are more suitable for usability testing and demonstrating ideas to developers or stakeholders.

We use Sketch as our go to software for creating wireframes, high fidelity UI screens and Specs. We use InVision to create clickable prototypes and Principle to explore interactions adding finesse to them.

5 — Part 2: Usability Testing

We can now put prototypes in our hands and our colleagues hands. Most important, though, is the opportunity to get them into our users hands. This helps us spot issues before it’s too late as well as being able to validate ideas as we create them.

Using our prototypes we can quickly perform usability tests, allowing us to iterate on our ideas/prototypes. Two methods we commonly rely on are hallway testing, and remote testing (via Userbrain), although we also contact users or perform usability tests in the streets to gather quick feedback. Other methods we use are quick data gathering tests to validate our decisions. For this we use remote services such as Optimal Workshop or Usability Hub.

6 — Design Delivery

We validate our prototypes as much as possible before passing them onto the development team to build. This is our way of eliminating as much risk as possible.

We communicate our design via a high fidelity InVision clickable prototype. This gives a feel of how the product will work. Alongside this we also supply all our designs using Sympli. This allows the developers to click on the designed screens and get the specs for each individual element. With many of our development teams based around the world effective communication is essential.

Throughout the build we constantly communicate with the development team to address any issues as they occur and guide them to the finish line as smoothly as possible.

7 — Measurement & Analysis

Once our product is out there and being used by users we take the time to review it’s performance. We use analytical tools such as Google Analytics to review numbers/traffic and Hotjar to enable heat maps on our products — both are great ways to gauge user behaviours and check patterns. Getting feedback from users is essential. To validate the analytical insights we conduct further hallway tests or further remote user testing, this provides validation for our insights. Once we have our insights we discuss our actions as a team and our strategy to make the product better.

The Process in use

To give you an idea this is how we’ve adapted our process to fit different situations. Here is a break down of how this works across different project types.

1 — New Product or a Rebuild

If we were tasked with re-designing an existing product or asked to create a new product from scratch. Then we would go through the whole process in order to lay a stable foundation for the project and ensure the best possible outcome.

2 — What Happens Post-Release?

It’s not goodbye once a new product is released, it’s very much a case of constantly evolving the product, by analysing and iterating the aim is to make it even better. Nothing is ever finished.

3 — Quick Turnaround

This is when a client calls and asks for something to be delivered ASAP. If we don’t have time to do further research, it’s essential we still reference the original research to validate our goals and assumptions from the brief. We then go into the ideation stage prototyping and delivering a prototype as soon as possible. The solution is analysed and iterated upon further down the line when there is more time.

Finally…It’s Not a Linear Process but a Cycle

Throughout this post we have visualised the process as a linear process in actual fact it is a cycle which is constantly in motion. One point to note is wherever we are in the cycle, we always refer back to the requirements/project goals. This keeps us on track to the goals we are aiming to achieve.

Thank You!

Thanks for reaching the bottom. Hit us up with some 💙 to let us know you enjoyed it!