SessionLab allows workshop facilitators to create bespoke training and workshop agendas. The agendas can be organised into days, categories, and types. They were receiving a lot of feedback from their clients around the print agenda feature, with some clients feeling that they needed it to be better before they would sign up for a paid account. SessionLab asked me to improve the print experience so that it is more usable, understandable and familiar to their users.
The Team and Our Tools
Based in Latvia, SessionLab is a 100% remote startup with eight employees across Europe. I worked directly with the CEO and the CTO on this project, sharing a working document on Google Drive and catching up weekly over Google Meet.
The platform is built with React and uses a Bootstrap component library. For wireframing and prototyping I used Adobe XD.
The Discovery Phase
I started by reviewing and analysing the client feedback which had built up over time. The key learnings from analysing this feedback was:
- Workarounds. Many users were documenting the workarounds they were performing to get the the desired result. We can learn a lot from user workarounds, this feedback is really helpful and shows just how much they would love to use SessionLab if only the print agenda feature met their needs. For example, often users they are taking screenshots of the in-app agenda view, which means that they love this view, but they don’t understand “why can’t I just print that?”. It also shows they are considering printouts at the agenda view, before they get to the export view.
- Simplicity. Users are screaming out for stripped-back simplicity over anything else.
- Calendar. They are used to calendar rather than list views.
The current print toolbar
There was also plenty of data about which print features and settings were being used. With most default settings being used for 94%+ of outputs, this could suggest that:
- Users will go with the defaults to get the job done quickly.
- Users will go with the defaults because the user interface isn’t clear enough.
- Users will go with the defaults first to see the output, before customising the settings and outputting again. This could be because they don’t trust the preview or the preview isn’t good enough. This can be especially true with web to print as there are lot of different, complex convertors needed so we are all generally weary about printing.
I then 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.
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 PDF 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 incase the technology fails.
Overcoming the Problem
Next I looked into the desired output – 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 clients for their feedback, seeing if I could find themes between what they did and didn’t like.
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.
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 though (albeit not perfectly), by having sessions occupying the same timespace 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 you can’t do this.
Entity relationship diagram of the current platform
Before starting with ideas, it’s also important to understand what data is available. Whilst it’s sometimes a useful exercise to design without constraints, then stripping back based on restrictions, in this case we had to show some progress quickly. To help, I mapped out a rough entity relationship diagram. With this information I could start to look at which information we could use for which output (for example, participants might not want to see materials, whereas facilitators would).
When I started to consider the design, I took reference from from OS/browser print dialogs that the users would already be used to. The page preview would be rendered as a ‘physical page’ with options dynamically changing the layout when selected.
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 descriptions/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
Mapping of the Bootstrap grid for the design of the agenda view print format
The Final Outcome
I designed two main printout styles. 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.
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 overview printout is a stripped-back, print-friendly view of the workshop agenda, with the days viewed side-by-side. It’s 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.
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.