AXIS: Hero Carousel

Existing offering of Hero Carousels lacked a level of control expected by our clients.

Our new hero carousel would aim to provide users with greater control over their presentation, utilising robust actions, metadata and assets.

This case study looks deeper into the work that brings a consistent experience across different device types and operating systems, while addressing common client requests.

Why "Revolutionise" a carousel you ask?

Internal Research Insights
Research indicated that 4 out of 6 clients customised existing carousels.
Meeting Industry Standards
User research conducted in 2022 showed that our existing hero banner options were no longer aligned with industry standards.

Commonly requested customisations:

Goals

Client

  • Reduce cost of project customisation, allowing clients to focus on maximising their content faster.
  • Increased control including the ability to show, hide and edit all aspects of the carousel with no need for further developer input.

1

Internal

  • Cost reduction through productisation of frequently requested customisations.
  • Increase value of AXIS by featuring expected industry standards.

2

End-Users

  • Improved user experience through addition of robust metadata, descriptions, as well as relevant actions on the carousel.
  • Standardised accessibility ensuring the carousel is built with expected WCAG standards in mind across all platforms included.

3

Users

Operators

Operators are our clients utilising AXIS, setting up, editing and publishing their content.

Use Cases

As an operator I want to:

  • Display Upcoming, Live or Past Sport content and have a relative status displayed to the end-user.
  • Display Separate Experiences for Visitors vs Users.
  • Show mixed content in the Hero Carousel, such as episodic TV show content, Movies, Sports and more.
  • Display a video background to increase engagement with my carousel content.

End-users

End-users navigate and consume content published by the operator.

Use Cases

As a user I want to:

  • See relevant information surfaced about the content without needing to enter the details page.
  • See when an upcoming piece of live content is starting.
  • Resume or play content straight from the carousel.
  • Purchase or rent content straight from the carousel.

End-users

End-users navigate and consume content published by the operator.

Use Cases

As a user I want to:

  • See relevant information surfaced about the content without needing to enter the details page.
  • See when an upcoming piece of live content is starting.
  • Resume or play content straight from the carousel.
  • Purchase or rent content straight from the carousel.

The Process

We utilized a process based on the double diamond framework, adapted to fit our product teams pipeline. Involving relevant parties throughout each phase in our projects and features.

Understanding the problem

The lead designer conducted a customisation analysis on AXIS.
This involved investigating:
  • Which components or templates of AXIS were frequently customised by our clients.
  • What were the common customisations requests.
  • Frequency of each request to prioritise which features to work on adding or improving.
Hero banners often being the first content presented to the end-users, they were also the most frequently customised.
Combining the data from the customisation analysis, we’ve found that 4 of 6 clients customised or explored customising our “out of the box” range of hero banners to match some of the current industry standards.”
Commonly requested customisations:

Market research insights

  • 5 out of 6 services use a video background on their hero carousel.
  • 4 out of 6 services use a full height 16:9 background image, while carefully utilizing gradients and margins to ensure legibility and discoverability of content below.
  • 6 out of 6 services reduced their carousel functionality, such as using a static image instead of a video background on their mobile apps.
  • Unless showing live content, 5 out of 6 services display a "More Info" button on TV platforms for Movies and TV Shows.


Complexity Exploration

In the early stages and throughout the process I aim to gather insights into areas that may pose either a technical challenge during development, or that will require some more thorough exploration in design. Highlighting areas that may require discussions to take place early to understand the scope better.

Here's some notable areas of complexity faced in this feature:
video background
  • Functionality currently unavailable within the platforms codebase.
  • Accessibility considerations
Legibility
  • Video backgrounds are less visually predictable and may cause low contrast when playback begins.
  • Will need to explore and define clear gradient rules to compensate content with a large amount of text.
Mixed Asset Support
  • Such as movies, TV shows, Live events
  • Ensuring the User experience does not diminish with mixed content shown on the carousel, for example sport’s content generally having longer titles as well as extra states like upcoming, live and past event.
cross-platform
  • Each platform can utilise native components, reducing development time better spent elsewhere.
  • Market research has show a reduction of certain performance heavy features on smaller devices such as video backgrounds.
Usability Testing
  • Facilitating usability testing sessions to validate design decisions where there isn't enough research.
  • Creating either low or high fidelity prototypes depending on the complexity of testing required.
Accessibility
  • Creating an accessibility specs to provide optimal experience for users navigating using only a keyboard.
  • Providing both an MVP and an ideal solution to ensure implementation at least at a basic level.

Defining the MVP

After conducting complexity analysis and organising various catch-ups with developers to discuss feasibility. It was deemed that video backgrounds would be the largest and most difficult to estimate. The developers still needed to perform a spike into how they’d implement it.

Based on our research done earlier, we made the decision to focus on the frequent client customisation requests as our MVP solution, and handling the video background as part of the second phase.

Ideation

Whiteboard sessions
The early phases involve whiteboard and sticky note sessions. Brainstorming with the design team around what the hero carousel will feature, as well as any considerations we can see that will require further exploration, either through user flows, prototypes or during visual design.
In the case of this new hero carousel, we were familiar with components on AXIS and had enough market research to base a lot of decisions on.

In case of a more complex feature with more unknowns, we could facilitate kick-off workshops with relevant parties. Using several frameworks to facilitate the creation of ideas for new features:
  • Design Studio
  • Crazy 8's
  • Storyboarding
  • Mind Mapping

Wireframing

