BMA required a full website redesign to improve customer experience as well as a restructure of the information architecture.
To overhaul the existing website to become the go-to place for information, legal advice and localised union services by delivering a multi-channel brand experience inline with today's standards to retain members long-term loyalty.
The project was kicked off by creating a UX strategy blueprint. In Discovery, interviews were done with users from different branches of practices (BoP) and personas created to gain a better understanding of the different characteristics, goals, needs and pain points. After the interviews, a diagram was created to give an overview which would help understand the users environment and emotional connections towards the current site.
The standout pain points of the web application were:
1. Users struggle to understand how content is structured and to navigate the site
2. Users don't see enough value in BMA membership / benefits
3. BMA has seen a decreasing number of visits, sign ups and members leaving
4. Poor UX on site (front facing and CMS)
5. Current site is very outdated
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.
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.
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.
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.
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.
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.
To maintain consistency and ensure efficient design to dev handover, I developed a modular design system based on reusable components and their states. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user