[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

[Published in UX Collective](https://uxdesign.cc/whats-the-difference-between-design-values-and-principles-e2173fc5ba40)

### Collectively, design values and principles are the guiding beliefs and priorities that shape the design process for any design team, product or designer. But what should they be, and what’s the difference between them?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FZhcmzIu5z4GByVGa349o%2F3fdf611e-f6c4-4e3b-978a-8b06428e7681.jpg?alt=media&token=7c2682cd-ad3b-450c-aa52-15c5a9da7fac","id":"3fdf611e-f6c4-4e3b-978a-8b06428e7681","width":3748,"height":2632,"filename":"0_A2s38pjaYvlTf6WE.jpg","type":"image/jpeg","caption":"Photo by Tyler Lastovich on Unsplash","border":false}]}
```

We’re all different, and whether we’re aware of it or not we’re all likely to have our own, individual values — which will naturally evolve with us throughout our careers. As a team, though, having defined values and principles gives us a shared ethos to design by — a way to guide our ideas, minimise indecision and keep our collective north star squarely in sight.

[Studies have shown](https://open.lib.umn.edu/principlesmanagement/chapter/4-3-the-roles-of-mission-vision-and-values/) that companies with clearly communicated and shared values perform better than those without. And the larger the team becomes, the more important they are. Without them, it’s easy to lose sight of what we originally set out to achieve, and how we set out to achieve it.

## **What’s the difference between design values and principles?**

You’ll find some companies define their values *as* principles, some use the terms entirely interchangeably, and some see principles as a method of achieving values.

In the 1989 best-seller [The 7 Habits of Highly Effective People](https://www.amazon.co.uk/Habits-Highly-Effective-People-Powerful/dp/0743269519), Stephen R. Convey defined them as:

> “Principles are rules or laws that are permanent, unchanging, and universal in nature, whereas values are internal and subjective, and may well change over time.”

So what does that mean for us?

## **Design values**

Let’s consider our design values to be the things we care most about as a design team — think of them as the *paths* we choose to take. They should provide us direction and context, and although often quite high-level, they should always be clear, concise and relevant.

Although they shouldn’t often change, they should be reviewed periodically and updated if necessary to remain relevant.

The values our design team of multi-disciplinary designers follow apply to everything we do, and they guide us as we approach new problems:

* **Speed**\
  To be more impactful, we move fast and we innovate quickly.

* **Collaboration**\
  Collaboration makes us stronger, we share knowledge, experience and expertise between us.

* **Excellence**\
  Excellence is about finding the perfect balance which sits somewhere in between *aiming for perfection* and *getting it done*. Both in what we make, and how we make it.

* **Humility**\
  Embrace and learn from your mistakes, whilst having empathy for each other.

## **Design principles**

Design principles are more like a set of rules or value statements describing the most important goals a product or service should deliver for its users and are used to frame design decisions. Think of them as the *boundaries* to our paths, which stop us being led astray. And unlike values, they shouldn’t change over time.

Note one key difference — unlike values, which are applied to the company or team, [principles should be specific to the product or service](https://www.nngroup.com/articles/design-principles/).

## **How should we define what our design values and principles are?**

As principles exist lower in the hierarchy, and even reference our design values, it’s important we first define our design values. There’s no one right answer on how best to define these, although [Gwenna Kadima outlines a good approach](https://gwennakadima.medium.com/a-10-step-guide-to-design-thinking-your-core-values-198bb96d4d77) where you start with any values you think are relevant, grouping them into themes and gradually merge and narrow them down until you’re left with only the ones you care most about.

Next we define our product design principles. This process can be a great way to set focus before building a new product, or when onboarding new designers. Nielsen Norman Group outlines the following steps to [define effective design principles](https://www.nngroup.com/articles/design-principles/):

* **Identify core values**\
  What differentiates your product from your competitors? Why do people choose your product?

* **Consider how these values impact users**\
  Why are these values important? What do they help to achieve for users? If we didn’t pursue them, how would our users be affected?

* **Identify any common tradeoffs**\
  Identify any simple conflicts that we often have to consider, for example: Should we go for a clean, minimalistic design, or make content highly discoverable? Should we focus on power users or casual users?

* **Write, compare, and iterate**\
  It’s a good idea to involve others in the creation of design principles as not only will it broaden your ideas, but they are also more likely to be accepted and followed.

## **Using our design values and principles**

Our design values and principles should exist within our design systems to ensure they’re not forgotten. They should be discussed regularly in meetings, included in presentation decks, or even stuck to your walls if you prefer.

Once defined, we should use our principles to justify and explain design decisions — especially when trade-off decisions have to be made. We can apply self-checks to our ideation process or sign off to ensure our decision making is always staying true to our principles.

## **Source and further reading**

* [Dieter Rams’s ten principles for good design](https://www.vitsoe.com/rw/about/good-design)\
  Perhaps the best and most famous example of design principles. Just as relevant today as when they were written in 1970s. Note though that these principles differ slightly from how we’ve defined them above to fit product design. Without having both values and principles defined these actually fall somewhere between the two.

* [How Dieter Rams’ 10 Principles of Good Design can impact UX](https://medium.com/swlh/how-dieter-rams-10-principles-of-good-design-can-impact-ux-c2f369218a08)\
  Ratul Bhowmik highlights how Dieter Rams’ principles apply to modern UX, and looks at how Jony Ive drew inspiration from his work.

* [Crafting Product-Specific Design Principles to Support Better Decision Making](https://www.nngroup.com/articles/design-principles/)\
  Help on how to define product-specific design principles.

* [A 10 Step Guide to Design Thinking Your Core Values](https://gwennakadima.medium.com/a-10-step-guide-to-design-thinking-your-core-values-198bb96d4d77)\
  Group, theme and merge your values until you’re left with only the ones you care most about.

* [Design at TrueLayer: our shared principles and values](https://medium.com/@mirtarotondo/design-at-truelayer-our-shared-principles-and-values-ea601da186d7)\
  How TrueLayer defined their values and principles and why they matter.

* [Design Principles Collection](https://principles.design/)\
  An open source collection of design principles and methods.

Article: What’s the difference between design values and principles?

### Regardless of how good the underlying product is, it’s the design that the user interacts with. The design can either enable the user to get the most out of the product, or if designed badly it can even become a barrier to using it properly. Whilst every product wants to stand out in the marketplace, it’s sometimes this overwhelming desire to be unique that can actually be its downfall.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2Fit6jhONdKn3XRLwBJclA%2F7a1229a1-2438-4c54-8788-1e03080ee01a.jpg?alt=media&token=9b6b049e-8eb8-449e-aaa4-2ab3d88a762c","id":"7a1229a1-2438-4c54-8788-1e03080ee01a","width":1500,"height":750,"filename":"1_UZ0PB6KckbHKI6udAORjnw.jpg","type":"image/jpeg","caption":"","border":false}]}
```

[Material Design](https://material.io/) is a visual language developed by Google, which was introduced a few years ago. It defines the way in which apps should look and behave. Google developed Material Design to unify the user experience across all Google platforms, from operating systems and apps, to the new watches and glasses. This improved overall experience makes user interaction easier, simpler and more intuitive. It also helps the user understand the cloud concept in which their data seamlessly flows and synchronises between their devices.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2Fit6jhONdKn3XRLwBJclA%2Fc112a4c0-8d0f-45eb-84ab-bea8d76dae5c.jpg?alt=media&token=12a1edb0-c4c2-452b-8dbd-f93b45a8778e","id":"c112a4c0-8d0f-45eb-84ab-bea8d76dae5c","width":1196,"height":755,"filename":"1_vwOZ9pFh3Cqgfxf9QXAM8A.jpg","type":"image/jpeg","caption":"","border":false}]}
```

*Material* is a metaphor for the way the visual language uses space, light and motion to convey how objects move, interact and exist with each other. Whilst embracing the flat design trend to a certain extent, Material Design also imagines everything as a layer (or a piece of paper). Surfaces and edges of the material provide visual cues to reality. This has helped the user make the transition from pen and paper to device - perhaps in the future this will no longer be necessary and Material Design will evolve to reflect this.

Working on a new front and backend redesign of the [Glisser](http://glisser.com/) presentation platform, I decided to follow Material Design for three main reasons:

## **User Familiarity**

Some of the most interesting feedback we received was that whilst the current Glisser platform works 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.

Without even realising perhaps, you will almost certainly have used Material Design and be instinctively familiar with it. Do you use YouTube, Google Search, Google Drive, or even the Android operating system? If so you would immediately feel at home on the redesigned platform. Rather than develop a unique visual language it made sense to make the Glisser web-app feel like any other app on your device.

## **Quicker to Implement**

We’re a small team at Glisser, but we pride ourselves on how quick we are to respond and react. When we bring out a new feature it needs to be defined and agreed, designed, written up, developed, tested, and launched. To have a defined design framework to rely on means we can concentrate on how it will work, and how it looks tends to just slot into place based on existing reusable objects.

User testing can also be a long process, but having tested the components already in other features means we can focus just on what’s new. What this means for the user is quicker, more frequent releases of the Glisser platform.

## **Performance**

Although not exclusive to Material Design, implementing reusable elements means that the system doesn’t have to load new content layouts and components for every screen or view. Whatever we can reuse, we do, which means that we can cut page load times without compromising on design - if anything the overall consistency aids the design.

This means a quicker, leaner platform for both audience members and presenters using the platform.

Whist we’ve decided to embrace Google’s Material Design, it’s important to remember that they are only guidelines to aid continuity. There are some complex problems that will need you to break the rules, and that’s ok.

Article: Using Material Design

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

### Design often recognises the beauty in simplicity, from clean, minimalist architecture to flat design and shadowless UI. There is a misconception that simplicity is easy compared to complexity, but there is great skill in making the complex accessible to everyone by thoughtful organisation and reduction.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FrrBcpwyLwAiNPqU6jDYI%2F40e19e97-b8d6-4c22-8fb7-9449606a6418.jpg?alt=media&token=dec5e5d8-6fea-4041-8ed8-993c327626e2","id":"40e19e97-b8d6-4c22-8fb7-9449606a6418","width":3000,"height":1688,"filename":"1_C4t0Ujb9ODnTSlS-bUq1-g.jpg","type":"image/jpeg","caption":"The iconic Playstation controls","border":true}]}
```

Leonardo Da Vinci once said that *Simplicity is the greatest sophistication*. It’s very relevant today, but what makes it so powerful is to think that he said this in a time when the art and architecture was so intricate and complicated, a long time before simplicity was fashionable.

Simplicity can apply to everything, and it’s something we pay a premium for. Take the Ferrari Portofino for example. It’s a stunning, top of the market supercar with a price tag to match. You might be surprised to learn that it is actually made up of fewer parts than the everyday, affordable Fiat Punto. Every part on the Portofino though is perfect, it’s refined and made of the best possible materials. It has been researched and engineered to be the best it could possibly be - it’s the refinement that we pay for.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FrrBcpwyLwAiNPqU6jDYI%2Facd7419a-991f-4f61-9060-27d9cb141761.jpg?alt=media&token=ec75efe5-e497-4891-8c3e-c06081a11355","id":"acd7419a-991f-4f61-9060-27d9cb141761","width":1528,"height":1080,"filename":"1_Qm9Hb33IWtSizYGJomt-8g.jpg","type":"image/jpeg","caption":"Ferrari Portofino","border":true}]}
```

The same applies to almost anything, from cooking to fashion, and, most importantly, design!

Simplicity has become very fashionable in design. Logos used to look three-dimensional, complicated, and intricate. But you’ll have noticed that they’ve been evolving to become flatter, and simpler. This has been across all sectors, from budget to luxury brands.

Web design is another example. Compare the GoDaddy homepage from 2006 (below left), this is how the internet used to look just 10 years ago. It’s an onslaught of features and offers.

But it’s not like that anymore, GoDaddy are a lot bigger now than they were 10 years ago and below right is what their website looks like now.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FrrBcpwyLwAiNPqU6jDYI%2Fec78201b-8c6d-46bf-907c-ec579771741b.jpg?alt=media&token=a6609bdf-9655-4bf4-99e9-e0b2ee465f9f","id":"ec78201b-8c6d-46bf-907c-ec579771741b","width":2560,"height":1024,"filename":"1_aaLubvUkErEuY5IM2fUaiw.jpg","type":"image/jpeg","caption":"The GoDaddy homepage - 2006 vs 2016","border":true}]}
```

Now we’re putting ourselves into the user’s shoes, we want to make their lives easier and make our services accessible to a wider audience. If you wanted a website in 2006 you had to really know what you’re doing. Now, any pet grooming parlour can setup their own website in minutes and you can see why.

John Meada, the former president of the Rhode Island School of Design, is dedicated to linking design with technology. Through the software tools, web pages, and books he creates, he spreads his philosophy of simplicity. In his book ‘[The Laws of Simplicity](https://www.amazon.co.uk/Laws-Simplicity-Design-Technology-Business/dp/0262134721)’ he looks at how to achieve simplicity — not just in design but in our lives, through the following rules and keys:

### The Ten Laws of Simplicity

 1. **REDUCE** :: The simplest way to achieve simplicity is through thoughtful reduction.

 2. **ORGANISE** :: Organisation makes a system of many appear fewer.

 3. **TIME** :: Savings in time feel like simplicity.

 4. **LEARN** :: Knowledge makes everything simpler.

 5. **DIFFERENCES** :: Simplicity and complexity need each other.

 6. **CONTEXT** :: What lies in the periphery of simplicity is definitely not peripheral.

 7. **EMOTION** :: More emotions are better than less.

 8. **TRUST** :: In simplicity we trust.

 9. **FAILURE** :: Some things can never be made simple.

10. **THE ONE** :: Simplicity is about subtracting the obvious, and adding the meaningful.

### The Three Keys to Simplicity

1. **AWAY** :: More appears like less by simply moving it far, far away.

2. **OPEN** :: Openness simplifies complexity.

3. **POWER** :: Use less, gain more.

Article: The laws of simplicity

## Learning Plan

In theory, gamification in online learning should be used to make the course content more interactive and fun, which in turn should increase engagement and retention. Unfortunately though, gamification has also become a bit of a buzzword, and is often used without fully considering *why*, and the underlying psychological principles that go beyond gamification.

When we mention gamification in online learning it’s likely the first example that comes to mind is Duolingo. Their entire model is built on making language learning a game, with an overdose of gamification techniques. Whilst I’m sure there likely will be a lot we can learn from them as an ‘extreme’ example, it’s also worth taking any comparisons with a pinch of salt as the users, the market and the needs are entirely different, even more so now we’re focussing solely on B2B for the short-term. I see any gamification we consider or use should be subtle, considered and focussed - Foundations will never be a game.

### Why gamification? How can it help on Foundations?

There are a number of problems we need to solve which gamification could potentially be part of a solution for, amongst other ideas. An example of some of these problems are:

* We’ve had feedback that the course is too long, and the completion rates are low. Whilst it is true that the course is thorough and there is a lot of content (significantly more than other SANS courses and than our competitors), I do also think there is a lot we can do with the UX to make the course *feel* more digestible, which in turn should help with student motivation.

* I also want to look into the *‘stand back and admire my work’* phenomenon, which I feel we could do a lot more with on Foundations.

* How we appeal to both intrinsic and extrinsic learners with the same, examinable course content?

There’s no single answer to any of this, and we’re already looking at many ideas, but I feel like the utilisation of gamification could help.

Having said that, we do need to properly consider the audience and use gamification sparingly and effectively - not just blindly applying gimmicky animations and badges which could actually do more damage than good. I am also acutely aware that some of these gamification methods can be extremely manipulative and unethical, and whether well intentioned or not, I don’t want to apply anything carelessly - which is why I wanted to learn more first.

Ultimately the question is not *what can gamification do for Foundations?*, rather *what are we trying to achieve, is gamification the best way to achieve this, and how?*

---

## Research and Study

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2Fgamification-findings%2F5b72cb55-2b8c-4711-bb34-70c9858af360.png?alt=media&token=478a5299-4001-4ced-ba15-c82e2bc05902","id":"5b72cb55-2b8c-4711-bb34-70c9858af360","width":2048,"height":1536,"filename":"Gamification Research.png","type":"image/png","caption":"Some of the reading and learning that helped me to better understand the subject","border":false}]}
```

---

## Key Learnings

### 🧠 **Understanding the psychology behind gamification**

Gamification is based on the [Self-Determination Theory](https://selfdeterminationtheory.org/theory/), which identifies three psychological needs: autonomy, competence, and relatedness.

* **Autonomy** is the desire for individuals to have control over their actions and decisions. When people feel they have choices, they are more engaged and motivated. Gamification can offer users a sense of autonomy by allowing them to make decisions that impact their experience. For example, letting users choose their preferred topics or set and track their own goals.

* **Competence** is the need for individuals to feel capable of achieving goals and acquiring new skills. Gamification addresses this by providing challenges tailored to users' skill levels and offering feedback on their performance. Points, badges, or leaderboards can serve as tangible indicators of progress and achievement. Overcoming challenges and visible improvement gives users the feeling of accomplishment which motivate them to continue.

* **Relatedness** is the desire for individuals to feel connected to others and part of a larger community. Gamification harnesses relatedness by incorporating social elements, such as collaborative tasks, competitive features, and sharing achievements with friends, colleagues or others. This can create a sense of camaraderie or friendly competition, which further motivates users to engage.

Another key psychological element of gamification is attempting to harness a state of flow (a state of deep engagement and concentration). It’s very difficult to achieve, but is considered to be the ideal experience where individuals become fully absorbed, losing track of time. Gamification can help achieve a flow state by offering users clear objectives, prompt feedback, and challenges that align with their skill level. When users achieve a state of flow, they tend to stay engaged with the activity and derive a strong sense of enjoyment and satisfaction from it.

### 👯 Social pressure

If we were to start to build a community between students it would encourage accountability and competition, which in turn should lead to better staying power and engagement.

However, this is less relevant and far more difficult on a B2B platform. We would need to understand if customers (managers) would be comfortable with:

* Their staff (the students) sharing their scores with all Foundations students (unlikely on a B2B platform).

* Creating cohorts from `Licence tags` in the CMS. What this would effectively mean is that students would see the scores/activity of their colleagues (more likely - could be enabled or disabled at a team level).

Alternately we could share scores/performance anonymously. Similar to how energy companies compare your usage to your neighbourhood average, which has proven to be extremely effective in changing people’s behaviour.

Not making Foundations a social platform is a blocker for digging deeper into some gamification techniques, and tapping into ownership and possession for example (profile picture, points, leaderboards etc.).

### 🧗 Overcoming challenges

[The Theory of Fun for Game Design](https://www.theoryoffun.com/) suggests that students learn best when they are set difficult challenges which they can only accomplish by learning.

* Students encounter a difficult challenge

* They are not able to overcome it

* They learn something new

* They apply their learning

### 🎮 W**e’re already using gamification…**

Gamification doesn’t have to be leaderboards, badges and streaks, it doesn’t even have to be obvious. You may be surprised to hear that we we already harness some game-like approaches to encourage motivation and increase engagement. The Foundations course could just be a printed text book, but it’s not - we use labs, quizzes and progress bars for example.

My research into gamification is about understanding what level is right for Foundations, and what will have a positive impact.

### 📖 Content

To a certain extent, the UI is merely the shell the content sits in. And whilst there is a lot we can do on UI to increase engagement through gamification, if we were to fully embrace gamification then the majority of the work is actually in how the content is written (storytelling, engaging), and they need to work hand-in-hand.

### 👔 Gamification for a B2B audience

It’s easy to assume that B2B means business professionals will take the course, and that B2C means students and more casual users. But actually the students could well be similar people - we know the existing audience contains students (via Cyberstart and the STI for example), and students taking the course via their company could well be the same kind of people as would take the course via the B2C route. The key difference really is motivation:

* Would you have the same motivation if you paid vs if the company paid?

* What are you trying to get from the course if the company has asked you take it?

* Did you even want to take the course or have a say in which course you took?

### 🤓 Focus on labs

Labs are actually a brilliant dive into gamification. But how can we make them more challenging and rewarding? Should they have difficulty levels, better hints, and better progress indicators and rewards? And are there any other challenges we can set other than labs?

### 🌈 Everyone is different

The problem with streaks for example is that, unlike Duolingo, learning a little each day doesn’t suit the content on the Foundations platform or the way we want to encourage students to learn. It also doesn’t suit the typical user’s availability to learn on the Foundations platform either.

Instead we need to consider having students set their own intentions and ‘deadlines’. For example, an STI student might have very different availability and learning pattern to an employee who has been set Foundations as an OKR for the quarter - it’s right that they will learn at different times and at a different pace.

Another example which we’ve already encountered is the number of people on the platform who are looking to re-skill, and who are perhaps not absolute beginners. This means some of the initial modules are extremely basic and low-level for them. Forcing these students to complete these modules only makes the course longer and more boring for them. We started to explore the idea of pre-module assessments to allow them to skip the module based on a high score, and we even had feedback of a student doing exactly this using the existing quizzes!

---

## Summary

The more I read on gamification and the more I learn, the more I realise that this isn’t something that can we simply apply and *tick off* as done. Gamification is a web that affects everything on the course - from the tone of voice to the interactions.

We need to make the course feel like a fun place for users to spend a considerable amount of time. The ultimate goal is that users enjoy spending time on the Foundations platform and ideally a place for them to find a flow/focus state when they do.

Research: Applying Gamification to the Foundations Platform

[Published in UX Collective](https://uxdesign.cc/practicing-ethical-design-1b9dd29402d)

### We all started on our paths to becoming product designers by wanting to create platforms people wanted to use. None of us dreamt of one day designing platforms that *tricked* users into using them, did we?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVahjIv3bTxbcN5iRYPtfUoz2f772%2FxSnMv514BYGKSZy4Kg3g%2F2f61819b-1b0e-4293-9f8d-1e4970dfa654.jpg?alt=media&token=419d7e37-110d-4ce6-a415-17ea2a6d4eaf","id":"2f61819b-1b0e-4293-9f8d-1e4970dfa654","width":2276,"height":1280,"filename":"1_6N5GaIwaVWIStGMUoarYJA.jpg","type":"image/jpeg","caption":"The Ethical Hierarchy of Needs","border":true}]}
```

I don’t think it’s a coincidence that the rise in technology since the internet has been matched by the rise in people suffering from anxiety. We’re chasing numbers, likes, affirmation — and we designers are exploiting that. But why? Maybe because in the real world of business, where everyone has to answer to someone, we designers are chasing numbers too (active users, conversions), likes (reviews), and affirmation (career progression, pay rises?).

> “In order to get the next round of funding, in order to get your stock price up, the amount of time that people spend on your app has to go up. So, when you put that much pressure on that one number, you’re going to start trying to invent new ways of getting people to stay hooked.”
>
> Aza Raskin

## **Infinite Scroll**

Pagination stops any platform having to load all relevant data at once, which aids loading speeds. It’s also a behaviour we were used to from the non-digital age, when we get to the end of a page or chapter we have to turn the page (you can see where the term *pagination* came from). But imagine if there were no page breaks or chapters. There would be no natural pause, when would you stop and take a break?

Former Mozilla designer, Aza Raskin, designed the infinite scroll in 2006 whilst working for Humanized. Infinite scroll allows the user to continuously swipe down through content, but crucially only loading content on-demand, so as not to have to load all content at once. There are no page breaks, no natural pauses. Infinite scroll kept users looking at their phones far longer than necessary, but it’s become a normal behaviour now.

> “If you don’t give your brain time to catch up with your impulses, you just keep scrolling”.
>
> Aza Raskin

Aza stated that many designers were being pressured into creating addictive app features by the business models of the big companies that employed them.

## **Autoplay**

YouTube and Netflix know exactly how to keep us hooked. Once we’ve watched what we wanted to see, there’s a countdown timer until we’re automatically shown something we ‘*might also be interest in’*. The platform’s engagement metrics go up the more we watch, but it’s a bit of an artificial metric isn’t it? Are we really engaged if we’re passively watching what we didn’t choose to watch?

> 75% of Netflix viewing decisions are from product recommendations.

## **Likes**

*Likes*, *thumbs up*, *hearts* or whatever form it takes, have become one of the most addictive aspects of social media. It provides us validation on the content we post, and our popularity.

The co-inventor of Facebook’s like feature, Leah Pearlman, has said she had become hooked on social media because she began basing her sense of self-worth on the number of *likes* she had.

> *“The thought process that went into building these applications, Facebook being the first of them, was all about: how do we consume as much of your time and conscious attention as possible?”*
>
> Sean Parker, founding member of Facebook

## **What can we do?**

Products that practice unethical design patterns, and focus on metrics over real user experience may prosper in the short term, but things are changing.

[Ind.ie](https://2017.ind.ie/ethical-design/) (now [Small Technology Foundation](https://small-tech.org/)) is a not-for-profit organisation striving for social justice in the digital age. They defined an “[Ethical Hierarchy of Needs](https://ind.ie/ethical-design/)” that describe the core of ethical design.

Ethical Hierarchy of Needs, Ind.ie

Each layer in the pyramid is reliant on those that form the foundations below it. For example, if a design does not support human rights how can it possibly be ethical?

So in practice, a product that exploits user data, uses dark patterns, or that is only out to make money, is forgetting its *human purpose*, and is therefore unethical.

## **Human Rights**

Technology that respects human rights is decentralised, peer-to-peer, zero-knowledge, end-to-end encrypted, free and open source, interoperable, accessible, and sustainable.

It respects and protects your civil liberties, reduces inequality, and benefits democracy.

## **Human Effort**

Technology that respects human effort is functional, convenient, and reliable.

It is thoughtful and accommodating; not arrogant or demanding. It understands that you might be distracted or differently-abled. It respects the limited time you have on this planet.

## **Human Experience**

Technology that respects human experience is beautiful, magical, and delightful.

It just works. It’s intuitive. It’s invisible. It recedes into the background of your life. It gives you joy. It empowers you with superpowers. It puts a smile on your face and makes your life better.

Article: Practicing ethical design

Untitled

Product Designer

What’s the difference between design values and principles?

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

Designing for human desires

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

2023

2022

2021

2020

2019

2017

2016