Re-designing The Cue List For Improved Usability

Re-designing The Cue List For Improved Usability

Elevator Case Study

For the time sensitive amongst us.

image
image
image
image
image
image
image

Project Deep Dive

Read about this project in detail
Cue List Interface
Cue List Interface

About Cue List

Cues are a well understood paradigm for triggering playback of video content within the live events industry. Disguise Designer has its own feature called Cue List.

The Cue List allows users to trigger playback of sections from multiple timelines from a single window.

Cue List was originally designed to help Disguise operators run rock and roll shows. Bands and live acts often change the order of their show and the video content displayed on screen has to reflect the change. Cue List allows the user to break the linear format of a timeline; allowing you to do jump to different sections (songs), accommodating any change in a live show. Since its release it has been used for different purposes but the core functionality remains around running a show.

Deliverables

Research
Discovery
User Sessions
Heuristic Analysis
Personas
Re-design
Wireframes
Clickable Prototypes
Hi-Definition Mockups
Documentation
Summary Of Re-design changes
Implementation

Research

Discovery

Rather‌ ‌than‌ ‌take‌ ‌a‌ ‌lengthy‌ ‌research‌ ‌approach‌ ‌I‌ ‌was‌ ‌asked‌ ‌by the development team to ‌keep‌ ‌a‌ ‌narrow‌ ‌focus‌ ‌and ‌a leaner ‌research‌ ‌period‌ ‌so that I could make a user experience improvement for the next software release.‌ ‌I was free to approach the project how I liked but through conversation with the wider team it was brought to my attention that it would be wise to consider the following.

  • 'N'shows - Think about different types of shows like trade, theatre and rock concerts that use Cue List. What design is the best fit for all?
  • It must be flexible to our current workflow - The Designer interface is like a tool box of elements that can be used in conjunction to solve a problem, be careful not to break this.
  • Improve legibility and readability - It was a known key issue that users experienced readability issues with the current version.
  • Vertical space - The Designer UI has a general problem with a lack of space any design must not impact this further.

I‌ ‌explored‌ ‌existing‌ ‌known‌ ‌issues‌ ‌surrounding‌ ‌the‌ ‌Cue‌ ‌List‌ using‌ ‌‌Jira‌ ‌‌and‌ ‌‌Stormboard‌ (a ‌virtual‌ ‌whiteboard‌ ‌tool) to extract ‌‌recorded pain points and requests to post-it notes. The pain points could then be grouped and themed to look for commonalities and unique opportunities.

Cue List Stormboard
image

User Workshops

I‌ ‌arranged‌ ‌workshops ‌with‌ ‌Disguise‌ ‌associates‌ (a group of users frequently used for research purposes) ‌to‌ ‌discuss‌ ‌problems‌ ‌surrounding‌ ‌the‌ ‌Cue‌ ‌List‌ ‌and‌ ‌learn‌ ‌more‌ ‌about‌ ‌its‌ ‌use‌ ‌in‌ ‌a‌ ‌real-world‌ ‌environment.‌ ‌

Heuristic Analysis

After‌ ‌gaining‌ ‌some‌ ‌initial feedback‌ from ‌users‌ ‌I‌ ‌wanted‌ ‌to‌ ‌identify potential graphic interface ‌issues‌ ‌so‌ ‌I‌ ‌did‌ ‌a‌ ‌heuristic‌ ‌analysis‌ ‌of‌ ‌the‌ ‌feature‌ ‌and‌ ‌its‌ ‌design.‌ ‌I‌ ‌also‌ ‌looked‌ ‌at‌ ‌competitors‌ ‌like‌ ‌Qlab‌ ‌and‌ ‌Cue‌ ‌Pilot‌ ‌to‌ ‌see‌ ‌there‌ ‌were‌ ‌any‌ ‌similarities‌ ‌or‌ ‌unique‌ ‌opportunities that could influence the design.‌ ‌

Heuristic Analysis
image

Personas

I was able to collate user data from the keyframing project, user workshops and data from the cue list project to create a set of persons. These personas would go on to inform not this project but all my projects at disguise. They were vital in framing the user mindset.

