[Countfire](https://www.countfire.com/) is a self-funded SaaS startup based in London. Their industry-leading takeoff platform uses SVG image recognition and intelligent automation to allow electrical estimators to count symbols on multiple technical building plans in seconds (otherwise known as takeoff software).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F8c4ca2ae-af41-4009-aba0-0ecac2e4baba.jpg?alt=media&token=25dce75f-936c-4307-a26d-bd96493e07db","id":"8c4ca2ae-af41-4009-aba0-0ecac2e4baba","width":4134,"height":2756,"filename":"Countfire-Team-001.jpg","type":"image/jpeg","caption":"The Countfire team in London, 2021 🇬🇧","border":false}]}
```

I was the Lead Product Designer at Countfire. For wireframing and prototyping I used Figma. The platform was built in React and TailwindCSS.

---

## The Problem

Electrical estimators will receive projects to quote on from construction companies. Projects can range in size from a single school or hospital to multi-level office blocks. Electrical estimators will then need to count 1000s of electrical components across tens if not hundreds of building plans - this is known as *takeoff*. They will then ask suppliers for quotes on all the various components and materials they've counted, before collating it all with labour charges to fit them to send to the building contractor - this is known as *estimating*.

Before Countfire, calculating the number and type of components would typically be done by hand, printing the floor plans on A1/A0 plotters and highlighting each of the symbols.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F0f97f55b-294e-4875-a6ca-3b7a31aeb85b.png?alt=media&token=64989ada-8b53-411f-aa9d-05b7189ffe7b","id":"0f97f55b-294e-4875-a6ca-3b7a31aeb85b","width":2048,"height":1447,"filename":"CF-L1-01.png","type":"image/png","caption":"A typical drawing, of which there could be 50+ per project, split between the various domains (lighting, av, security etc.)","border":false}]}
```

Takeoff is only one part of the user journey for electrical estimators, to encourage more companies to adopt the platform, Countfire were looking to become *the home of end-to-end estimating*.

They also had a free tool for comparing specifications from suppliers, and were working on an estimating solution which processed and output the counted symbol data from the automated takeoffs. These tools though were disconnected from each other and were built using very different design systems, all of which were dated and confusing.

---

## Discovery

I was lucky to have a team of ex-estimators to help me get to grips with the world of electrical estimating. I spoke to them all regularly, throughout the entire design lifecycle. I spoke to Countfire customers, and to eliminate some bias I also spoke with electrical estimators that weren't Countfire customers - some were still using traditional methods, and some were using competitor's tools.

They helped me to understand how electrical estimators work and their frustrations, but also about the teams they typically belong to - who they report to, who the stakeholders are etc.

Additionally, Countfire had also been collecting user feedback and feature requests from the software using a third-party tool.

### User Feedback

Reviewing and analysing the user feedback I found that:

* Not only does takeoff software save the estimators a considerable amount of time, but it also increases the accuracy of counting symbols - which is a pain point for estimators as any mistakes can be extremely costly. An estimator once told me that winning a job was a horrible feeling, as you questioned why your quote was the cheapest, *“...did I make a mistake or miss something out?”*.

* If estimating companies are not well-organised it can be difficult to keep on top of all of the documents they are sent from the construction companies. This was even more challenging when companies were forced to work remotely during the COVID pandemic.

* Users considered Countfire an expensive option in the market, but conceded that it is the best takeoff software on the market and that it does pay for itself in the time it saves.

### Stakeholders

Whilst the main user persona would be the electrical estimator, if we take into account *end-to-end estimating* then we would also need to consider:

* **Construction Companies.** They produce and send the electrical estimating companies a mountain of paperwork and expect a concise quote in return. Often there will even be amendments midway through the quoting process. Construction companies will ask a number of electrical estimating companies to quote on each job.
* **Building/Component Suppliers.** Towards the end of the quoting process they will receive an itemised list of components to price from the electrical estimating company.
* **Building Contractors.** Although labour rates would generally be known in advance, rates and availability would need to be confirmed on each project.
* **Internal Stakeholders (Directors, Managers and Quantity Surveyors).** Although they wouldn't perform the takeoff or estimate themselves, they would be in direct contact with the construction companies and would be expected to be on top of the progress of each project. The stakeholder map below highlights how the electrical estimators are a bottleneck to accessing information and progress on the Countfire platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2Fe34a3908-b1e7-4b60-88c8-4ce280e54d8b.png?alt=media&token=e2149f7a-274e-4fb4-a997-69041be931f3","id":"e34a3908-b1e7-4b60-88c8-4ce280e54d8b","width":1680,"height":1440,"filename":"Artboard@2x (3).png","type":"image/png","caption":"Stakeholder Map - Existing Platform","border":false}]}
```

### The People Problem

Using this feedback analysis, I defined the *people problems* I was looking to solve as:

* As an electrical estimator, I would like everything relating to the project in one place, especially when working collaboratively with other estimators, and/or from outside of the office.

* As an estimating manager/director, I would like an overview of all projects in one place, and to not have to use and pay for multiple tools.

---

## Overcoming the Problem

### Understanding the Status Quo

I mapped out the systems and processes needed to takeoff and estimate a project, which can help me better understand any part that can be streamlined, improved or even eliminated. The systems map highlights just how many processes are needed and how organised an electrical estimator needs to be to avoid any errors or delays.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F22feba31-9f47-4dd2-bd62-758b13d7b0f5.png?alt=media&token=2b91017a-0930-44ec-9dbe-1402116797f0","id":"22feba31-9f47-4dd2-bd62-758b13d7b0f5","width":2928,"height":3144,"filename":"Systems Diagram.png","type":"image/png","caption":"Systems diagram of the process of performing a takeoff and estimate","border":false}]}
```

I also interviewed electrical estimators to better understand them. I put together an empathy map of their thoughts, feelings, actions, and comments.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F9590578e-3a8d-4cd1-a45c-412d4f85e6e6.png?alt=media&token=6c3398db-9a88-490a-bbe5-95ed785544e9","id":"9590578e-3a8d-4cd1-a45c-412d4f85e6e6","width":3163,"height":3086,"filename":"Empathy Map.png","type":"image/png","caption":"Empathy map of an electrical estimator","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F2745f3bc-4bd9-41d7-ab56-1356268f6022.png?alt=media&token=9e16bcb4-1e9d-4749-8399-1c7136394fca","id":"2745f3bc-4bd9-41d7-ab56-1356268f6022","width":7128,"height":5190,"filename":"Radar plot.png","type":"image/png","caption":"Radar plot of the problem characteristics","border":false}]}
```

### Problem Abstraction

Abstracting the problem can help to overcome any cognitive biases, allowing us to focus on the real, root problem. This actually helped to show me that there were some alternatives which would involve very light development - notifications for example.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F0a11bf80-83bf-464f-9dcb-9da8551ad420.png?alt=media&token=60ec6cb5-1479-46ca-89a3-292816698fb4","id":"0a11bf80-83bf-464f-9dcb-9da8551ad420","width":3360,"height":1440,"filename":"Problem abstraction.png","type":"image/png","caption":"Problem abstraction tree","border":false}]}
```

### Projects

The idea I wanted to explore was to combine all takeoffs, estimates, and specifications (and potentially notes, amendments etc. in future) into a single ‘project’. This would turn Countfire from a tool which estimators use as part of the estimating journey, to the single source of truth for the project. This would also allow better visibility for others accessing the project, not having to look in various places for information relating to the project (emails, papers on desks, cloud storage etc.).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F8625d963-d96d-42b1-94c6-b87ba20cb9f0.png?alt=media&token=870c7e14-59a9-46d2-a682-31b2e6589d46","id":"8625d963-d96d-42b1-94c6-b87ba20cb9f0","width":3216,"height":1320,"filename":"Artboard@2x (3).png","type":"image/png","caption":"From disconnected files to collaborative projects","border":false}]}
```

Additionally, adding metadata to the project such as due dates, project owners, client, and project type allows us to build a high-level dashboard for better visibility to stakeholders. Stakeholders would be able to search, sort, and filter projects, meaning they could provide the end client with project updates whilst on the phone - without needing to check-in with the estimator first.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2Fce91cf18-f8f6-4caa-9835-ae8d38df1519.png?alt=media&token=7ab8e35b-d121-4e4e-beff-2a6e976d9f32","id":"ce91cf18-f8f6-4caa-9835-ae8d38df1519","width":5760,"height":4303,"filename":"08 _ Project -.png","type":"image/png","caption":"Wireframe of project page","border":false}]}
```

### Styling and Branding

To improve the user experience I also looked at how to update the interface to make it more aesthetically pleasing, uniform and intuitive. The key stakeholders wanted Countfire to be portrayed as a modern solution which focusses more on quality than it does on price. A brand not mixed in with the conservative crowd, and not as male focussed as a lot of the competition.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F426e8b5b-64ad-48b4-9367-2f9ae192506b.png?alt=media&token=02fe16ba-b40c-4fdd-8028-5f4a073454e7","id":"426e8b5b-64ad-48b4-9367-2f9ae192506b","width":1864,"height":1516,"filename":"competitor-positioning.png","type":"image/png","caption":"Competitor positioning","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F8a2de8f1-0702-45ed-9afc-73095519ab88.png?alt=media&token=fe73ca09-33d4-489f-b175-3e41cd136e0f","id":"8a2de8f1-0702-45ed-9afc-73095519ab88","width":2060,"height":2000,"filename":"Colour_options_-_Orange.png","type":"image/png","caption":"Exploring brand colour and logo options","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2Fd36464f9-e481-472c-9d82-8de8f53cdbd1.png?alt=media&token=0808dfdc-9d6c-447e-924f-f6a1f0d8e2d6","id":"d36464f9-e481-472c-9d82-8de8f53cdbd1","width":1160,"height":1060,"filename":"suite-cell.png","type":"image/png","caption":"The Countfire product suite","border":false}]}
```

---

## Design

### Design System and Component Library

I came up with a design system and component library to use across the entire suite of platforms. The design system is our knowledge base on how our platforms should look and behave. It is our single source of truth and makes sure that our platforms look unified and are intuitive to use.

The dark theme first approach, with a strong orange accent highlights Countfire’s innovative and modern offering, in an otherwise traditional and conservative market.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F8d39be5d-f370-41ef-ac02-bd916b2bfd35.png?alt=media&token=f3ceecc4-fc71-4e2a-89e0-3b397292c5ee","id":"8d39be5d-f370-41ef-ac02-bd916b2bfd35","width":2880,"height":2176,"filename":"Colour palette.png","type":"image/png","caption":"Colour palette","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F37298d70-1936-491b-9bdf-67583a71ddea.png?alt=media&token=dea42f3d-f5c4-4153-bebc-da9792674033","id":"37298d70-1936-491b-9bdf-67583a71ddea","width":2880,"height":2870,"filename":"Typography.png","type":"image/png","caption":"Typography","border":false}]}
```

The components were loosely based on TailwindUI - a subsidiary of the CSS framework we were using in this rebuild, [TailwindCSS](https://tailwindcss.com/).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F5859dbf1-980b-462b-adc4-7ed4b1afee4a.png?alt=media&token=6a4551d4-7c22-4069-9c93-826a6f35eb9a","id":"5859dbf1-980b-462b-adc4-7ed4b1afee4a","width":4736,"height":3296,"filename":"Modals.png","type":"image/png","caption":"Modals","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2Fe30b0360-b42f-47ac-bd4e-d89a46587e0c.png?alt=media&token=02c17a9a-f86e-43ac-a006-aa30911e2abb","id":"e30b0360-b42f-47ac-bd4e-d89a46587e0c","width":3882,"height":3008,"filename":"Select menus.png","type":"image/png","caption":"Select menus","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2Fb2608cfb-cc0e-4b82-8b70-fa7136bfdfcd.png?alt=media&token=79423d95-5d63-4d70-a295-98f6fea4c1d9","id":"b2608cfb-cc0e-4b82-8b70-fa7136bfdfcd","width":4482,"height":4832,"filename":"Alerts.png","type":"image/png","caption":"Alerts","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2Fc9d2c5b5-5e56-446e-aca9-04622be3108c.png?alt=media&token=7ec31533-ac6f-4f95-a849-b686145f0ad1","id":"c9d2c5b5-5e56-446e-aca9-04622be3108c","width":3200,"height":3760,"filename":"Tables.png","type":"image/png","caption":"Tables and Grids","border":false}]}
```

### Collaborative Projects

I combined everything relating to a quote into a 'project'. The project contains everything needed to takeoff and estimate a project, plus additional materials such as specifications and notes which would otherwise get lost on emails. This means that Electrical Estimators can collaborate on projects without needing to look anywhere else, and Estimating Managers can see up-to-date progress on everything their team is working on.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F69fd086a-fc2e-4203-85bb-8c59a29a47d3.png?alt=media&token=48db3a60-ef74-46d0-a720-36ba420e65cb","id":"69fd086a-fc2e-4203-85bb-8c59a29a47d3","width":5760,"height":3600,"filename":"Project detail page.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F1e9a3f85-44c5-4ef8-a9b4-2a81f75e8f91.png?alt=media&token=45502416-9557-4a56-bfc1-1fd573b3c0e0","id":"1e9a3f85-44c5-4ef8-a9b4-2a81f75e8f91","width":5760,"height":3600,"filename":"Dashboard - All projects.png","type":"image/png","caption":"","border":false}]}
```

I also looked at the workflow for working on and managing drawings, which now have progress indicators and notes, and are divided into disciplines.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2F2MrQQVWhnJkcPgYiIrHS%2F9b64daad-46b2-4d31-ae57-e6895220c118.png?alt=media&token=7dad2230-d40e-4636-89db-f89909373fb7","id":"9b64daad-46b2-4d31-ae57-e6895220c118","width":5760,"height":3600,"filename":"Takeoff - Drawings page 3.png","type":"image/png","caption":"","border":false}]}
```

---

## Outcome

Aside from very positive feedback on how good the new interface looked, users commented on the new structure and interface as being so much more intuitive to use. Even some underused features which had little change reported more than a 30% increase in usage, just from being moved into the project structure.

More importantly, being able to connect these estimating features into a single workflow meant that Countfire could compete with other end-to-end estimating packages and would no longer be known as just takeoff software.

This is just the beginning and we’ve really just scratched the surface with this update. This new structure allows us to include more collaborative features and add everything relating to a project, for example: dealing with revisions, notifications based on deadlines, estimated costings based on previous activity, and dealing with multiple floors with the same plan.

> *Simon's ability to think outside the box coupled with a keen eye on industry trends leads him to produce eye catching designs time after time. Simon is extremely approachable and always available to run past ideas. He is great fun to be around. I'd highly recommend Simon.*
>
> **Tom Dally**\
> Geo-Expansion at TrueLayer

Case Study: End-to-End Estimating Software

Glisser is an app that aims, as their mission statement suggests: *“to improve the exchange of information when people come together”*. It is a suite of interactive presentation platforms which allow questions and answers between the presenter and the audience, live polling, and slide sharing.

Glisser are a highly ambitious, quickly growing, Microsoft-backed startup with offices in London, New York and Portland, and a QA team in Kharkiv, Ukraine.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2Fccb52a7b-6124-4d54-a386-6e26e1b8c5de.jpg?alt=media&token=8b3466ee-4d2b-46a9-9f8d-c7b0b611f872","id":"ccb52a7b-6124-4d54-a386-6e26e1b8c5de","width":2048,"height":1367,"filename":"glisser-teamparty.jpeg","type":"image/jpeg","caption":"The Glisser team in London","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F1df0f9d7-24f4-4db3-a35c-1cb5d37093fa.jpg?alt=media&token=d8479475-701a-408e-af69-490cf1b2a1fb","id":"1df0f9d7-24f4-4db3-a35c-1cb5d37093fa","width":1280,"height":960,"filename":"portfolio-glisserlive-guymon.jpg","type":"image/jpeg","caption":"Guy Primavera (Full-Stack Developer) and Simon Mauro Guido","border":true}]}
```

I was the sole designer on the project, working with a full-stack developer to build the platform. For wire-frames and the prototype I used Abode XD. We built the proof of concept using a WordPress multi-site installation with Materialize CSS. The LIVE pages were built as a custom-post type.

---

## The Problem

Whilst Glisser *improves the exchange of information when people come together*, what about when you can’t make it to the event? Event live streaming is more popular now than it’s ever been, but you still feel disconnected from the presentation.

I was looking to find a way of engaging fully remote and hybrid audiences to the presentation, allowing them to contribute to the discussion as though they were in the room.

---

## Discovery

Over a period of nine months I attended live-streamed events across London, and sat with the AV technicians to learn exactly how event live streaming works. I started to experiment with live streaming myself, I bought the equipment I’d need and shot a few low-profile events for clients to find out all of the complications of the job. I also looked into how live streamed events were being marketed, shared, and what platforms were being used to stream on, and the pros and cons of each.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F75119a49-8812-403a-99aa-28bf422005ee.jpg?alt=media&token=6f4a0b16-45ab-403b-a3fa-847c2a0170e6","id":"75119a49-8812-403a-99aa-28bf422005ee","width":1024,"height":768,"filename":"portfolio-glisserlive-anglocamera.jpg","type":"image/jpeg","caption":"Live-streaming a client event in London","border":true}]}
```

---

## Overcoming the Problem

Platforms such as YouTube, Facebook Live, and LiveStream by Vimeo were using comments during streams really well. The web layout for watching streamed presentations (such as webinars, product launches etc.) was starting to become standardised, which is great because it means user onboarding and acceptance becomes a lot easier and more instinctive.

What these platforms were missing however, was the direct interaction with the presenter and the rest of the audience.

---

## Design

I worked Glisser’s interactive features around the now standardised, familiar streaming layout, with the presenter Q&A replacing where you might typically find the comments. Time-sensitive, intrusive features such as polls would overlay the stream, prompting the participant to answer promptly.

I worked with a developer to build this idea out in a WordPress site as a proof of concept. Each presentation/stream would be a ‘page’ linking the presentation ID with the embedded live stream link from an external streaming provider. The page would call the Glisser API to load personalisation options for each presentation, such as: colour scheme, company logo, holding slide etc. This meant that with just a handful of settings you could create your own event live stream webpage.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F6f8455bb-ed34-42b3-b73b-38d94759e233.jpg?alt=media&token=096c61b2-27a7-4d3f-8915-07367939babd","id":"6f8455bb-ed34-42b3-b73b-38d94759e233","width":2048,"height":1437,"filename":"portfolio-glisserlive-layoutsketch.jpg","type":"image/jpeg","caption":"Defining the layout based on existing live streaming solutions","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2Fa9bda731-444c-45d6-8946-4c923c7ed1f1.jpg?alt=media&token=b5d2c02d-7e22-4994-a6b0-370cb2eeec52","id":"a9bda731-444c-45d6-8946-4c923c7ed1f1","width":2048,"height":1437,"filename":"portfolio-glisserlive-layout.jpg","type":"image/jpeg","caption":"Looking to solve the issue of working with YouTube markers from an embedded video","border":true}]}
```

Whilst the proof of concept was never meant to see the light of day, it was so effortless to use in testing that we trialed it a number of live events in London where I went on-site. A potentially critical issue which was picked up in live testing was that attendees accessing the presentation early wouldn’t see any last-minute changes made by the presenter. We looked at how we could refresh audience devices but without an attendee login it would mean losing any notes and questions made so far. This led us to instead implement a ‘coming soon’ holding screen before the presentation started, allowing the presenter to make any last minute changes until the presentation start time.

The development team then built the streaming functionality into the Glisser platform, meaning that our on-site support team and clients were able to switch their audience view to include a stream in their presentation setup options.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F13bb5a0b-0316-48c2-8c18-ab9385f30fbe.png?alt=media&token=de43e7ee-829c-4185-bc78-5e81bc281dbc","id":"13bb5a0b-0316-48c2-8c18-ab9385f30fbe","width":1600,"height":1200,"filename":"glisserlive-tedx.png","type":"image/png","caption":"TEDx - Looks aren't everything. Believe me, I'm a model.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F36375588-b62e-4b41-9571-99c63bfdb90e.png?alt=media&token=1fba14f6-5d14-454e-b5d7-0ec9bad9cd22","id":"36375588-b62e-4b41-9571-99c63bfdb90e","width":1600,"height":1200,"filename":"glisserlive-spotify.png","type":"image/png","caption":"Spotify - Audio-First, The Path Ahead","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F3edea5fc-afaa-4220-8904-6c92c6d3c811.png?alt=media&token=a1c54cda-050b-42ed-93b1-29c9474e36ad","id":"3edea5fc-afaa-4220-8904-6c92c6d3c811","width":1600,"height":1200,"filename":"glisserlive-windows.png","type":"image/png","caption":"Microsoft - The Journey to One Windows","border":false}]}
```

---

## The Final Outcome

The Glisser LIVE platform landed Glisser’s largest ever deal, and has been used to host events worldwide, including a number of TEDx talks. Glisser LIVE was featured in the event trade press as being a breakthrough in making streamed events more interactive and accessible. In November 2018, Glisser LIVE won *‘Best Hybrid Event Live Streaming Solution’* at the Event Tech Awards.

**2020 Update:** During the coronavirus outbreak in 2020, where almost all live events globally were cancelled, Glisser LIVE became *crucial* to Glisser’s customers who had to switch to live streamed events. Glisser as a company shifted their entire model around their streaming solution and have now even developed their own hosting for streams - no longer having to rely on YouTube, Vimeo etc. And in 2021 Glisser LIVE won ‘Best Virtual & Hybrid Event Platform’ from the Virtual Events Institute.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F2321c7da-3ffe-41bf-b372-669c96242cc6.png?alt=media&token=f04e7a71-7cbb-41a6-b932-668019798a9c","id":"2321c7da-3ffe-41bf-b372-669c96242cc6","width":2048,"height":1536,"filename":"glisserlive-awardetl.png","type":"image/png","caption":"Best Hybrid Event Live Streaming Solution, 2018","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FevL50zpfOKjosgOP6Ish%2F0bae5124-c347-45ba-aa3c-8e85a7afdbec.png?alt=media&token=376d3631-c64f-4eaf-b6c6-acf78927fe14","id":"0bae5124-c347-45ba-aa3c-8e85a7afdbec","width":2048,"height":1536,"filename":"glisserlive-awardvei.png","type":"image/png","caption":"Best Virtual & Hybrid Event Platform 2021","border":false}]}
```

> *Can I just say, that this is the sexiest audience engagement solution for live events. Simon, you’re one of the most talented Product Designers I know. Big kudos to someone who puts so much love and passion into their work.*
>
> **Carsten Pleiser**\
> CEO at The Event Tech Tribe

Case Study: Live Streaming Presentation Platform

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F30ca9dc5-9d37-44bc-8537-af1b866f5e17.png?alt=media&token=37725ac9-af7a-4428-9ed8-58da24731e78","id":"30ca9dc5-9d37-44bc-8537-af1b866f5e17","width":1280,"height":720,"filename":"sessionlab-header.png","type":"image/png","caption":"The existing platform","border":false}]}
```

The platform is built in React and uses a Bootstrap component library. For wire-framing and prototyping I used Adobe XD.

---

## The Problem

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F2a1db83b-8b7a-4679-8ecb-acba688a7b33.jpg?alt=media&token=0589e18a-49f0-43d7-b37b-746c472ac016","id":"2a1db83b-8b7a-4679-8ecb-acba688a7b33","width":2048,"height":357,"filename":"portfolio-sessionlab-currentprint.jpg","type":"image/jpeg","caption":"The existing print dialogue header","border":true}]}
```

---

## Discovery

### Client Feedback

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.

### Usage Data

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F11458b58-c49f-4255-a41b-444a26716b35.png?alt=media&token=fd733f1a-9075-486e-be03-8b0e05df7d71","id":"11458b58-c49f-4255-a41b-444a26716b35","width":3568,"height":1852,"filename":"sessionlab-gcal.png","type":"image/png","caption":"How Google Calendar effectively uses time blocks","border":false}]}
```

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

### Platform Structure

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).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F8b6efc4f-d5ef-45e7-9621-bc136698f222.png?alt=media&token=0c7c1995-95e8-4a24-9daa-4db554004ea6","id":"8b6efc4f-d5ef-45e7-9621-bc136698f222","width":1600,"height":1200,"filename":"sessionlab-relationships.png","type":"image/png","caption":"Entity Relationship Diagram of the platform","border":false}]}
```

### Ideation

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2Fae5b05c8-ae03-4255-8856-f5ffda7a8e00.png?alt=media&token=088d8b45-229e-4415-b2d5-fc295d618011","id":"ae5b05c8-ae03-4255-8856-f5ffda7a8e00","width":1600,"height":1200,"filename":"sessionlab-osxprintdialog.png","type":"image/png","caption":"OSX print dialogue","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F1cfe95c3-1a41-4939-8d32-4730741fce7d.jpg?alt=media&token=3caab9a1-7927-4392-8b8b-fc35ef5703b2","id":"1cfe95c3-1a41-4939-8d32-4730741fce7d","width":2048,"height":1536,"filename":"portfolio-sessionlab-sketch.jpg","type":"image/jpeg","caption":"Initial sketch of the proposed print interface, featuring a number of commonly used preset options","border":false}]}
```

---

## Design

### Print Dialogue

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](https://getbootstrap.com/docs/4.0/getting-started/introduction/). 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F19aa5b0d-62a9-4c37-97b2-ef3b04a87196.png?alt=media&token=e9a420cf-fcfa-4200-aa1c-7a14e1c3167e","id":"19aa5b0d-62a9-4c37-97b2-ef3b04a87196","width":1600,"height":1200,"filename":"sessionlab-dialog-agenda.png","type":"image/png","caption":"The agenda preset within the improved print dialogue","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2Ff3d5534a-a98f-41ba-8a38-62c92c957838.png?alt=media&token=1d41f76c-a6e4-41dc-afc1-a223b4235158","id":"f3d5534a-a98f-41ba-8a38-62c92c957838","width":1600,"height":1200,"filename":"sessionlab-dialog-overview.png","type":"image/png","caption":"The overview preset within the improved print dialogue","border":false}]}
```

### Agenda Preset

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F14a39a9e-5267-4acb-b3c1-a2b52f2ec6aa.png?alt=media&token=98ea8210-bc38-4620-ab3f-47cbcc350a43","id":"14a39a9e-5267-4acb-b3c1-a2b52f2ec6aa","width":2048,"height":600,"filename":"portfolio-sessionlab-bootstrapgrid2.png","type":"image/png","caption":"Mapping of the Bootstrap grid for the design of the agenda view print format","border":true}]}
```

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*.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F5cb1dc6d-944a-4be0-8870-0fda269b0a53.png?alt=media&token=4a4b7736-e6b7-4f9a-afcc-2fee77fb343d","id":"5cb1dc6d-944a-4be0-8870-0fda269b0a53","width":1600,"height":1200,"filename":"sessionlab-agenda-grid.png","type":"image/png","caption":"The grid used to build the agenda view","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F503f709e-dbe3-4eed-b3c4-d5944d092dac.png?alt=media&token=394db6ce-51fc-4f11-912a-d88602d18b00","id":"503f709e-dbe3-4eed-b3c4-d5944d092dac","width":1600,"height":1200,"filename":"sessionlab-agenda-page.png","type":"image/png","caption":"Subsequent pages of the agenda view print out","border":false}]}
```

### 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2F2edc9dc2-dee7-4bba-9077-a09508ca8021.png?alt=media&token=541bc817-3c94-4843-9433-6ef8dc2e1be7","id":"2edc9dc2-dee7-4bba-9077-a09508ca8021","width":1600,"height":1200,"filename":"sessionlab-overview-grid.png","type":"image/png","caption":"How the 12-column grid was used to build these views","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FoHyj6rf1UptarU9wQMqI%2Faa3b81f4-8f4d-4fd3-a5c2-1d8a035948d6.png?alt=media&token=267a5a15-e906-466a-9b66-f738a412f649","id":"aa3b81f4-8f4d-4fd3-a5c2-1d8a035948d6","width":1600,"height":1200,"filename":"sessionlab-overview-page.png","type":"image/png","caption":"This layout can use either a four or six column layout","border":false}]}
```

---

## Outcome

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.*
>
> **Filip Kris**\
> CTO at SessionLab

Case Study: Workshop Facilitation Print Dialogue

What if instead of just watching  presentation, you could actually take part in it – shape it, change it, get feedback? Glisser is a suite of interactive presentation platforms which allow questions and answers between the presenter and the audience, live polling, and slide sharing.

Glisser are a highly ambitious, quickly growing, Microsoft-backed startup with offices in London, New York and Portland, and a QA team in Kharkiv, Ukraine.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F5a3db049-7e3a-411b-b250-52e14aa043fc.jpg?alt=media&token=edf92c02-0848-4517-b4c0-49e4d6bce5aa","id":"5a3db049-7e3a-411b-b250-52e14aa043fc","width":1024,"height":683,"filename":"portfolio-glisserapp-microsoftaccelerator.jpg","type":"image/jpeg","caption":"The Glisser team at the Microsoft Accelerator in London 🇬🇧","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2Fe77b143a-cbb6-4e8f-8a83-bca22005b226.jpg?alt=media&token=391f5842-f1e3-48b0-b71b-9f222a8a7792","id":"e77b143a-cbb6-4e8f-8a83-bca22005b226","width":2048,"height":1536,"filename":"portfolio-presenter-ukraine.jpg","type":"image/jpeg","caption":"Meeting with the QA team in Kharkiv, Ukraine 🇺🇦","border":true}]}
```

The platform was built using Node.js with Web Sockets for the backend, Angular 6 with TypeScript, SCSS, and Bootstrap 4 for the frontend. I was the Head of Design at Glisser, and for wire-framing and prototyping I used Sketch and Adobe XD.

---

## The Problem

Glisser started when the founder, a former Marketing Director, realised that whilst a lot of his marketing budget was being allocated to events, it was difficult to measure whether that money was actually being well spent. Event effectiveness was still being measured on attendee numbers, and calculated by how many unused name badges were left. He calculated that inputting the data from paper feedback forms into the company CRM system would take his team almost 400 days! Whilst at the same time £1,000s were being spent printing copies of slide decks to leave on seats for attendees - only for them to be thrown away when last minute changes were made to the presentation.

It turns out he wasn’t alone. Forrester Research indicates that business-to-business companies spend nearly a quarter of their marketing budget on events. Despite big budgets, very little is being spent measuring, analysing and proving event ROI.

The aim of this project was to collect and use event data to give event managers a way to prove that their events are successful.

---

## Discovery

When I joined Glisser there were just four of us. The core functionality had been designed and built by the CTO, with a basic proof of concept working for select clients. I attended live events in London and I spoke with existing clients to understand the key problems that they were trying to solve, what tools they were currently/previously using to solve them, and any workarounds that they had found so far.

### User Personas

* **Presenters** - It's stressful being a presenter! You've got enough to worry about on the big day without some fancy, new tech being one. How can Glisser make presenting *easier* and *better* for them?

* **Attendees** - The app needs to be intuitive and fun to use, which will drive engagement. Attendees are key to the success of Glisser, but ultimately they're not the buyers.

* **Event Managers** - Being an event manager isn't easy, there is so much to organise in advance of the big day - and there are always unexpected issues to overcome on the big day too. Whilst event managers interact with Glisser the least, they are the buyers. The key is to make their job easier and more importantly, to help them to measure ROI from events.

### Attendees

A lot of time and money had been spent on creating a basic attendee app, which was live on the app store. However, speaking to attendees, the most important thing we learned was that they were often reluctant to download a *disposable* app from the App Store just for a single event. Although venues do usually offer free wi-fi, it’s rarely reliable, straightforward to connect, and fast enough to quickly download apps (sometimes downloading apps is even blocked).

Some other interesting feedback I received was that whilst the original platform worked well, it’s not always clear how to use everything on it. The learning curve to using the platform had sometimes got in the way of using it to its full potential. This meant that the redesign had to feel more intuitive, natural, and easy to pick up.

### The People Problem

With these user personas in mind, I defined the *people problems* as:

1. As an event manager, I would like to report back on the success of the events I run with analytical data.

2. As a presenter, I would like to better engage my audience to improve my presentation quality.

3. As an attendee, I would like to be more involved and engaged in the presentation.

---

## Overcoming the Problem

### Presentation Management Platform

Glisser was never going to become a slide creation tool, therefore for content creation we had to work with existing tools. Presenters would be responsible for uploading their slide decks into Glisser, and adding interactive elements, polls, and slides to their presentations, so I looked into PowerPoint and KeyNote to understand and even mimic parts of the user interface and behaviours that presenters were already used to. With interactive presentations being a relatively new concept it was important to make the transition from *presentation* to *interactive presentation* as seamless as possible.

Presenters want to engage their audience and keep their presentation fun. Linking to the audience member’s phones, the presentation management platform would actually use that audience engagement as a *trojan horse* to encourage audience members to provide valuable data – essentially the Facebook modal for live events.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2Fc32e6f7b-b72e-4b43-a1ee-37ae748bb4fc.jpg?alt=media&token=741a12ed-c185-4cae-bdb4-7ee64f5df538","id":"c32e6f7b-b72e-4b43-a1ee-37ae748bb4fc","width":2048,"height":1437,"filename":"portfolio-presenter-analytics-logic2.jpeg","type":"image/jpeg","caption":"Mapping of event analytics struture","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F84e40cc3-b3e1-4f10-b134-fc6923c089e6.jpg?alt=media&token=a7be9997-9b1e-4f32-93bc-4d83833658b5","id":"84e40cc3-b3e1-4f10-b134-fc6923c089e6","width":2048,"height":1437,"filename":"portfolio-presenter-livecontrol-logic2.jpeg","type":"image/jpeg","caption":"Mapping of moderation functionality in preparation for user testing","border":false}]}
```

### Attendee App

It wasn't an easy call to make, especially after so much work had gone into the iOS and Android apps, but we quickly decided to shift to creating a web-app instead, which the attendees could access via any browser.

---

## Design

For presenters and even more so for attendees the platform was essentially a single-use, disposable platform. They would have little to no say in whether or not Glisser was used - so user familiarity was crucial. There is no learning curve, either it's instinctive or it won't be used. Glisser had to feel like any other app on your phone.

With this in mind I designed a custom design framework based on [Material Design](https://medium.com/@smgdesign/material-design-add2d8033ded). With almost everyone used to the Google suite of products, the idea was to make everyone immediately feel at home on the platform.

With the development team I worked to build a component library, which although took some time to get right, meant that any new features were quick and easy to build.

### Presentation Management Platform

We built an event structure idea, housing a collection of presentations organised within an event agenda. The event structure also changes the audience’s perspective, as the app becomes an event agenda with access to all presentations. Having spoken to event managers about how they plan their events it was clear that we had to integrate with other event platforms and import existing event agendas, to save the user having to build their event agenda twice. And with presentations often being supplied last minute it was also important that the structure could be built in a non-destructive way for when inevitable last minute changes and additions are made.

Getting presenters on board with fun presentations was crucial, but the key persona in all of this was the Event Manager. We needed to not only make their jobs easier, but to arm them with data they’ve never had before on their events to take to their managers to prove the event’s, and their own, success. Therefore the analytics platform would be Glisser’s biggest sell.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F343e0465-b5fa-4848-ae95-f326db44b4c5.png?alt=media&token=b21d2ccd-b81d-495e-aa09-9e031c24e338","id":"343e0465-b5fa-4848-ae95-f326db44b4c5","width":1600,"height":1200,"filename":"glisser-sessions.png","type":"image/png","caption":"Presentation and event library","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F9210e3a3-13fa-4c99-afb1-f0441ba0960a.png?alt=media&token=3b810894-618d-4fe5-b56f-541ed8b2e77a","id":"9210e3a3-13fa-4c99-afb1-f0441ba0960a","width":1600,"height":1200,"filename":"glisser-analytics.png","type":"image/png","caption":"The analytics platform","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2Fc95cd4ac-b326-494d-95f6-710079d4a7d4.jpg?alt=media&token=e621d33d-883f-4cd4-a8e3-6a4aee43ac4e","id":"c95cd4ac-b326-494d-95f6-710079d4a7d4","width":2048,"height":1437,"filename":"portfolio-presenter-analytics-mocks2.jpeg","type":"image/jpeg","caption":"Initial ideas for the event analytics","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F0c83a6c2-8ec7-401e-9d3b-3ae199d57442.jpg?alt=media&token=2116748c-9d6a-4e58-b013-1d2786021868","id":"0c83a6c2-8ec7-401e-9d3b-3ae199d57442","width":2048,"height":1536,"filename":"portfolio-glisserpresenter-events.jpg","type":"image/jpeg","caption":"Event structure","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2Ffa5cf95e-f646-452b-bc29-1838a55ab37a.jpg?alt=media&token=5c595055-963e-4fd0-94cb-4302a3c61426","id":"fa5cf95e-f646-452b-bc29-1838a55ab37a","width":2048,"height":1536,"filename":"portfolio-glisserpresenter-pollmodal.jpg","type":"image/jpeg","caption":"Building polls and interactive slides","border":false}]}
```

### Presenter Platform

The presenter platform is what goes up on the big screen at the front of the room - the interactive slides, the polls, Twitter wall etc.

I went for a stripped back, simple, visual interface - designed to suit any slide design.

### Moderation Platform

Some of the bigger clients asked for more control over their presentations, specifically being able to moderate potentially embarrassing questions before they appear on the main screen. A moderation platform would typically be used by a presenter’s aid in the audience, on a tablet or laptop at high profile events.

This user has a crucial role at an event, managing what is being displayed on the big screen. I ran extensive user testing to understand exactly how users interpret icons, buttons, and terminology in a high-pressure situation such as during a live event.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2Fb62f9753-b991-4a42-bbf7-cb8ec56872e0.jpg?alt=media&token=68e8c2d8-0e08-4868-9146-d5a2080367ad","id":"b62f9753-b991-4a42-bbf7-cb8ec56872e0","width":2048,"height":1536,"filename":"portfolio-glisserpresenter-livecontrol.jpg","type":"image/jpeg","caption":"The moderation platform on an iPad","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F6599785e-f884-49a8-b6db-1f208a70b981.jpg?alt=media&token=880f85f7-e788-46ed-bcba-0e6c2484150b","id":"6599785e-f884-49a8-b6db-1f208a70b981","width":2048,"height":1437,"filename":"portfolio-presenter-livecontrol-testing2.jpeg","type":"image/jpeg","caption":"User testing on moderation platform mockups","border":false}]}
```

### Attendee Web-App

The *'disposable'* web-app, accessed by a unique web address or QR code. It uses a custom Material Design component library aimed to be instinctively intuitive above all else.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F93ca5f7b-ee06-4de9-984d-cfec1a855230.png?alt=media&token=24238b58-7b4c-4fec-8082-126a9f43f1f9","id":"93ca5f7b-ee06-4de9-984d-cfec1a855230","width":1600,"height":1200,"filename":"glisser-audience-screens.png","type":"image/png","caption":"","border":false}]}
```

When interactive presentations are linked together into an event the attendee web-app becomes a searchable presentation platform which allows the attendee to go in and out of the various presentations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FftTyL0t3ymmEfiQGpy6B%2F5e9e3e60-a9ac-4689-be86-a78ea1d9fc9a.png?alt=media&token=cf928123-2061-4e93-b8ef-27122aa85116","id":"5e9e3e60-a9ac-4689-be86-a78ea1d9fc9a","width":1600,"height":1200,"filename":"glisser-event-screens.png","type":"image/png","caption":"","border":false}]}
```

---

## The Final Outcome

The Glisser Presentation Management System is now used by some of the some of the biggest companies in the world, including LinkedIn, Herbalife and EY. It has been used at events such as Mobile World Congress, Cannes Lions, and various TEDx talks.

### Testimonial - Filming and Post-Production

In 2019 I flew to New York to film and edit a testimonial video for Glisser. Below, Joe Chabot from Bowlero talks about his experience using the redesigned Glisser platform and the problems it has solved for him and his team.

```cv
vimeo
{"url":"https://vimeo.com/328367078","width":1920,"height":1080,"thumbnail":"https://i.vimeocdn.com/video/772878108-73e1f2ec1543f1df333029f5859f134e3446ba28cf5d16294876a13038cb13a1-d_100x75"}
```

> *Can I just say, that this is the sexiest audience engagement solution for live events. Simon, you’re one of the most talented Product Designers I know. Big kudos to someone who puts so much love and passion into their work.*
>
> **Carsten Pleiser**\
> CEO at The Event Tech Tribe

Case Study: Interactive Presentation Platform and Audience App

Product Designer

What’s the difference between design values and principles?

The UX Collective (Best of UX Collective, July 2023)

Practicing ethical design

Best Hybrid Event Platform

Best Hybrid Event or Live Streaming Solution

Right First Time

Best Virtual & Hybrid Event Platform

Best use of Technology for Audience Participation

My article "What’s the difference between design values and principles?" was featured in the Best of UX Collective, July 2023

Best of UX Collective

SessionLab

I looked at why the print interface was under performing and worked on a solution which was more discoverable and intuitive to use.

Workshop Facilitation Print Dialogue

Glisser

I immersed myself as an AV technician to come up with a remote and hybrid event steaming solution. Winner of 'Best Virtual & Hybrid Event Platform', and 'Best Hybrid Event or Live Streaming Solution'.

Live Streaming Presentation Platform

Caffeina

Working with one of the top design agencies in Italy, I designed an iOS app to connect dog breeders with potential buyers.

Rehome a Pet iOS App

Docebo

Working with one of the biggest names in e-learning, I developed an improved course and team analytics platform.

Student Analytics Platform

I spoke to design students about common mistakes when putting together a design portfolio, and I gave them an insight into exactly what employers look for.

The Importance of Design Portfolios

I gave a talk to design students on what helped me to kick off my career in design, and the things I wish I'd known when I started.

Fundamental Principles of Design

I gave a keynote about my journey learning to live stream events, and the growing importance in 'going hybrid'.

Live Streaming and Hybrid Events

Working within a large product team on an established Enterprise Architecture platform, I used and improved upon existing component libraries and design patterns. For their smaller, sister-company (Good e-Learning) I led the design on the creation of a custom learning management platform with in-depth team and user analytics.

The first UX professional at an ambitious SaaS startup aiming to modernise the construction industry with intelligent automation. I worked closely with industry specialists to create a unified experience across Countfire’s full suite of products.

One of the first of a quickly growing team for a highly driven, Microsoft-backed SaaS startup. I worked with the development team to design and build hugely scalable platforms, defining patterns and processes along the way.

The lead product designer on an educational product which helps get people into the cybersecurity industry. I worked to increase engagement and address student feedback, whilst defining a design system to incrementally replace the existing proof-of-concept.

Simon Mauro Guido

Work Experience

Education

Awards

Writing

Speaking

Features

Volunteering

Contact