Automated mobile menus in Axure

In my research and development time, I created an Axure tool that automatically creates a full mobile menu prototype from spreadsheet data. The project was feature on the Axure Blog. Hopefully, this mobile menu tool will immediately save you days of work.

Download the Axure 7 RP starter file
Demo the menu interaction
Test data

Below I’ll describe how to utilise the off-canvas, mobile menu framework. Before then, it would be worth explaining how I came to develop this menu prototype and when you should use it.

While repeaters were introduced as part of Axure 7 in December 2013, I didn’t start experimenting with them until September 2015. I mistakenly believed that they were intended exclusively for tabular data. It wasn’t until a tight deadline on a table-based calculator project forced me to hack together a prototype with screenshots that I was determined to master this final Axure functionality.

As I began to learn more, I realised I might be able to simplify my workflow using repeaters. Testing out the repeater functionality on a listing page revealed some limitations. The mobile menu was my second attempt at testing the limits of what is possible with repeaters. I set myself the challenge of creating a deep, 4-level mobile menu without manually having to create over 20 different menu states.

…And it worked.

Off-canvas menu with breadcrumbs
I know some of my Lean UX peers are probably asking why not simply demonstrate the full menu depth with a single path and explain the limitations to client. While I’ve used this approach in the past and generally use the fastest, simplest technique to communicate an interaction, some clients just want it all. They understand that the additional work will take more time and budget. However, their internal workflow may require a fully-realised prototype. This is especially important when they have internal or off-shore development teams. I call this approach “Fatty Tuna UX”, after the expensive sushi ingredient. It isn’t “bloated”, it’s beautiful and luscious.

Introducing the menu framework

At the heart of the automation is an off-canvas mobile menu that opens on the current page. This allows users to quickly access the page’s subnavigation. If the page does not have any pages beneath it, its parent page is opened and the sibling pages are shown. The menu includes footer links at the primary level and shows breadcrumbs as users dive deeper into the site structure. While deep, off-canvas menus haven’t yet established any conventions, this menu is one of the most robust options. Hopefully, it will work for your needs.

Full list of the prototype’s features:

  • Opening menu show subnavigation of current page, effectively overriding the menu’s last state when closed.
  • Home icon and link available in menu’s first level.
  • Close icon always available in top left of menu.
  • Header navigation included on the main menu only (menuFooter dynamic panel).
  • Every menu item that has subnavigation visually indicates (right arrow icon) that more options are available to set user expectations.
  • Menu arrow behaves the same as its corresponding text, opening the next level down (subnavigation) in the menu.
  • “Home” replaced by “Main menu” back button on all lower level menus. This element does not change between lower level menus.
  • All menu levels except “Home”, primary navigation show “View all [menuItemLabel]” to allow access to the listing page itself.
  • All tertiary menus and below show the full breadcrumbs trail as “Back” links. This structure allows mobile users who have entered the site at a page deep in the hierarchy to orient themselves.
Axure dynamic panels

How to use the menu framework

Tutorial difficulty: Easy (no previous repeater experience needed)
Estimated completion time: 20 minutes

  1. Download the Axure 7 RP file:
  2. Format your sitemap spreadsheet.
    This is the most important step. All conditionals and repeater integrators are expecting the spreadsheet data in a particular format. Ideally, this data would closely match established sitemap spreadsheet conventions. However, I did have to make some compromises to limit Axure complexity.

    1. Columns must use the following labels: Element, Parent, Subnavigation.
    2. The Element column is required and should be filled with the menu item labels. The “Home” menu item is contained in the menuHeader dynamic panel and should not be contained in the Element column.
    3. The Parent column is also required and should contain the menu item’s top-level menu. All primary navigation elements must use “Home” as their Parent.
    4. The Subnavigation column is optional.
      1. If the menu item has subnavigation, this cell should not be empty (I simply put “Yes”). This tells the repeater to display the subnavigation icon and to open the submenu when clicked.
      2. If the menu item does not have subnavigation, just leave that cell blank. When clicked, the pageTitle will be “selected”, the menu will be closed, and the content label will be updated.

The menu repeater data is filtered on the currently selected page or that page’s parent if it doesn’t have subnavigation. Thus, the menu item rows do not have to be in any particular order, nor should the column order matter.

  1. Copy your spreadsheet into the repeater dataset tab in the REPEATER dynamic panel.
  2. Update (or delete) the MenuFooter dynamic panel with relevant footer links and social icons: Optional.
  3. Preview and publish the navigation.
Sitemap Axure repeater dataset

Future work and limitations

While I’m quite satisfied with all the functionality I managed to squeeze into this prototype, my work is never done.

Menu height and scrollbar

