🗓 Completed in Q1 2022
🏢 Company overview
MrQ is a UK based, online casino acquiring 10,000 new depositing customers month on month at the time of writing.
MrQ is powered by Spark, its in-house CMS built to address the specific needs of the company and industry. The tool allows unparalleled and needed flexibility at a granular level, only possible with a bespoke solution.
In Q1 2022 I was tasked to identify and execute improvements to Spark, which would improve stakeholder productivity and lower operational friction pertaining to legacy decisions.
👥 Team & responsibilities
- Head of operations
- Head of data
- Head of CRM
- Content manager
- 2 front-end developers
- Product designer (myself 🙂)
- Auditing product
- Interviewing stakeholders
- Documenting problems to be solved
- Writing and prioritising user stories
- Identifying opportunities
- Defining project scope
- Interaction design
- UI design
- Development speccing
Address problems having a negative impact on stakeholder workflows
Spark had been a side gig for one in-house developer for years. The lack of focus and UX consideration led to a number of problems impacting stakeholders, namely:
- Product bloat and irrelevant features.
- Missing features which stakeholders needed.
- Unnecessary friction throughout core use cases.
- Stakeholders lacked confidence using the tool.
My task was to identify bottlenecks and frictions, and address them so that stakeholders could be more confident and productive in Spark.
Identify opportunities for new, valuable features
Stakeholders had been working sub-optimally for years due to missing features. One of my responsibilities was to understand stakeholder needs, and discuss new improvements that would drastically improve their workflows and increase business value.
Simplify the user experience in Spark
Spark looked messy and was intimidating to use. The need to re-architect some portions of the product but also run it against usability heuristics was self evident. My responsibility was to put stakeholders and their tasks front-and-centre, and to mask the tool’s complexity behind a user friendly experience.
🎙 Interviewing stakeholders and documenting key findings
My first step was to interview stakeholders who used Spark regularly. Five stakeholders from different functions (Operations, Content, Data, QA) were interviewed to ensure that the biggest problems across unique workflows raise to the surface.
During the interviews, stakeholders were asked to share their screen, jump into Spark, then go through some typical workflows and explain why they were frustrating to execute. Throughout the interviews I tried my best to listen carefully and ask clarifying questions, as opposed to probing for problems which were not raised by stakeholders - and therefore arguably non-existent.
After each interview, I reviewed the recorded call to begin synthesising my findings. Key findings were compiled into Notion for easy reporting and sharing but also, for me to have a backlog which I could prioritise and action.
All findings were framed under four lenses in order to provide holistic and well articulated evidence.
Moving game positions is tedious.
As head of operations, I want to be able to change game positions, so that the best games receive the most visibility and the worse ones receive less visibility.
When I jump into Spark to reposition games, I have to manually drag games over dozens or hundreds of titles till I find the position I’m looking for. This is especially tedious to do on a laptop track pad.
Allow users to type in a destination position for a game to be moved to.
Moving multiple games to the bottom of the games list at a go isn’t possible.
As head of operations, I want to move multiple games at the bottom of the games list, so I can ensure that games that have lost their relevance are given the appropriate priority.
When Christmas, Easter, Valentines or any festivities are over, all related games lose their relevance to some extent. In such scenarios I have to manually find and drag each individual game to the bottom of the games list.
1. Allow users to move individual or multiple games to the bottom of the games list. 2. Allow users to move individual or multiple games up or down ‘X’ positions.
Spark doesn’t allow users to specify a position for new games when they’re being added.
As head of operations, when I’m adding a new game to Spark, I want to be able to choose its target position, so I can ensure the correct order of games across the ‘All games’ and ‘New games’ categories on site.
When I add new games to Spark, they’re placed at the bottom of the games list. Even though I wouldn’t want new games to be placed at the top (as that would make the ‘All games’ and ‘New games’ tabs on site reflect the same games in the same order), I’d still like to give newly added games a fair ranking under the ‘all games’ tab which I could specify.
Allow users to specify a destination for games which are being added to Spark.
When new games are added into Spark, we need to manually move them to the correct category.
As head of operations, when I’m adding a new game into Spark, I want that game to automatically be added to the correct vertical and category in the product (based on the game’s metadata), so I can avoid doing this manually.
Since Spark is missing some inputs under the ‘add new game’ flow, such as ‘game category’ and ‘game type’, new games need to be dragged to the correct category after they’re added into Spark.
Add metadata fields under the ‘add new game’ page which determine where a game will live in the secure product.
Reordering games in Spark is tedious.
2-3 games / day approx
As a content manager, I want to be able to reorder game positions within the Spark so that users can find the best performing games at the top of games lists in the secure product.
There isn’t a quick way to accurately shift games to the exact, intended poisition. Instead, I need to manually drag games down long lists till I find the correct position. This process becomes more tedious when I have multiple games to reorder.
What if I could select multiple games and then insert a ‘position number’ which would then quickly shift those games to their respective positions?
Spark positions newely added games at the bottom of the games list.
6-7 games / day approx
As a QA engineer, I want to position new games at the top of the games list in Spark so that they may be easily discovered by users and tested for their popularity in production.
When I add new games into Spark, those games automatically get positioned at the bottom of the games list. I need to manually drag new games to the top of the list (which is over 1,000 titles long) and the UI doesn’t allow me to do this quickly and easily.
1. Position newely added games at the top of the games list by default. 2. Make it possible to choose a position for new games when they’re being added into Spark.
💎 Designing meaningful changes
Helping stakeholders find games easily
Before moving a game to a new target position, stakeholders would need to locate it first. Prior to this project, stakeholders were locating games by scrolling through a list of over 1,000 titles.
To address this issue, I introduced a search field that was game title and position sensitive. That way, stakeholders could type in a game’s title or position number and locate it in a second before editing its position.
Making it possible to quickly move individual games to target positions
Previously, the only way to move a game to a new target position was to drag it. This process was tedious and slow considering:
- The ever growing list of over 1,000 titles.
- The fact that a game’s target position could be far off from its current position.
- Some people would do this on a track pad.
Even though the ability to drag games remained useful in some use cases, and was therefore preserved, it wasn’t the best all round solution. To address this, I made it possible to click on a game’s current position, and then edit the value of the position to reflect the new target position. This would then instantly move the game to that new target position in a second - no scrolling and dragging required.
Allowing stakeholders to move games to their recommended positions
The data team had built a weighting system which recommends where games should probably sit, based on their performance. This weighting system was not a part of Spark; stakeholders would give it a look in one tool and then log into Spark to move games to their recommended positions. Needless to say this process wasn’t too streamlined.
To address this, I uncovered games’ recommended positions right next to their current positions in Spark. The recommended position for each game was designed to work as a button which when clicked, would move the effected game to its target, recommended position.
There are a number of reasons the team and I decided not to automatically have all games automatically map to their recommended positions, or to have a way to move all games to their recommended positions at a go. The reasons have everything to do with the high levels of discretion and experimentation that are necessary to maintain a game browser. Having the full catalogue of games move would’ve been highly disruptive.
Making it possible to move multiple games to new positions at a go
Sometimes, stakeholders would move multiple games to new positions at a go, the reason for moving games in bulk varied:
- Perhaps a game performance report became conclusive and therefore many games’ positions needed adjusting.
- Perhaps a season, such as Christmas, was over and therefore all Christmas themed games became less relevant and needed demoting.
In any case, prior to this project, demoting or promoting multiple games could only be achieved by dragging each game individually to a new position.
To address this issue, I made it possible for stakeholders to select any number of games to be moved at a go. After selecting the games, stakeholders could choose whether they wanted to move those games up or down and then specify the number of positions to move the games.
View the Figma file below to get a clear picture of all the flows detailed in this case study.