Analysis

Working‌ ‌with‌ ‌Daniel‌ ‌Clay ‌(the‌ ‌developer‌ ‌on‌ ‌this‌ ‌project) we created a design document that listed issues and requests exposed during the research phase. We had a mixture of bugs, user requests and observation from the user research workshops.

We discussed each pain point based on perceived need and also implementation difficulty, this cross referencing gave us a sweet spot of tasks we could work towards creating minimum viable re-design.

Stretch goals that were technically difficult but would serve to delight the user if we could implement them were considered also but only if there was time at the end of the project to implement them. From this document we listed implementation and design tasks to work towards in tandem. Whilst this was not an ideal way to work from a design perspective without lead time, the lack of time on the project meant we just had to press ahead.

Re-design project requirements

Prerequisites (Things‌ ‌that‌ ‌need‌ ‌to‌ ‌be‌ ‌fixed‌ ‌prior‌ ‌to‌ ‌starting‌ ‌any‌ ‌more‌ ‌lengthy‌ ‌overhaul‌)‌ ‌

  • Invisible‌ ‌GO ‌button‌ ‌can‌ ‌be‌ ‌triggered‌.
  • Make the GO ‌button‌ ‌obvious‌. ‌
  • Excessive‌ ‌note‌ ‌name‌ ‌length‌ ‌causes‌ ‌issues‌. ‌
  • Try‌ ‌making‌ ‌column‌ ‌resizable‌. ‌
  • Using‌ ‌search‌ ‌bar‌ ‌breaks‌ ‌things‌.
  • Typing‌ ‌into‌ ‌search‌ ‌bar‌ ‌increases‌ ‌the‌ ‌width‌ ‌of‌ ‌notes‌ ‌column‌. ‌
  • Deleting‌ ‌text‌ ‌from‌ ‌search‌ ‌bar‌ ‌also‌ ‌increases‌ ‌width‌ ‌of‌ ‌notes‌ ‌column‌. ‌
  • Max‌ ‌widget size‌. ‌
  • Capping‌ ‌size‌ ‌aft.er‌ ‌internal‌ ‌elements‌ ‌have‌ ‌sized‌ ‌themselves,‌ ‌causing‌ ‌them‌ ‌to‌ ‌overlay‌. ‌
  • Cue‌ ‌Set‌ ‌List‌ ‌show‌ ‌wrong‌ ‌information‌ ‌for‌ ‌TC‌ ‌Tags‌. ‌
  • Horizontal‌ ‌Scroll‌ ‌Bar‌ ‌Appears‌ ‌in‌ ‌Cue‌ ‌Set‌ ‌List‌. ‌

The‌ ‌MVP‌ ‌

  • Lack‌ ‌of‌ ‌spacing‌ ‌between‌ ‌elements‌ ‌
  • Strategically‌ ‌add‌ ‌margins‌ ‌for‌ ‌clarity‌ ‌
  • Performance‌ ‌must be improved, no frame rate drop.
  • Apparently‌ ‌slow,‌ ‌needs‌ ‌more‌ ‌investigation‌ ‌
  • UI‌ ‌Highlights‌ ‌are‌ ‌not‌ ‌great‌ ‌(only‌ ‌work‌ ‌with‌ ‌search‌ ‌bar)‌ ‌
  • Can‌ ‌select‌ ‌(and‌ ‌so‌ ‌highlight)‌ ‌when‌ ‌search‌ ‌bar‌ ‌is‌ ‌focussed‌ ‌on‌ ‌with‌ ‌up/down‌ ‌keys‌ ‌
  • Should‌ ‌be‌ ‌possible‌ ‌with‌ ‌mouse‌ ‌or‌ ‌arrow‌ ‌keys‌ ‌when‌ ‌search‌ ‌bar‌ ‌is‌ ‌not‌ ‌focussed‌ ‌
  • Further‌ ‌layout‌ ‌bugs‌ ‌
  • Text‌ ‌spillover‌ ‌
  • Elements‌ ‌rendering‌ ‌on‌ ‌extra‌ ‌lines‌ ‌
  • Semantic‌ ‌alignment‌ ‌of‌ ‌columns‌ ‌