The most important shortcoming of the menu is that the vertical scrollbar displays unnecessarily. Sadly, I didn’t have time to sort this out. Since the menuHeader dynamic panel increases in size as the menuDepth increases, the REPEATER dynamic panel should correspondingly decrease the same size. I’ll have to leave this for another day; it is a prototype after all.

Menu depth and breadcrumbs

Listing the breadcrumbs in the mobile navigation is an approach that is only relevant for 4-level deep IA and shorter. At the 4th level, the menu chrome is already taking up approximately 40% of the 480 px menu height, so adding more breadcrumbs would obscure too much of the menu content. Information architectures that need to go deeper should use a back button instead. In the future, I would like to develop this alternative menu framework.

Not adaptive (or responsive)

We usually do desktop and mobile adaptive Axure prototypes for our clients. With this in mind, I created the automated menu as a standalone item that can be included in small, adaptive views, while a different navigation paradigm is used for larger viewports. Projects or teams that generally also include a mid-sized viewport or use an off-canvas menu at large screen sizes might consider adding that view to the automated menu starter file.

Towry’s complete UX overhaul

Towry is one of the UK’s leading financial planning and wealth management organisations. After their acquisition of Ashcourt Rowan in 2015, Towry developed a new brand and business proposition. In addition, Towry’s industry-standard service offering was confusing some of its users. As the user experience lead on this Creative Jar (CJ) project, I was tasked with demystifying the services, integrating the new proposition into the EPiServer CMS, and using this opportunity to create a more engaging, online experience.

Stakeholder workshop and requirements gathering

The account team suggested we start the project with a stakeholder workshop to fully understand the brief and new Towry proposition. I was tasked with coming up with the first draft of the workshop agenda and activities, as well as leading half the workshop. Due to the extremely tight project timeline, the workshop objectives focussed on auditing the current website, as well as prioritising and scoping the project. Here is the first draft of the agenda:

  1. Open discussion about how Towry’s business proposition has changed.
  2. Simplified card-sorting exercise to integrate new service offering into current information architecture (IA or site structure).
  3. Evaluation of simple IA approach (from previous step).
  4. Audit of the current site: This started by focussing on IA, homepage, and the key user journeys. To help jumpstart the discussion with client, I had identified some opportunities in an informal UX audit beforehand and asked the management teams to do the same.
  5. Group project requirements (from previous step) into specific project tasks.
  6. Prioritise project tasks, scope what work will fit into the tight timeline, and identify what tasks can wait until a second phase.
  7. Time-permitting, co-design exercises:
    1. Homepage content reference diagram co-creation
    2. Detailed card-sort of Towry’s primary and secondary navigation, including new proposition content
    3. Map user journeys to IA created in previous step
card sorting workshop

The user experience team

After the workshop, the management teams created the statement of work (SOW) and project plan, then I started the UX work. CJ had recently gone through some staff changes and Alex Jaques, the managing director was returning to his previous role as creative director and taking over management of the UX and creative teams. While I was the sole UX on the project, Alex was responsible for final delivery. He took a traditional design approach to the project and requested multiple approaches for each deliverable.

The project work started with some pen portraits. I created initial versions and then collaborated with Towry to align the portraits with the industry-standard market segments, namely Experian’s Financial Strategy Segments (FSS).

Demystifying the service offering and information architecture

Once we better understood the target audience, it was time to start redesigning the information architecture. The original rebuild had transitioned the primary navigation from an audience focus (e.g., “Private clients”, “Corporations & institutions”, “Professional partners”, as seen on Chase de Vere and Investec’s websites) to a service focus (e.g., “Advice”, “Planning”, and “Investment management”, as seen on Coutt’s new site in the “Investment management” subnavigation). While this approach would certainly be considered best practice in this case, overlapping labelling confused customers. A competitor analysis revealed that “advice” and “planning” are used by convention across the financial services sector. But what is the difference between them? Would prospective customers intuitively understand the distinction? Additionally, these terms were further obscured by using them with synonymous adjectives, like “financial”, “capital”, “holdings”, and “wealth”. Due to the tight timeline, there wasn’t room for user testing. However, since the project brief also clearly identified the service offering as a problem, it was reasonable to assume that the interchangeability of “planning” and “advice” was the root cause.

Coutts secondary navigation

Industry conventions and navigation ambiguities

I created the following principle to guide my design process:

“Never show ‘planning’ and ‘advice’ by themselves, without further information to clarify the distinction.”

Thus, instead of requiring that a user selects between “planning” and “advice”, more details would always be available. For example, long-term financial plans or specific wealth advice services, like retirement and pensions, demonstrate to the user how these two service pillars differ, introducing significantly more context.

With the design principle as my guide, I explored a host of navigation solutions to clarify the service list:

  • “Services”: By convention, many websites start their primary navigation with a “services” list to quickly show users what’s on offer.
  • “Financial planning and advice”: Combining the two labels into a single menu eliminates the need for users to decide between them.
  • Separate but supplemented: Some sites use subtitles directly below their primary navigation labels in an effort to reduce ambiguities (See P’unk Ave).
