MBL Seminars is UK’s largest provider of law and compliance training seminars. They have a large library of high quality seminars and webinars, but until recently, users had to go through their website to consume content. A mobile app — initially, for iOS — was an efficient way of enabling users to digest content on the go.
I was brought on to translate the web experience to mobile. MBL’s website had hundreds of webinars and seminars, in addition to a number of additional sections — such as conferences, training, special promotions, account management and more.
There was a lot of work to be done. In addition to it, we faced a number of constraints — since we were in a legal environment, everything would have to go through a bureaucratic approval process to make sure it was done in according to compliance norms.
We started off creating a few personas, based on stakeholder interviews and research we conducted, to help us better understand the users we were designing for and get a good grasp at the core tasks they had to accomplish (I’ll include two of those personas below).
This was essential to understand the feature set the mobile app would include, and helped guide a number of core design decisions — from navigation patterns to how specific task flows would be structured.
Moving on, we used functionality maps to understand how some of the core actions would be performed:
Mapping it all out is a great way of visualizing how actions, navigation and content (to an extent) relate together, and weather we’re happy with the flows or not. In addition to it, it was a great way of keeping the team and stakeholders on the same page.
Once we were confident we had a solid foundation, we decided to move on and start visualizing how each task flow would look and feel like within the parameters of the interface.
I sketched out variations of different key elements — listing cards and opened items, for example — and then moved on to UXPin.com where I put together proper wireframes. The client was heavily involved at every step of the project — including this one. We wanted to make sure the prototypes were accomplishing the user and business needs.
The homepage has three quick actions that address the most frequent use cases identified:
For the library, we split up the content in the three different overarching categories (Conferences, Webinars, Seminars) and enabled users to filter each category by its own sub-filters. I won’t dive in detail for each decision — there’s a lot more, including sharing, checkout, contacting support and others — but the following should provide a good sense of how the wireframes turned out:
MBL Seminars had very clear brand guidelines — they had a specific color palette, typeface, and iconography that should be used. The next step was to apply these guidelines to some of the interfaces outlined during the wireframes and check-in to make sure we were moving towards the right direction.
Once we were happy with the visuals in those first interfaces, we moved on to producing the remaining mockups and creating prototypes using InVision. This was really smooth and fun to work on — the color palette was versatile and worked extremely well in a mobile environment. The icons were harmonious and the typeface, which was my biggest concern, turned to also work well in smaller screens.
The various elements we created would enable us to eventually expand the app, and, if in the future an iPad version is required, scaling will also be painless. Below are a few of the essential sections, enough to give you a sense of the overall look and feel:
Stakeholders were happy with the final result, users were going smoothly through the prototypes and the product team — manager and developers — was confident about moving on to the development phase.
The project was demanding, with a high number of stand-ups, check-ins and guidelines to follow — in addition to a tight deadline — but all in all, it was definitely fun to work on.