Stretch‌ ‌Goals‌ ‌

  • Auto‌ ‌Scroll‌ ‌option‌ ‌within‌ ‌Cue‌ ‌List ‌
  • Give‌ ‌users‌ ‌ability‌ ‌to‌ ‌update‌ ‌note‌ ‌names‌ ‌whilst‌ ‌in‌ ‌playback‌ ‌within‌ ‌Cue List‌ ‌
  • Be‌ ‌careful‌ ‌-‌ ‌Local/Global‌ ‌Track‌ ‌filter‌ ‌option‌ ‌in‌ ‌cue‌ ‌set‌ ‌list‌
  • Ability‌ ‌to‌ ‌re-order‌ ‌columns‌ ‌to‌ ‌User‌ ‌preference‌ ‌within‌ ‌Cue List‌
  • Investigate Indentation‌
  • Sub-notes‌ ‌are‌ ‌indented,‌ ‌but‌ ‌this‌ ‌is‌ ‌ugly/messes‌ ‌with‌ ‌alignment‌ ‌of‌ ‌columns‌ ‌ ‌
  • Could‌ ‌be‌ ‌improved‌ ‌or‌ ‌replaced‌ ‌
  • Make‌ ‌sections/tracks‌ ‌collapsible‌ ‌
  • Better‌ ‌separation‌ ‌of‌ ‌elements‌ ‌
  • Also‌ ‌consider‌ ‌zebra‌ ‌for‌ ‌clarity‌ ‌
  • Something‌ ‌to‌ ‌make‌ ‌separation‌ ‌between‌ ‌tracks‌ ‌more‌ ‌obvious‌ ‌
  • Currently‌ ‌they‌ ‌look‌ ‌chronological‌ ‌but‌ ‌aren’t‌ ‌
  • Other‌ ‌method‌ ‌to‌ ‌bring‌ ‌up‌ ‌Cue‌ ‌List‌ ‌
  • Ability‌ ‌to‌ ‌open‌ ‌multiple‌ ‌Cue‌ ‌Lists‌
  • Cue‌ ‌list‌ ‌per‌ ‌Track‌ ‌

💡
"We hope to redesign the cue set list feature to improve its general usability which will include, layout, behaviour, legibility, performance and bug fixes from list editor technology which the feature will be based on."

Design

Iteration

I‌ ‌began‌ ‌the‌ ‌UI‌ ‌re-design‌ ‌by‌ ‌breaking‌ ‌the‌ ‌interface‌ ‌down‌ ‌into‌ ‌its‌ ‌key‌ ‌components‌ ‌and‌ ‌then‌ ‌used‌ Sketch‌ ‌to‌ ‌re-assemble‌ ‌the‌ ‌UI‌ ‌in‌ ‌new‌ ‌configurations.‌ ‌I‌ ‌created new‌ ‌configurations‌ ‌that‌ ‌solved‌ ‌problems‌ ‌found‌ ‌in‌ ‌the‌ ‌research‌ ‌phase‌ ‌then‌ ‌share‌d ‌the‌ ‌designs‌ ‌with‌ ‌the‌ ‌wider‌ ‌team‌ ‌and‌ ‌with‌ ‌our‌ ‌users.‌ ‌Through‌ ‌each‌ ‌cycle‌ ‌of‌ ‌iteration‌ ‌I would receive feedback and would iterate and arrive‌ ‌at‌ ‌a‌ ‌more‌ ‌defined‌ ‌design‌.

Design Examples
Research - Learning about table formatting.
Research - Learning about table formatting.
Splitting UI elements.
Splitting UI elements.
Re-configuring UI elements.
Re-configuring UI elements.
Iteration.
Iteration.
Presenting functionality to product team.
Presenting functionality to product team.
Describing Functionality
Describing Functionality
Image sent to users for first impressions feedback.
Image sent to users for first impressions feedback.

Prototyping

