Holmanmedia

Project

Glide UI

Glide UX is a panel-based UI with easy to use interaction. One of the core principles of the UI is that the content hierarchy builds from left to right, anchored by the main menu which is a simple vertical scrolling list.

When the main menu is activated, panels expand to the right, these are populated with content linked to the focused menu option.

Brief

Develop a high-end User Interface for Set-top boxes that can be reused for multiple customers and easily customisable.

What I did

  • Acquire customer requirements
  • Provide work estimates
  • Wireframing & prototypes
  • High fidelity designs
  • Usability & feature specifications
  • Creation of Java layout files
  • Creation and optimisation of assets
  • Engineer/test support for project lifespan

Concept

Glide UI is a panel-based UI with easy to use interaction.

One of the core principles of the UI is that the content hierarchy builds from left to right, anchored by the Main menu.

As the user navigates down the hierarchy, new levels appear. To go back, the user simply navigates left to bring the previous level back into view.

When navigating, focus remains in the centre of the screen, unselected options simply fall above and below the focus.

Top menu

The Top Menu lists the main areas of the application in a vertical list. Its accessed via RCU Menu, right nav key.

Primary panel

Options on Primary are listed vertically with accompanying icons (if available). When highlighting an option, the icon enlarges and shifts to the top right of the selection band. A prompt bar is displayed to the right of the panel, it can contain prompt information alerting the user of further options.

Secondary panel

Options on Secondary panel are listed vertically and display text.

Tertiary panel

Tertiary panel expands to fill the available screen; previous panel options will be collapsed and truncated.

Colours

Colour is a great way to provide status information, give feedback in response to user actions, and help people visualise data.

Every section has its own unique colour associated with it.

They were fully tested on various televisions and Set Top Boxes for any display issues.

I included the official colours in a 44 page styling guide specification that was distributed between all internal teams and clients.

Typography

My chosen font for the project was ‘Montserrat Light’.

The font worked for HD and SD TV’s and at all sizes.

I customised the font as it was missing quite a lot of special characters. I manually created the characters using FontForge and using other fonts as donors. This was to prove a worthwhile experience for the creation of Arabic characters for another project.

Safe area

HD screens were designed at 720p and upscaled by the STB.

SD dimensions were 576p.

Asset library

Some of the assets created for the project. They were used throughout the UI.
All assets were fully optimised before going on the box.

Advertising banners

There are three banner locations throughout the application. The RCU buttons can be associated with the banner to launch content pages or media assets.

I went for a banner size called ‘Leaderboard’ due to its popularity and the clients potentially already having assets created in this format.

AMS console

The ‘Advertising Management System’ was designed and implemented to support content authors with OTT content and scheduling of adverts.

Components

I design and document the various system components in the UI.

  • Dialogues
  • Channel number change
  • Loading
  • Volume handling
  • Player console
  • Buttons (UI, RCU)
  • Prompt text
  • Logo
  • Keyboard
  • etc

Sitemap

Once I’ve investigated and identified what is required, a sitemap is created for the project.

Doing this early on can highlight any User Experience issues such as poor navigational loops.

Wireframes

High fidelity diagrams were created, it’s a good way to test available screen space and layout. Also, I will use these images in the UI specifications.

Keeping them generic means I can reuse the screens for other customers saving time and resources.

Specifications

Every screen and interaction were extensively documented for engineers, clients and testing.

In total, 18 documents were created for the UI.

High fidelity designs

With the wireframes created, I start applying the agreed look and feel. Its important to agree early on how it will look; this is done in the prototype stage. I create as many varied screens as possible for approval.

I put together an interactive demo of the UI. It’s designed to be used on a desktop, RCU control is via the keyboard. Currently its work in progress and does not represent the whole UI.

Screens

Images of the finished product.

Outcome

The UI became a popular selling tool for sales and marketing. The following companies have been involved in the deployment and demonstration of the UI:

  • Cignal
  • American Forces Network (Digital Glue)
  • Dish America
  • ABS
  • beIN sports
  • Comcast
  • COX
  • Deleel
  • Dialog
  • Filbox
  • Irdeto
  • TurkNet
  • Une

Testimonials

“Mike's versatility and range of skills in the creative industry; graphic design, photography, UI/UX design, web design, to name a few, provided the whole design team with a clear vision on projects we worked on.”

George Bishop

Graphic Designer

“Calm, resourceful, creative, conscious of time demands, a great pro-active communicator and the ability/mindset to just get things done.”

Graham Cooke

Lead Product Manager

“He has an excellent attention to detail and is always willing to help others. He has a wealth of knowledge and ideas to share and can be relied upon to get a job done properly and in a timely manner.”

Ian Brunt

Chief Systems Architect

“He's a talented designer with the skills that reach beyond just the design as he's always looking for ways to push the boundaries of how we can make our product better.”

Sangeetha Rathnakuma

Java Developer

“Mike is a professional UI designer always seeing the product from the customers perspective and forever challenging his own designs to provide the best customer experience.”

Paul Newton

Head of Engineering

“I would recommend Mike for any UI/UX/Design role without hesitation. He is a consummate professional, a talented designer and his drive to improve processes means he would thrive at any company.”

David Austin

Director of Research and Development

“He was instrumental in the design and planning of our Media Broadcast Centre, and has coordinated its use for both filmed and live video production, audio recording, and photography. I cannot recommend his services highly enough.”

Graham Holland

eLearning Support Officer

Let's work together