After discovery, we entered the first phase. There were many discussions around what the MVP should be so we proposed running workshops in stages, firstly focusing on 5 key user journeys. In parallel to the workshops,

we ran serveral brand immersion sessions focusing on digital transformation and creating a better brand experience. We also conducted a competitive analysis to find out how the BMA compares with its competitors.

Wireframes

After we defined the core functionalities and stories we created quick, low-fidelity, wireframes working in 2-week sprints. Using the wireframes, we were able to conduct usability testing with BMA members at all levels. This allowed us to gather some crucial feedback to help us decide what to include in the final experience before jumping into the next iteration of our design phase.

Search

Less typing, more context. Users should be able to navigate to search regardless of where they are on your site. We aligned the search bar top-right of the navbar making it easier for users to search regardless of where they are on your site. Users do not always immediately know what search term to use when looking for an answer. By implementing the use of query suggestions and autocomplete we were able to guide users in the right direction providing them with the result they were looking for. In the case that users didn’t find exactly what they’re looking for, a past search query was added to allow the user to quickly go back and revise the search.

Categories

Due to content managers needing to display a lot of information into a deep structured menu, we determined that we needed to use a mega menu. Contained within the menu we adopted a vertical tabbed approach due to the simplistic design pattern that gave users the ability to quickly switch between each category.

Events

Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. By adding a sidebar on the left made it easier to skim and accommodated a larger number of filters, since it’s wasn't limited to the page’s width. During user sessions, we found members use “sorting” and “filtering” interchangeably. By combining, sorting and filtering in a horizontal toolbar gave users more visibility.

Mobile first

When designing for mobile, two major constraints are the relatively small screen sizes and touch interaction. Since our users comprise of members of all age groups, minimalism needed to be built into the fundamentals of the mobile design by practical necessity. Although mobile-first should not be taken as an opportunity to over-simplify it became the main focus.