A publicly listed iGaming business, with an active user base of 50K and an annual turnover of over AUD 34 million, was looking to leverage their existing brand strength and distribution power into the Sports vertical. One of the key business objectives was to use the additional product vertical as a key customer acquisition channel where the experience of cross vertical sales was designed as an attractive and effective proposition during the browse and discovery phase of the customer journey. It was important to therefore create and introduce clear and intuitive separation while maintaining a relationship between the three primary product categories (Casino, Live Casino and Sports) when browsing on a mobile device and to retain some level of consistency across device experience.
- Board of Directors
- The C Suite
- Core Brand MDs
- Product Owners
- Tech & Design Teams
The Design Challenge:
The problem to solve here was primarily a UI design challenge where there was a need to introduce a simple and intuitive method of quickly and easily navigating between primary product verticals and associated content while also providing a visual indicator of the active content category.
I researched, sketched and explored a number of options, each with their own design and usability strengths and weaknesses and produced low fidelity wireframes for the different options according to existing and target user personas and their tasks goals. One of the big challenges of implementing navigation on mobile is how to prioritise content while making navigation accessible and discoverable. Different approaches sacrifice either content prioritisation or the accessibility of the navigation.
I was keen to avoid hiding such important product verticals under the already existing hamburger menu as both my own experience combined with a recent study from The Nielson Group continues to validate that discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases (source: Hamburger Menus Research Study).
Below are some examples of wireframes designed for iOS viewport (download HD: Mobile-Wireframes.jpg (17 downloads) )
Solution 1: Top Navigation divided into 3 sections with an active bar indicating the active content category. This was perhaps one of the most obvious solutions but still presents a potential challenge for users with larger screen sizes when considering the ‘designing for thumbs’ principle. The bottom area of the screen is potentially where we want to put an application’s most common and important interactions. Where they can be reached quickly and easily.
Solution 2: A replica of the top navigation but positioned at the bottom of the screen to become more functional in respect of the touchzone.
Solution 3: A dropdown box positioned in the centre of the top navigation. Usability research in this area advises against drop down on mobile. While this solution provides a visual indicator of the product category, content is hidden and switching categories will require an extra step.
Solution 4: A google inspired solution which presents a plus icon indicating more content. Upon press, the body content would blur and 3 icons would animate from the plus symbol.
Elements of Navigation
It is my experience that, in terms of visual language, symbols and icons contribute to signature, personality, recognition, and abstraction. Studies have given evidence suggesting that user interfaces have less favourable perceptions of usability and usefulness when relying on textual expressions only. Therefore, part of my design recommendation was to produce navigation design which contain both label and fully tested icons. After a lot of thorough research, brand guideline development, sketching and finally user testing (“tag-that-icon” and “connect-the-dots” methodology), I produced the following icons (vector art using Adobe Illustrator).
Rapid Prototyping & Usability Testing
Using the sketches and wireframes I then built rapid prototypes (using Adobe Experience Design CC and Principle for Mac) in high fidelity to use in a usability study performed in Labs across 3 days.
- I recruited 20 participants to take part in 1:1 sessions.
- Participants were a blend of existing customers and people with no brand relationship.
- I used a task-based scenario research method.
- I contracted an independent moderator to avoid confirmation bias.
- The output was a high level Issue Log and Recommendation.
You can download screen recording videos from the usability study here in which you can see the tested solutions.
“Complexity creates confusion, simplicity focus”, Edward De Bono
It’s tempting to try to design a fancy navigation experience in these scenarios but it’s so important to focus on user personas and task completion first. Over and over again, in usability Labs, I have seen that simple design scores higher overall in both usability and satisfaction metrics. For better resolution, you can download a video of the final solution below. This video was made using Adobe After Effects.
Download video (MP4 format): Mobile Navigation (20 downloads)
There are a number of key points to notice about the final design.
- Despite being more functional, the bottom navigation scored lower in usability and satisfaction.
- Users demonstrated a natural and unprompted behaviour which was to swipe content left and right and look to the top navigation to reference where they were. Swipe left and right functionality was subsequently built into the solution.
- Bottom navigation was very often missed when users were asked to report where they were and complete a navigation task.
- The navigation bar will hide and appear with scroll up and down to maximise real estate. There was a lot of attention invested in the subtle detail of this micro interaction design. This was well understood by users.
- The appearance of a scroll bar on the right hand side supported users understanding of how much content remained on the page. In A/B tests the scroll bar encouraged users to scroll further.
- The most important elements (are visible and easily accessible).
- Both user and business prioritised tasks (red routes) are optimized.
- Essentially, simplicity and usability were ultimately preferred.
- I also used this opportunity to address a usability flaw in search functionality and recommended the positioning of a search bar in the header to replace the logo.
I welcome the opportunity to deliver a more thorough presentation which will include the following:.
- A detailed look at the rapid prototyping (Principle for Mac).
- A detailed look at usability methodology and scores.
- A closer look at micro-interaction design elements and timing.
- Discussion on design process and time to execute.
- Discussion on resulting interaction and engagement data.
Questions? Drop me a mail and let’s chat.