An open-ended design brief for Coral Interactive

This weekend I began a task for Coral Interactive, an online gaming company based in the British territory of Gibraltar, as part of the interview process for a UI Designer position.

I was asked to look at an existing page and come up with a new UI and layout for mobile and desktop, with an accompanying UI kit. Most design briefs for job interviews often present you with pages like this, asking you to come up with solutions to problems that the employer has already specified.

The objectives in this brief were vague, and for good reason: it was a test to see how I, as a designer, approach problems and how I solve them; how I reason and justify my decisions, and how I come to design solutions using logic and reason — not arbitrary choices.

Overview

While approaching the task, I considered what it is the user would want to know:

  • What apps were available to them and on what devices
  • An overview of each app
  • The feature set of each app
  • Screenshots of the apps
  • Ways to download them individually

Other considerations that I took into account:

  • Brand guidelines
  • The placement of advertisements

Prototyping

Having considered the users’ needs and identified the tasks they would like to achieve when visiting the page, it was time to begin prototyping. It is always tempting to jump straight into a prototyping tool to begin wire-framing, but I prefer to jot down and explore ideas in the most economical and efficient way possible: pen and paper.

Early protoptypes of the proposed redesign.

The initial wire-framing stage is the most important. It is where you can explore ideas and put them in front of people for feedback; iterate and discard ideas without too much emotional attachment; and further abstract ideas before committing to a concrete implementation.

Having explored various different options and layouts to the existing design, I eventually came to a solution not too dissimilar to what they have currently, albeit with some subtle changes and a refreshed look and feel. Happy with the approach, it was time for the design stage.


The design stage

Advertisements

One of the first issues I came into while looking at the curent design was the advertisements at the bottom right-hand corner of content box. When reading the description and features of the apps, I was distracted by the movement of the slides within the carousel.

While the advertisements do relate to the application, and are therefore rightly positoned where they currently sit inside the content box, their heavy graphical treatment will likely result in the vast majority of users ignoring them — an affect known as ‘banner blindness’.

Actual content above, with the new text-based ad below it.

To tackle this problem, I abandoned the heavy graphical style of the current ads, and changed them to text-based. Users were now presented with advertisements within the context of the app, giving them knowledge of deals and offerings from Coral.

Responsive web design

One of the key principles of responsive web design is that a user should not be discriminated against depending on what size screen they view a website from. The curent site of Coral does away with this concept by presenting the user with a limited amount of content in comparison to the desktop site.

Left: The page viewed on iOS. Right: The same page viewed on Safari.

While the mobile site does a good job of allowing users to achieve the main tasks (read a description of the app and find out where to download it), it does not have content parity — that is, the same content on every device.

If a user would like to view the app features as well as the description, or see a preview of the app by way of screenshots, they would be out of luck with the current design.

Left: Concept 1. Right: Concept 2.

Rather than limiting the information users are able to digest, my proposed screens enable the user to consume exactly the same content they are able to on desktop while on their mobile device. The navigational element of switching between the viewed apps retains the same functionality, and the full description from the desktop site is included.

The feature section for mobile.

Along with the full description being included on mobile, so too is the feature section. The user is presented with screenshots placed within their relevant device container, and is able to swipe their way through the views as well as jump to any given section using the commonly used dot pattern seen on carousels.

The big ol’ download button

A dropdown which appears after clicking a ‘request link’ button on Coral’s current site.

The current site allows the user to download apps in several ways: to enter a choice between their mobile phone number or email address in order to receive a download link, or by clicking on the ‘download on the app store’ which takes you to iTunes (as of writing this, the Android icon does not follow its Apple counterpart in forwarding users to its store, presumably because Google does not allow gambling apps on its market place).

The new simpler, proposed solution for downloading apps.

Rather than over complicate the process, I have instead opted to link to the different app stores within a dropdown that is triggered after clicking the ‘download’ button.

Because the site is designed to be responsive, and therefore content parity is achieved, users will be directed to the app store on any device they’re viewing the page from (or in the case of Android users, a page detailing how to download the apps without the Google Play or Samsung stores).

To reflect this change in functionality, I also changed the terminology from ‘request link’ to ‘download’ instead.


While not every design choice that I made in redesigning Coral’s page is specified here, you can view the proposed designs at the following links provided below, which include static and interactive walk-throughs:

Thank you for reading!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.