SessionLab are an Estonian remote-working startup with employees all over Europe. Their platform allows workshop facilitators to create bespoke training and workshop agendas, which can be filtered and sorted in a number of ways.
The existing platform
The platform is built in React and uses a Bootstrap component library. For wire-framing and prototyping I used Adobe XD.
SessionLab were receiving a lot of feedback from their users who were struggling to print or save using the existing print agenda feature, with some users even saying this was a blocker to them upgrading to a paid account.
The existing print dialogue header
Reviewing and analysing the existing user feedback that they had collected I found that:
Workarounds. Users were documenting their workarounds, a common one being that they were taking screenshots of the in-app agenda view and printing the screenshot. Some users were frustrated and didn’t understand “why can’t I just print that?”.
Simplicity. Many users commented that the platform was too complicated and not easy to understand.
Calendar. For workshop agendas users prefer calendar views rather than list views.
There was also plenty of data about which print features and settings were being used. With most default settings being used for more than 94% of outputs, this could suggest that users will go with the default settings:
...to get the job done quickly.
...because the user interface isn’t clear enough.
...first to see the output, before customising the settings and outputting again. This could be because they don’t trust the preview - unfortunately this can be especially true with web to print as there are a lot of different, complex converters needed so we are all generally weary about printing.
User Personas and End-Users
I looked into the user personas, primarily training facilitators, and what they use to create and distribute training agendas without or before SessionLab, which would typically be done in Excel/Sheets.
If we forget SessionLab for a moment, and before we even consider any development, what is it exactly that the user would really like? I found some varied, existing samples and asked some existing users for their feedback, seeing if I could find themes between what they did and didn’t want.
What I found from the examples, even though they weren’t particularly pretty, is that they were generally very clear to understand. A table is a great way to encapsulate sessions into ‘boxes’, but what tables don’t do well is to give importance to sessions based on time – a five minute session is given the same weight as a three-hour session. Calendars tend to tackle this problem much better, and many users actually mentioned Google Calendar as a good example of this.
How Google Calendar effectively uses time blocks
Breakout sessions would be a challenge (multiple sessions running at the same time), because if we prioritise clarity then really it should show the participants how the blocks occupy the time, highlighting that they have to make a choice – in a list view it is difficult to make this clear. Google Calendar tends to deal with this problem quite well, by having sessions occupying the same time space in the day. What this means however is that titles, times etc. are often cut off – on a device this isn’t too much of an issue as you can select a session to find out more information, but on paper/PDF this information is usually lost.
The People Problem
With this feedback and data in mind, I defined the people problems as:
As a facilitator, I would like to easily print a simple, clear agenda handout to distribute to the participants.
As a facilitator, I would like to easily create a PDF of a simple, clear agenda to send to the end client, weeks in advance of the session to get their sign off.
As a facilitator, I would like to easily print a simple, clean agenda with some additional information to use as either a guide for myself, or as a backup in case the technology fails.
Overcoming the Problem
Before starting with ideas, it’s also important to understand what data is available. Whilst it’s often a useful exercise to design without constraints, then stripping back based on restrictions, in this case we were working to a tight deadline. To help, I mapped out a rough entity relationship diagram of the existing platform. I could then start to look at which information we could use for which output (for example, participants might not want to see materials, whereas facilitators would).
Entity Relationship Diagram of the platform
When I started to consider the design, I took reference from the OS/browser print dialogues that the users would already be familiar with. The page preview would be rendered as a ‘physical page’ with options dynamically changing the layout when selected.
OSX print dialogue
If we think of an export of having x settings (days, page size etc.), not all settings would be compatible with all other settings, so there would be dependencies. For example, perhaps one export type would only be compatible with certain paper sizes. Whilst this would be a functional solution to the problem, it’s still not very user friendly, even once the options had been organised and with the descriptions and iconography improved. So I looked into using a number of presets to meet the most commonly requested layouts.
Initial sketch of the proposed print interface, featuring a number of commonly used preset options
The print dialogue is inspired by the OS or browser print dialogues that users will be used to. I’ve tried to use existing design patterns and components rather than design anything from scratch. In this case, following the Bootstrap component library. However, whilst I think the Bootstrap grid system is fantastic, I’m not a big fan of the components, especially the buttons / selectors which look very similar to each other. I also don’t think that the select-one vs select-many option is clear enough with these components.
The print dialogue occupies a fixed-width sidebar aligned to the right-hand side of the page. The left-hand side of the page is occupied with a large page preview. The page has a thick margin on all sides, but also is set to have a max width so as not to take over large screens.
I defined a number of pre-set layouts which combine certain settings. After selecting a preset option, the individual settings are defined below, which the user can alter. If the user alters any settings, this is saved as a custom preset per user.
The agenda preset within the improved print dialogue
The overview preset within the improved print dialogue
The agenda printout is a clean, simple, print-friendly view of the workshop agenda, with extra descriptions that can be turned on and off. It’s designed on a 12-column Bootstrap grid, which works across A4, Letter and Legal sizes. The agenda view is designed primarily for the facilitator to hand to participants on the day, giving them a clear overview of the sessions and their contents.
Mapping of the Bootstrap grid for the design of the agenda view print format
Categories are displayed as coloured tag style boxes below each block name, and grouped sessions are enclosed in a box. Breakout sessions were the biggest challenge – they are displayed with parallel tracks show the agenda timeline splitting into two. The line can break into up to five tracks within the sessions at the same time. For improved clarity, breakout sessions also feature an additional, grey tag named Breakout Session.
The grid used to build the agenda view
Subsequent pages of the agenda view print out
Session Overview Preset
The overview printout is a stripped-back, print-friendly view of the workshop agenda, with the days viewed side-by-side. It’s also been designed on a 12-column Bootstrap grid, which works across A4, Letter and Legal paper sizes.
With limited space, categories are displayed as coloured circle next to each block, with the legend running along the bottom of the page. Grouped sessions are spaced from the rest of the sessions, with a heading above. Breakout sessions with parallel tracks show with a branch icon before the session name, which is also explained in the legend at the bottom of the page.
How the 12-column grid was used to build these views
This layout can use either a four or six column layout
Within the following two months, usage of the print functionality had increased by more than 38%, with some users commenting on it being "exactly what SessionLab was missing!".
Simon delivered outstanding results. He provided very detailed and well-structured analysis as well as produced thoughtful, nice looking and functional designs. What was most rewarding while working with him was his understanding of technical constraints and out of the box thinking to work around the constraints and produce best user experience.