Towry information architecture prototype

Content requirements

Once the primary navigation, header links, and footer were all drafted and the larger internal team was happy with them, I started the homepage redesign. The homepage was a single CMS template and almost anything was achievable. The first step was to supplement the IA work by adding more content to clarify the service offering. Next I increased the visibility and quantity of action calls to support the primary business goals and fundamental user tasks. Finally, I added new sections to showcase deeper content and support secondary user tasks. After that, I created user journeys based on the pen portraits to informally evaluate the solution so far.
Homepage UX sketch
Homepage UX prototype
I presented the IA options, proposed homepage content, and user journeys to client. After they selected which direction they wanted to pursue (combined “planning and advice”), I proposed a UX requirement for the 2nd stage of work:

“Every page must have at least 1 image.”

This CMS content commitment would allow any promoted content to include its unique image, drastically increasing the visual appeal of the site. Section (listing) pages would benefit the most, but even content pages would now have imagery for the designer to utilise. The client readily agreed to the CMS change.

Empowering the CMS administrator

The homepage redesign was straightforward. However, the rest of the project required updating most other templates and blocks in EPiServer. As a large-enterprise CMS, EPiServer gives the editor a lot of control. Thus, it was important to learn the Towry CMS inside out. I created test pages to explore where current functionality may have been under-utilised by CMS administrators. This step also helped me identify opportunities to increase functionality, update templates, and design new, reusable blocks.

The project brief called for the redesign of 4 key templates. In addition, the content template itself had to demonstrate how 3 new content pages would work. To fit all this in an already tight project schedule, I decided to move to a lower fidelity for the prototypes. While the client did do an excellent job of putting content first in the project, low-fidelity prototypes gave me the flexibility to focus on creating a robust framework for the CMS administrator.

UX low fidelity prototype

Contemporary web design

The first step in the redesign was to modernise the layout. For example, the current configuration of the section page was using 2 columns, one for the main content area and one for key action calls or supplementary information. While this approach certainly does have its place, there was an opportunity to increase the visual appeal of the page by moving to a single-column layout. Historically, the multi-column technique was introduced at a time when pages were generally quite short. Now that users are much more accustomed to navigating through longer pages, giving the content room to breath is part of contemporary web design. In addition, one of the principles of landing page optimisation is to create a unified flow through the content. Adding columns at the start of the page breaks the top-down flow of the content, increasing the amount and the complexity of the content. As a result, users can often completely miss right-hand column content. I’ve seen this first hand in user tests I’ve conducted for other clients.

I removed one column on every page across the site. The main call-to-action was presented right below the main content, where users would easily find it. Supplemental information or promotional links to other content was available further below. Thus, while the primary content was presented full-width, secondary content could introduce columns to add variety to the page layout without breaking the flow of the page.

Visually appealing, UX architecture

The single-column approach is not without its risks. International usability standards specify a maximum text legibility line length: between 45 – 85 characters. CMS content pages utilise a single-column, vertical layout, where each element must be placed directly above or below other elements. If a UX isn’t careful, the text will naturally expand 120 – 160 characters. All sites struggle with these usability requirements and user experience designers are always looking for new ways to keep content in line.

Imagery is a great way to break up the text content. Although finding images for the homepage is never a problem, other templates often encounter this struggle. Since I had introduced the 1-image-per-page requirement to client earlier in the project, I had a good amount of visual content to work with. Thus, a typical, primary navigation, section page with 4 subpages would have at least 5 images to work with: 1 for the page itself and 1 for each of the subpages. I created a new CMS block for subnavigation pages that would include the page name, description text, call-to-action button, and an image. The CMS already allowed the editor to specify the maximum number of blocks to include in a row. For example, 3 subnavigation blocks might display side-by-side on desktop, while each would appear full-width on smaller displays. As a result, creating this single block gave the page creator the power to design a host of unique and engaging page variations.

landing page wireframe
landing page design

The project results

Once the new subnavigation and other blocks were designed and played nicely with content created in the rich-text editor, I validated the work by prototyping all the new content pages and key templates. When I presented the work to the client, I used the previous CMS test pages to demonstrate content best practices, as well as which opportunities I explored during the user experience work. Each test page was followed by a prototype of the new design.

In the end, Towry was extremely pleased with the new designs. Their EPiServer CMS has a significant amount of flexibility compared to the original design. The difference can easily be seen throughout the new site (see the homepage before and after the redesign below). While not everything was able to fit into the first phase of the project and there is certainly more work to be done (there always is), the Creative Jar team and I were able to overdeliver on a short timeline and with a tight budget.

Original homepage
Redesigned homepage