Building the Visual Concept of TELUS’ Bundle Builder

How the team tackles the challenge of building the look and feel for Bundle builder that fits well with the brand identity and the company’s customer experience vision.

While fleshing out and testing the wireframes of Bundle builder, the team also started researching and building the visual concept of the website, in order to prepare for creating the final User Interface.

The Challenge:

  • The UI should reflect the company’s brand and identity
  • The UI should be clear, intuitive and can help customers accomplish their task in a short time
  • The look and feel must be consistent with the company vision of customer service excellence
  • The final UI should also match with the team’s vision of Bundle Builder: simple, intelligent, unintimidating

The first step: research, research, more research

In order to solve these challenges, the team delved into researching for good UI from companies inside and outside of the telecom industry for inspiration, as well as researching for the design guideline system of the company. It is very helpful that the client has a very extensive and detailed design system guideline. Here are some guiding principles:

The Guiding Principles:

  •     Drive design based on real customer needs
  •     Deliver relevant, personal, valuable and simple user experiences
  •     Speak a language our customer understands
  •     Strive for minimalism and eliminate the non-essential
  •     Create data informed rather than data driven designs
  •     Embrace content-first UX

All the design standards were gathered for future reference, including the colour palette, the typography, button, form, banner guideline etc.

The team also spent time going through the current website of the company in order to learn how these design guidelines manifested in the real UI design.

Observations from the current website UI:

  • The look and feel are modern, clean, with a lot of empty white space
  • Green and purple (logo colours) are used for some parts of texts, buttons, menu and decorations
  • Nature theme is shown throughout the site (animals, critters, leaves and flowers)
  • The site uses simple 2D graphics for icons

One particular challenge of building the UI for Bundle builder was how to present all the TV channels in a neat and intelligible way. Throughout many user tests, frequent comments for picking TV channels section were that either channel logos were too small (make it hard for people to recognize), or too big (there were up to 30 channels in one theme pack, therefore if the channel icons were too big, customers needed to scroll up and down a lot if they picked many theme packs); channel logo’s dimension varied substantially (round, square, long or short) and if customers want to read more descriptions of a particular channel, where could they find them? Researching for a good way to present hundreds of channel for TV was therefore, very necessary in building the best UI for Bundle builder.

Here is how TV channels and their descriptions are currently presented:

And this is how Apple solves the logo challenge:

They put the logos into rectangle boxes of almost the same shape and size, then they make the logos move slowly from right to left in order to show many logos while keeping the size big enough to please the eyes.

Research for Brand Identity:

The client company has used a very interesting and widely recognized brand concept since the early 2000s thanks to the effort of the lead creative agency Taxi. Nature concepts such as animals, critters and plants are used to brand the company as future friendly, taking advantage of the cuteness, friendliness and universal appeal of animals. In order to align with the brand image and identity, the team had gone through the client website and many ads ranging from prints to online ads and TV commercials.

Here are some commercials that are archived on the company’s Youtube channel:

 

Research for Competitors’ UI and visualization:

Competitors’ website UI and visualization are also researched for inspiration and best practices. Unlike our client, the competitors do not seem to have a specific theme for visualization in their website. Generic pictures of people enjoying their lives with or without electronic devices are used throughout the sites.

Below is the visualization found in some competitors’ websites:

UI design outside of the telecom industry:

In my opinion, it is very helpful and effective to look at beautiful and clean designs from websites outside of the telecom industry and not just limit ourself within the industry. Even though the products they sell are not related, the pretty and intuitive interface served as examples and inspirations to enhance the look and feel of our own product.

Some websites that match our vision of Bundle’s builder UI design are Airbnb (clean, modern, good examples of slider and filter), the North Face (split screen for conversational interface), Rarecarat (conversational interface and language) and Apple (sleek, clean, white, elegant)

  • Airbnb

  • The North Face

  • Rare Carat

  • Apple

 

Summary

After spending time doing extensive research on design guideline, customer experience vision, brand identity and current UI of both the client’s site and other companies in and outside of the telecom industry, our team was inspired and confident to come up with a new enhanced look and feel of Bundle builder that is simple, clean, unintimidating and most importantly, consistent with the corporate brand.

Our next step will be creating various mock-ups of the UI and then test them with users.

Leave a Reply