BETTER.ORG.UK
/ ROLE
UI designer
at OLIVER agency
/ THE ROLE
- Improve the Better.org.uk experience across web
- Update the existing style guide to ensure functionality across devices and WCAG AA-standards are met
- Design components and elements which work within the Magento platform constraints
/ DESIGN AND ITERATION
Working alongside a UX designer, a project manager and the third-party development team, I was tasked with improving the design of the BETTER.org.uk website whilst adhereing to the Magento platform constraints.
Style guide: Looking across their existing digital estates as well as applying the styles to the new screen experiences, it was evident that the typography needed to be adjusted and adapted for different breakpoints. I updated the typographic system to cover device breakpoints and also updated the clients' colour palette to comply with AA standards of Accessibility.
Navigation updates: Due to the extensive list of activities, services and facilities available, one of the key pain points for customers was intrinsic cognitive load of the navigation menu. To solve this, I redesigned the navigation based on progressive reveal so as to alleviate cognitive load and avoid unnecessary visual clutter.
Addition of Search field: Many users voiced their frustration that there was no search functionality available. We introduced a search area which sat neatly above the main navigation yet didn't detract or obstruct over the page content.
Timetable and calendar screens: Customers were frustrated with not being able to see class timetables clearly, know which classes are bookable, be able to make instant bookings without having to click into each class detail or not be informed of what facilities and services were available at each venue. To solve for this, we redesigned the 'Class' component to include a clear 'book now' CTA and incorporated iconography to represent the services available. A calendar popup was added to the screen which sat next to the day/date display and a class filter was also added to the screen to further assist customers with locating their ideal class/time.
