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.
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
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.
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
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’.
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.
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.
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.
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
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).
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.