Role
- Concept Development
- Hi-Fidelity Prototyping
- WordPress API Development
- REACT front-end development
Duration
20 Weeks
Tools
The Brief
Encore media run events with a very complex structure; multiple events each with their own websites, and each running multiple agendas, come together to run as one large event over two days. This creates a very confusing experience for the user, with difficulties in understanding exactly what they can expect on the day and an inability to plan their time with the data spread across multiple websites.
The aim of this project was to design and build a single, easy to use and understand interface that pulled through content from multiple WordPress sites API’s and could be easily embedded in each separate WordPress site.
This presents a large amount of data to the users and would need a complex but intuitive filtering system to help them identify the content relevant to them.
With 65%+ of traffic coming from mobile the solution would need a mobile first responsive approach.
WordPress API
With all of the data held in separate databases on individual WordPress installs a comprehensive set of API endpoints was created to expose the data not just for this project but for various other Native apps that would require access to agenda, speaker and partner data.
With the data coming from multiple sources but needing to be merged, a system was devised to create unique ID’s for all content and to synchronize categories and dates across all connected sites.
To allow for the fastest optimized experience on the webapp all agenda content could be pulled with one inital API call and held in local storage so that the webapp always had immediate access to all of the agendas data.
The initial call being fairly large, was heavily cached to ensure that even the first display of the app was quick for the users and there after should be almost instantaneous.
Filtering Options
With so much data presented it was need to provide a hierarchical structure by which a user could understand and then filter the data.
- Events
- Days
- Tracks / Agendas
- Categories
Events were critical information and so event logos were pulled from the API and presented as visual toggle buttons that are always visible. Days are similarly critical and so also have permanent buttons.
Tracks and categories are an unknown quantity and could have dozens of options so by default are presented as multi-select dropdowns. However an option is provided to expand the filters which then lists all tracks separated and colour coded by event and all categories listed as toggle buttons. User testing showed this provided a more intuitive way to quickly understand and filter all of the content, though it requires much more screen space so is not active by default.
Modal Windows
Modal windows were used as simple and accessible way to display each session details. This allowed users to quickly access the full content for each session with out navigating away from the main agenda content.
The modal presents the full talk description, date, time and location along with each of the speakers taking part.
The track icon and title are also provided as confirmation of the users navigation to give an option to quickly filter the agendas to just that track.
Hi-Fidelity Interactive Prototypes
After a period of brainstorming and rapid concept development with paper prototypes we quickly moved on to creating hi-fidelity prototypes in Adobe XD. Working with all of the interested stakeholders a design was chosen that fit with the themes of the individual websites but provided a cleaner fresher update.
Micro interactions
With so much content on display and changing rapidly it was necessary to create subtle animations to alert users to the changes taking place based on their interactions. Subtle fades and slides as content appears and expanding controls help to create a more engaging and understandable experience.