SuperBreak Mobile UI Design and Re-brand

Posted 14th May 2017, in UX Design

As SuperBreak re-branded, we were tasked with quickly rolling out the new brand to everything digital. As part of this project, I created a design system to enable myself and other designers to mock up all page types of our mobile website to hand to a third party to implement. As well as designing many of the pages myself, my objective was to enable other designers to create consistent, usable, visually engaging designs that were also true to the new brand.

SuperBreak Mobile Designs

Involvement:

  • Lead Designer
  • Creation of design system / UI style guide
  • UI design
  • Application/Interpretation of new branding
  • Annotated designs of many key pages

Design Rationale

Using some standard mobile design guidelines, I set rules for minimum sizes of clickable objects and spacing between clickable objects. This would basically make things easy to ‘click’.

Standard spacing rules were set as well as colours for specific uses; icon size; button sizes and styling. This help the usability of the website by ensuring things were easy to interact with and minimising the time a user has to learn how to use the site (as the more consistent it is, the faster the user will learn how to use it). By creating such a uniform design, it also helped it look visually appealing and easy to absorb.

I also created typographical rules – creating standard sizes for title, section headings, sub titles, body text, links, form objects, etc.

I set standard colours for specific uses, using the basis brand colours that were provided.

As we were working on a very tight deadline, I needed to create the mobile UI guide as quickly as possible to enable multiple people to work on the project. As we were working parallel, we needed something to refer to, to ensure our designs were consistent. This seemed to work well and the designs were delivered on schedule.

Often exhaustive brand guidelines can be self defeating, too restrictive or no one actually reads them! In this case, the UI guide did seem to by handy due to the nature of the project and that the development would be handled by a third party. The aim will be to make the guide easily accessible and should evolve over time.

I wanted to create a simple and minimalistic look, reserving much of the colour for primary actions and imagery.

SuperBreak Mobile Design
SuperBreak Theatre Page

Example Annotated Design

example of annotated design
SuperBreak mobile design