Responsive Web App provides insight into how much extra exploration smaller screens may require with the additional elements. Solving a lot of these problems early on will allow us to translate most of the decisions over to native mobile platforms.
Native & TV platforms most of the rules and behaviours will carry over for consistency. However, platforms like iOS, Android or TV targets will have their own documentation with any platform-specific annotations.
Layouts, Flows, States, Edge Cases and Annotations documented using the wireframing and prototyping software Axure. We can quickly begin to visualise additions to the hero carousel, allowing quick iterations due to their low fidelity nature.

Wireframes and flows also serve as a great discussion point allowing the design team, developers, stakeholders and more, to easily quickly see the direction.

It's also worth thinking though high level rules and behaviour at this stage, though it's a fine balance of not adding too much detail too early. Ensuring time is well spent in case any aspect doesn't make the final design or build.

Requirement exploration

After a series of internal reviews and discussion help iterate the layout. I begin to explore other requirements and goals for the feature.

So far we've created the general layout based on our existing hero offerings and in reference to market research. We've also added new components to the hero such as buttons, short descriptions, metadata and more.

We can now begin to explore how those components will be affected our other requirements such as:
  • Supporting mixed assets in the carousel.
  • Implementing enhanced live support (e.g. countdowns for upcoming, state changes for live content).
  • Mind Mapping
Above you can see an example of a wireframe created to explore and showcase:
  • What an event asset would look like.
  • How the components translate over to a mobile device.
  • Breakdown of action states that will be present on this particular asset type.
  • Early exploration of how components like badges or buttons adapt to a smaller screen when their labels exceed available width.

Presentation Manager

Under the hood of AXIS is presentation manager. A web interface allowing operators to control their content, users, it’s components and more.

Each component, like our hero carousel, has a range of properties allowing the operator to change aspects such as content alignment, visibility of elements like the tagline or badge and more.

The new hero carousel introduced a number of additional properties to ensure the user would have an adequate level of control, without the need for developer support.

As we explored each part of the carousel. we also created a document detailing properties for each component of the hero, as well as expected values, copy and tooltips:

Accessibility

Current Implementation
We needed to be strategic about how we'd create specifications for accessibility; across varying devices and operating systems.

Starting off by performing an in-depth analysis of existing accessibility implementation on AXIS.

We discovered a number of in of inconsistencies between similar templates such as sport detail pages VS movie detail pages.
Guidelines research
Ensuring all apps followed rules and guidelines, I proceeded to research platform specific accessibility standard covering:
  • Browsers on Windows and Mac devices
  • iOS and Android phones and tablets
  • Various TV’s and set-top boxes
Market Research
Conducting and documenting research on the extent of accessibility implementation present on video services in the market. While it helped define the scope and expectation, it also indicted most big services on the internet cover a minimum requirement of accessibility implementation.
Detailed Design
Annotating navigation order, interactions and specific narrations, alongside of any UX documentation provided to developers.
Design Reviews
Making sure the implementation is adhering to designs and guidelines, I review the implementation with Quality Assurance teams.
‍
Documenting inconsistencies or need for improvements.
Retrospective
Unfortunately due to time and resource constraints we were unable to perform usability testing to further validate the feature.

Visual design

My visual design approach begins with an exploration of areas that I’ve identified as potentially problematic or will simply require further exploration to ensure clear rules and good decisions.

Identifying and exploring these early ensures that we focus on solving possible issues early on before creating detailed specs that may need to be altered otherwise.
Leveraging existing
components and styles

I aim to utilize existing components and styles as much as possible to reduce development time and retain styling consistency. Reducing having one-off styles or components.

Leveraging existing
components and styles

I aim to utilize existing components and styles as much as possible to reduce development time and retain styling consistency. Reducing having one-off styles or components.

Leveraging existing
components and styles

I aim to utilize existing components and styles as much as possible to reduce development time and retain styling consistency. Reducing having one-off styles or components.

Meeting AA WCAG Accessibility Standards
  • Ensuring contrast meets AA standard.
  • Producing specification for developers to follow when implementing accessibility functionality.
  • Creating clear focus states for keyboard navigation.
image format for Mobile

Mobile format reduces our horizontal real estate. The common 16:9 image format used on larger devices  wouldn’t be impactful on mobile devices.

Height Rules

With the browser set to full screen width, the 16:9 background image can take up all available height.

Exploring so that image and video background are not obstructed with the new metadata, actions and more.

Ensuring optimal discoverability of the content below.

Mixed content

When mixed content is present, such as a mixture of both movies and tv shows. The content area will vary in height.

Sport content often has longer titles than most movies and TV shows.

Exploring varying content pinning rules through quick prototypes to determine the least visually disruptive experience.

Visual design specs

Since our development team was working in a different timezone from Mumbai, It was crucial to provide them with clear spec sheets outlining all expected rules.

  • Typography rules
  • Character limits
  • Layout spacing, padding and margin rules
  • Content area rules
  • Platfor specifics
Beyond development, this also serves as a reference point for design reviews and quality assurance.

Outcomes

previous hero for comparison

Figma's Properties

Throughout the creation of the AXIS design system, we utilised figma’s component properties to be reflective of control AXIS provides to operators per component.

It was no different with the hero carousel, as it would be added to the design system and utilised by service designers.

The Design System

Beside feature based projects like this one, We’ve been hard at work producing a Design system for AXIS. Bringing consistency between our front end apps and our design documentation, the design system served as an invaluable starting point for producing the visual designs of the new hero.

Check out the Design System case study if you’d like to know more about the design system work.

Case studies:

AXIS: Design System

2022-2023
Creating and maintaining a design system for an existing white label product.
More info

MTRIBES: Recurring Schedule

2022-2023
Updating existing functionality to solve client pain points.
More info

Let's get in contact

While this website summarises my experience, it only scratches the surface. Let's connect so I can dive deeper and explain how I benefit your development process, team, and company.
E-mail
Linkedin
CV