SessionLab Print Dialogue

SessionLab are a Latvian 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.

SessionLab were receiving a lot of feedback from their users who were struggling to print or save with the existing print agenda feature, with some users saying this was a blocker for them upgrading to a paid account. SessionLab asked me to improve the print experience so that it is more intuitive and usable.

The platform is built with React and uses a Bootstrap component library. For wireframing and prototyping I used Adobe XD.

Discovery

I started by reviewing and analysing any existing client feedback about the print and export feature. The key learnings from analysing this feedback were:

• 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, one common workaround was that users 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?”. 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. For workshop agendas they 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 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.

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.