Using‌ ‌my‌ ‌designs‌ ‌I‌ ‌began‌ ‌to‌ ‌make‌ ‌clickable‌ ‌prototypes in Sketch,‌ ‌these‌ ‌not‌ ‌only‌ ‌served‌ ‌as‌ ‌a‌ ‌tool‌ ‌to‌ ‌gain‌ ‌valuable‌ ‌feedback‌ ‌but‌ ‌also‌ ‌serve‌ ‌as‌ ‌another‌ ‌communication‌ ‌tool‌ ‌to‌ ‌describe‌ ‌to the developer how‌ ‌the ‌feature‌ ‌is‌ supposed‌ ‌to‌ ‌function.‌ ‌I‌ ‌continued‌ ‌to‌ ‌test,‌ ‌gather‌ ‌feedback‌ ‌and‌ ‌iterate‌ ‌until‌ ‌I‌ ‌had‌ ‌a‌ ‌design‌ ‌that‌ ‌I‌ ‌was‌ ‌satisfied‌ ‌made‌ ‌a‌ ‌UX‌ ‌improvement‌.

Prototype Example
This prototype describes functionality of an expand/collapse design used to try and hide complexity/space in the widget. It unfortunately didnt make the grade, but this is the way things go sometimes. Learn from it.
This prototype describes functionality of an expand/collapse design used to try and hide complexity/space in the widget. It unfortunately didnt make the grade, but this is the way things go sometimes. Learn from it.

Implementation‌ ‌

Dan‌ ‌and‌ ‌I‌ ‌both‌ ‌shared‌ ‌the‌ ‌leading‌ ‌of‌ ‌this‌ ‌project‌ ‌and‌ ‌I‌ ‌assisted‌ ‌him‌ ‌on‌ ‌design‌ ‌insight‌ ‌and‌ ‌

him‌ ‌on‌ ‌technical‌ ‌limitations.‌ ‌The‌ ‌team‌ ‌worked‌ ‌well‌ ‌and‌ ‌we‌ ‌implemented‌ ‌all‌ ‌of‌ ‌the‌ ‌changes‌ ‌

to‌ ‌reach‌ ‌the‌ ‌MVP‌ ‌and‌ ‌also‌ ‌had‌ ‌time‌ ‌to‌ ‌work‌ ‌on‌ ‌some‌ ‌of‌ ‌the‌ ‌stretch‌ ‌goals.‌ ‌Before‌ ‌

release ‌I‌ ‌gathered‌ ‌feedback‌ ‌from‌ ‌a‌ ‌week-long‌ ‌beta‌ ‌test of‌ ‌which‌ ‌the‌ ‌results‌ ‌were‌ ‌positive.‌ ‌

Finally,‌ ‌we‌ ‌circulated‌ ‌a‌ ‌document‌ ‌summarising‌ ‌the‌ ‌latest‌ ‌changes‌ ‌and‌ ‌intended‌ ‌behaviour‌ ‌of‌ ‌

the‌ ‌feature‌ ‌with‌ ‌product‌ ‌and‌ ‌QA‌ ‌for‌ ‌testing‌ ‌and‌ ‌user‌ ‌guide‌ ‌documentation.‌ ‌

Challenges

  • Worked on the research phase alone, difficult to get engagement and feedback from other members of the team.
  • Asked to take a lean approach to research and to use an iterative design approach.
  • Custom C++ UI extremely difficult to implement changes to the UI.

Impact‌ ‌

  • Delivered‌ ‌re-design‌ ‌of‌ ‌the‌ ‌Cue‌ ‌List‌ ‌feature.‌ ‌
  • Introduced‌ ‌new‌ ‌UX‌ ‌processes‌ ‌to‌ ‌the‌ ‌R&D‌ ‌team.‌ ‌
  • Worked‌ ‌collaboratively‌ ‌with‌ ‌a‌ ‌developer‌ ‌to‌ ‌implement‌ ‌ideas.‌ ‌
  • Re-design used as part of marketing campaign
  • Marketing Material
    image
  • Received‌ ‌positive‌ ‌feedback‌ ‌from‌ ‌the‌ ‌user‌ ‌community‌ ‌on‌ ‌changes.
  • User Quote
    image