Rush Partners

UI/UX Design & Design System

Creating the main online portal for an international multibrand gaming company focused on improving the gambling industry for good.

Summary

In January last year, I joined Rush Partners Lld. Rush mission is to make iGaming platforms more approachable and user-friendly to old and new users, their products are currently being updated, both technology and user experience wise and their website needed to showcase how forward-thinking the company is and at the same time provide information for both general public and investors.

Challenges

Delivering this website would involve a small team within the company. And due to tight deadlines and the initial requirements from the company, a few challenges needed to be tackled:

  • Create a website from scratch without initial user data.
  • Deliver a project in phases to be online as soon as possible and grow both in content and scope.
  • Gather user information to be used in future iterations.
  • Deliver a top of the line working prototype that could be used as a framework for on-boarding new team members to work on it.
  • Create a design system around it that could be re-used in other child projects (landing page, community pages, etc.)

Process

Being my first major project in the company, and having a low or inexistent date of the current user base that would be beneficial of the project I run a simple process with the one I would make future iterations based on the user reaction. The process was as followed:

  1. Compile briefing and requirements
  2. Competitor analysis
  3. Evaluate specs and prioritize content
  4. Wireframe low-fidelity prototype and brief stakeholders
  5. Come up with the brand guidelines and high fidelity prototype
  6. Build MVP of the website and test against users and stakeholders
  7. Iterate and modify based on new requirements
  8. Launch beta version

Compile briefing and requirements

The first step was to have a small brainstorming session with the stakeholders and project lead to compile a list of features and requirements that the website needed to fulfill. In order to do this, we listed all the things that users could expect from the website and also all the things that we needed to display as a company.

Competitor analysis

To get a better overview of how and what users would be expecting of the site, and since there isn’t a previous study or data from the current inexistent site of the company, I analysed what are the big companies doing. I took some big competitors and broke down their sites into pieces. Taken bits of information in the format of screenshots and mapping down features that might be relevant to the project.

Evaluate specs and prioritise content

Now that we had gathered user requirements and working examples of features to implement, it was time to have a second brief workshop to decide together with the PM and the stakeholders what kind of information we wanted to display and how to structure it best.

This session helped establish the priorities in the project as well as in the design since there wasn’t a clear idea of what we wanted to include in the MVP and what else would be implemented later.

From this session we obtained the following feedback and challenges:

  • The initial version would be a compilation of simple static pages build with a PHP-based framework that would evolve into a more complex system for future deliveries.
  • With the help of a headless CMS, this website would become a portal platform in the future for both end users and investors.
  • Both design and development would take place at the same time while adding features to the MVP by scheduled releases.

Wireframes

After evaluating the needs and requirements from both the business and the user perspective I came up with a low-mid fidelity wireframe that would conform the scaffolding of the site for both desktop and mobile, having in mind the UX for both large and small screen devices.

Design System

After coming up with the whole set of pages and components that would form the site, and signed off the appearance and visual aspects of the product , the next step was to break down the pieces that form the site into smaller components.

Once this set of components was stripped down and organized depending on its function and position on the page, each layer was standardized and put in synchrony with the brand guidelines as well as the coding standard to ensure an easy development.

This initial design system would serve as the main framework that would be developed into static components and in a future stage be turned into a CMS-based library of features and blocks.

Going with a design system based on components formed by smaller molecules was a decision made from the fact that the second fase of the site will be a visual CMS based platform (similar to WordPress, Joomla, and similar) and will help with the iteration, improvement and creation of new content for the site.

Having a design system in place also helps with the creation of a more consistent site across devices and screens, making it easier to prototype and come up with different options for pages and features, helping on the A/B testing and the user experience overall approach.

If you want to read more about how beneficial design systems are and what extra values they add I wrote an article about it on my blog that you can check by clicking here.

High fidelity prototype

After having the wireframes signed off by the stakeholders and previously having made some iterations over them to allocate some of the content and specifications that would make an overall better experience for the users and provide them with more content I designed the full high fidelity website.

The high fidelity prototype was build using InVision mapping the different parts of the site in a way that its easier for stakeholders and the closed user group to test the site and gather feedback.

Development

The development of the site in an initial stage was done using a PHP-based static page builder together with an organic and dynamic CSS framework to ensure an optimized development and easy deployment of new features.

Taking this into account the development of the site started with the scaffolding of main pages by the developers of the team, but making it easier for other members of the team to jump on and build and update pages.

The technology used was Jigsaw together with Tailwind, that helps create an include based structure of Html components and sections.

In a later stage, this structure and code will be integrated with Prismic headless CMS that will fetch data and content from a back office with a visual content management system as well as drag and drop functionalities.

Beta version

After a smooth development of all the sites that had content and could be already developed, the website was published and released in a beta version.

It is already available to check in beta version while we collect user feedback and gather content for future iterations using the link below, your performance will be tracked and take into consideration for future releases.

Conclusions and next steps

After delivering the first beta version of the platform we already gathered some patterns that would be applied to find out more about how users behave with the product and how to alternate it in following versions, all along the BI and the marketing team to upload and update the content accordingly to the new needs from the users. But from what we experienced, we can take that:

  • Users feel that the information about the company is more transparent and broad, and they feel more informed about our mission, the different business units and what the goals are from each brand.
  • The visibility of the brand and the position of it towards the SEO has improved, adding extra credibility to Rush as a brand and the companies that form the group.
  • Users are interested in more about the parent brand and also interact more directly with the different platforms of the sub-brands, but spend more time on the site when it comes to the company information.

In terms of next steps, an initial overview tells us that the sections copy will need to be polished and also reconfigured in order to arrange the copy in a way that satisfies the needs of the vast majority of our users, switching sections and the hierarchy of some of the parts of the site.

Get in touch

Want to start a project with me? Let’s get started.