In 2022 GSK turned to Wolff Olins to rebrand as they spun off their consumer business. The move allows them to wholly dedicate themselves to science and technology. The new brand reflected that, focusing on bold forms and striking scientific imagery.

[For context on the 2022 rebrand, see Wolff Olins’s case study.](https://www.wolffolins.com/work/gsk)

Unfortunately, when applied to digital, the rebrand presented technical and accessibility challenges. On behalf of HYD, I was contracted to solve these issues and create GSK’s first company-wide design system.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F0Qr08YkyeCMIPnP5PC01%2F9ac41b13-3911-443d-be5f-9de68f7b762c.png?alt=media&token=be1c3d2d-31f1-4ddf-8046-ee85b5de691f","id":"9ac41b13-3911-443d-be5f-9de68f7b762c","width":3840,"height":2160,"filename":"gskdesignsystem_gettingstartedframes.png","type":"image/png","caption":"Selection of pages from Getting Started section of design system","border":false}]}
```

To enable adoption across the business, a group of representatives from across GSK’s many digital product teams was formed. I led workshops with the group, each of which focused on a key aspect of the proposed design system, like colour, layout and typography. This allowed me to understand the breadth of desires that needed to be catered to across GSK's business. Some teams create expressive brand-driven content for the general public, whilst other teams produce dense scientific tools for healthcare professionals. GSK’s core design system had to cater to them all.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F0Qr08YkyeCMIPnP5PC01%2F4816d805-5395-4694-ba63-22a29339c8ee.mp4?alt=media&token=4721f68f-55fe-4138-9a03-197c2ce87016","id":"4816d805-5395-4694-ba63-22a29339c8ee","width":1080,"height":1080,"filename":"gskdesignsystem_general_components.mp4","type":"video/mp4","caption":"Examples of general components built within the design system","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F0Qr08YkyeCMIPnP5PC01%2F6e937d15-174a-493b-be5b-6ef4c8ded011.mp4?alt=media&token=a0bef11d-3a57-402f-a5fc-88924c94fdf8","id":"6e937d15-174a-493b-be5b-6ef4c8ded011","width":1080,"height":1080,"filename":"gskdesignsystem_podcasts.mp4","type":"video/mp4","caption":"GSK Podcasts created using components from the design system","border":false}]}
```

As the Core Design System is to be adopted across the company, it could not be too prescriptive meaning relatively few components were built within it. Only very basic elements could be generalised across all digital products and services across GSK. Examples include buttons, form fields, list items and tabs. The system is intended to be a foundation upon which teams build product-specific systems.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F0Qr08YkyeCMIPnP5PC01%2Fc88172ea-89e8-4da5-aeb7-2aa27e33e180.png?alt=media&token=ba7143d9-a8f3-4006-8567-b2a7f9e5b223","id":"c88172ea-89e8-4da5-aeb7-2aa27e33e180","width":3840,"height":2160,"filename":"gskdesignsystem_brandhub.png","type":"image/png","caption":"GSK’s internal brand guidelines hub created using the design system","border":false}]}
```

Built around design tokens, components and patterns created in it can switch sizes for different devices and adapt to different colour modes like dark mode. Platform-specific components were also created for native teams.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F0Qr08YkyeCMIPnP5PC01%2F1e80f55f-e6a8-4596-be3e-cd64193bc7a0.png?alt=media&token=5a2177ed-fa8c-4477-aff0-9ef837b9064d","id":"1e80f55f-e6a8-4596-be3e-cd64193bc7a0","width":3840,"height":2160,"filename":"gskdesignsystem_corpsite.png","type":"image/png","caption":"gsk.com updated to reflect the design system","border":false}]}
```

With the accessibility issues solved, GSK is rolling the Core Design System out to all digital teams within the company. Reactions have been positive across product teams and GSK’s brand team are thrilled to see the rebrand be more widely adopted.

> “Receiving so much positive feedback already, people are really impressed with how good all of this is – Thank you so much HYD!”

**Anna Morrison, GSK Senior Brand Manager**

An accessible design system for big biopharma.

Google Exec Circle was a weekly webinar series launched as a response to the COVID-19 pandemic, produced by Cheerful Twentyfirst. It ran throughout the first half of 2021 and brought together some of Google UK's key business partners.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F1vN5RyDvQlVJNHaSokGH%2Fb444f3df-8576-43b3-8c70-056cd41d2082.mp4?alt=media&token=dffe27c4-bbde-46be-bd74-0b6a2231d1c7","id":"b444f3df-8576-43b3-8c70-056cd41d2082","width":1600,"height":1200,"filename":"exec-welcome.mp4","type":"video/mp4","caption":"Welcome page with animation","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F1vN5RyDvQlVJNHaSokGH%2F46401039-d6a4-43be-8a94-a75a2d202a26.png?alt=media&token=becd28c0-a9bc-4107-887f-3c5e0891cb32","id":"46401039-d6a4-43be-8a94-a75a2d202a26","width":1200,"height":1200,"filename":"Google-exec_welcome_lower-1-1.png","type":"image/png","caption":"Lower half of welcome page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F1vN5RyDvQlVJNHaSokGH%2Fe91a6f0c-ea57-4d00-b621-32ef8dde9c99.png?alt=media&token=f884c1fc-9381-4561-bd40-f497261abc0d","id":"e91a6f0c-ea57-4d00-b621-32ef8dde9c99","width":1200,"height":1200,"filename":"Google-exec_next-event-cards_1-1.png","type":"image/png","caption":"Upcoming event cards","border":false}]}
```

The events were a collaboration with [Stanford's Graduate School of Business](https://www.gsb.stanford.edu/), whose pre-eminent academics lead the sessions. I designed and led the front-end development of the platform at the centre of this events series.

The platform needed to:

* Facilitate the formation and strengthening of this network of business leaders and academics.

* Support the events with pre event content to drive engagement  and post event content to kept the conversation going.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F1vN5RyDvQlVJNHaSokGH%2F9d495f6f-47f2-4ba8-b131-229d8ca2e88c.png?alt=media&token=cb0456f2-c9ae-4b58-b9d7-a005f51acb95","id":"9d495f6f-47f2-4ba8-b131-229d8ca2e88c","width":1920,"height":1080,"filename":"Google-exec_menu_16-9.png","type":"image/png","caption":"Menu varients","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F1vN5RyDvQlVJNHaSokGH%2F0b1acb73-ffc0-4726-a05f-a06654c55454.png?alt=media&token=48965642-51bf-45de-9dce-a4deb464a6bf","id":"0b1acb73-ffc0-4726-a05f-a06654c55454","width":1200,"height":1200,"filename":"Google-exec_resources_1-1.png","type":"image/png","caption":"Lower half of Calendar page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2F1vN5RyDvQlVJNHaSokGH%2Fed229ca3-966e-41d0-b4ed-3c19841f3e69.png?alt=media&token=9ec955b5-ffb3-4678-9119-416ad15341d9","id":"ed229ca3-966e-41d0-b4ed-3c19841f3e69","width":1200,"height":1200,"filename":"Google-exec_calendar_1-1.png","type":"image/png","caption":"Section of Resources page","border":false}]}
```

Of the invited executives, **72% accessed** the platform at least once. Of those who did, on average they **viewed >7 resources** each. Most impressively, the webinar series received an **overall rating of 4.9/5**.

Google and Stanford are thrilled with these results and preparation for next year's Exec Circle has already begun.

> "Thank you, Google. Exec Circle has been very enlightening, inspiring and great for building a peer network."

**Chief Marketing Officer, New Look**

How do you build relationships with your business partners during a pandemic?

The Open Ventilator System Initiative (OVSI) was started at the University of Cambridge in response to the Coronavirus pandemic. In a matter of weeks a team of engineers designed a sophisticated ventilator that costs under $1000 and is simple to build from parts that can be sourced anywhere in the world. I created a visual Identity and a website for them; you can see it at [ovsi.org](https://ovsi.org/)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2Ff34031c6-a8b2-4eee-b25b-33b3d61b9c8e.png?alt=media&token=5c646e56-e82d-4106-93ad-27989b503719","id":"f34031c6-a8b2-4eee-b25b-33b3d61b9c8e","width":1600,"height":1000,"filename":"ovsi.org-ventilator.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2F0dcc9283-5299-4635-9915-e9cf4f9f2374.png?alt=media&token=9f026c64-e2d5-487b-9f44-1488860fd5e8","id":"0dcc9283-5299-4635-9915-e9cf4f9f2374","width":1600,"height":1000,"filename":"ovsi.org-misson.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2F0377ecbf-03f3-4c10-8d16-28efae524918.png?alt=media&token=88af083d-2941-420c-b6bf-6ed8ac59bfb0","id":"0377ecbf-03f3-4c10-8d16-28efae524918","width":1600,"height":1000,"filename":"ovsi.org-team.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2F76b16d65-5ec8-452c-bf92-4aed28f0657b.png?alt=media&token=2daf6293-c9eb-4640-926f-ca38137e9fea","id":"76b16d65-5ec8-452c-bf92-4aed28f0657b","width":1600,"height":1000,"filename":"ovsi.org-news.png","type":"image/png","caption":"","border":false}]}
```

### Keeping up with a pandemic

The primary aim of the site was to help attract potential manufactures worldwide. The team needed to show what they had done to a less technical audience, whilst conveying the sophistication of the ventilator. The site aims to cater to both audiences by giving anyone an overview of the project, whilst providing technical details to clinicians evaluating the design. The engineers were entirely focused on moving the design to manufacturing so I worked very hard to stay out of their way and get as much done as I could, on my own. It was stressed the credibility was critical, so the design is clean and simple, letting the outstanding engineering speak for itself.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2F7b0428fa-f610-445e-86f7-bbc6eed132df.jpg?alt=media&token=5dbcd8d7-9df7-4dc0-85d5-b02eea25496f","id":"7b0428fa-f610-445e-86f7-bbc6eed132df","width":1600,"height":2400,"filename":"ventilator-side.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2Fb5072d79-55bd-4c38-91dd-23cb88ebfce0.jpg?alt=media&token=8750f0c7-2c56-4783-a70a-72819819fc21","id":"b5072d79-55bd-4c38-91dd-23cb88ebfce0","width":1600,"height":2400,"filename":"ventilator-back.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2F9155fcd6-f7ec-4541-9faf-1eaf5c60f936.jpg?alt=media&token=e8a56b49-44f2-4e41-8d8a-5266bbe79fad","id":"9155fcd6-f7ec-4541-9faf-1eaf5c60f936","width":3200,"height":2400,"filename":"ventilator-iso-1.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FKAMHHBNVc90s2fw1adng%2Fbd95478b-83ae-43fc-b137-253dc1e40e1c.jpg?alt=media&token=418bddab-246c-4faa-a1eb-2671de6a3180","id":"bd95478b-83ae-43fc-b137-253dc1e40e1c","width":3200,"height":2400,"filename":"ventilator-front.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Responding to a crisis

On behalf of Interbrand, Laura Harding (Product Manager), Niq Curry (UX Researcher) and myself (UX/UI Designer) overhauled Mercedes-Benz's ad analytics platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZB3bosMuj3BZGBV5Pkes%2F8ec3ac1a-23d7-4223-8d2f-5183b88f8102.png?alt=media&token=8d53b442-69b3-4bea-bb04-6c40a3d8fd0f","id":"8ec3ac1a-23d7-4223-8d2f-5183b88f8102","width":3840,"height":2160,"filename":"mde_channeloptimisation.png","type":"image/png","caption":"Channel Optimisation – Complex models had to be approachable whilst providing the user fine control","border":false}]}
```

An initial research phase revealed user pain points relating to navigation, onboarding and data visualisation. We isolated these issues and ran design/test sprints on each, exploring user preferences within the context of ad analytics.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZB3bosMuj3BZGBV5Pkes%2F6ecb693b-2f12-4418-8692-50dce85db7b1.png?alt=media&token=93b77904-9b56-48ae-a0c5-320f8a7bdb7d","id":"6ecb693b-2f12-4418-8692-50dce85db7b1","width":3840,"height":2160,"filename":"mde_markettrends.png","type":"image/png","caption":"Market Opportunities section – the parameters set are always visible via a fixed settings bar","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZB3bosMuj3BZGBV5Pkes%2F3c9a2082-ea95-492d-8fb5-538c508f3717.png?alt=media&token=71c47f42-f303-4545-9b3e-a8a39542d1ca","id":"3c9a2082-ea95-492d-8fb5-538c508f3717","width":3840,"height":2160,"filename":"mde_markettrends_settings.png","type":"image/png","caption":"Scenario Settings – the scenario can be manipulated easily as the settings are always only one click away","border":false}]}
```

Concurrently I consulted with Mercedes-Benz's UX team regarding extending their existing UI components to cover the requirements of the interfaces we were developing, mainly around data visualisation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZB3bosMuj3BZGBV5Pkes%2Ffb3bb740-6586-4a8f-80f5-a40fe5e78ac0.png?alt=media&token=a76b2c88-5907-4d6d-8ca9-b34d13d2b694","id":"fb3bb740-6586-4a8f-80f5-a40fe5e78ac0","width":3840,"height":2160,"filename":"mde_onboarding.png","type":"image/png","caption":"Onboarding overlay","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZB3bosMuj3BZGBV5Pkes%2F7fa5d305-cf91-47b0-81f4-e2e4d145e4fa.png?alt=media&token=04ccfcd0-5a49-460b-ad39-7ed71bd204b1","id":"7fa5d305-cf91-47b0-81f4-e2e4d145e4fa","width":3840,"height":2160,"filename":"mde_onboarding2.png","type":"image/png","caption":"Dismissable onboarding tooltips","border":false}]}
```

Finalised designs were delivered to Mercedes-Benz in Autumn 2024 which featured overhauled user journeys targeted at specific user personas, a new onboarding experience, and expanded forms of data visualisation, manipulation and exporting.

Mercedes-Benz are currently implementing these design and further work is will commence based on the user reaction of the overhauled platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZB3bosMuj3BZGBV5Pkes%2F4ec91e8f-b56c-467c-bf22-9c9c178e7dea.png?alt=media&token=7f727dd4-058f-42a9-aa6a-d400b1a7e747","id":"4ec91e8f-b56c-467c-bf22-9c9c178e7dea","width":3840,"height":2160,"filename":"mde_login.png","type":"image/png","caption":"Login – Text explains who and what this platform is for","border":false}]}
```

Overhauling an automotive giant's ad analytics platform

In 2023 SNC-Lavalin contracted Interbrand for a ground up rebrand. Jonny Buck (Product manager), Lisa Pink (Project manager) and I (UX/UI designer) were tasked with exploring the opportunities the new brand, AtkinsRéalis, had with it's new web presence.

[For context on the 2023 rebrand, see Interbrand's case study.](https://interbrand.com/work/atkinsrealis/)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2F3bbcffce-6ad8-41bc-8776-4fb464130d56.png?alt=media&token=2b3316c3-3ede-4949-9e90-34b9b4cee844","id":"3bbcffce-6ad8-41bc-8776-4fb464130d56","width":3840,"height":2160,"filename":"atkinsrealis_homepageconcept_dark.png","type":"image/png","caption":"High fidelity visual identity exploration","border":false}]}
```

We collaborated closely with strategists and CX experts from the wider Interbrand team, looking for innovative ways to express the tenets that underpin the new identity. We ran a number of design sprints followed by user testing focused on communicating these tenets to site visitors.

These tenets included a global perspective, inclusivity, diversity and raising the bar for quality. We also explored how to visually communicate the tone of the brand. Our testing was not only useful for digital touchpoints, it allowed the brand designers considering other mediums to see how aspects of the visual identity and brand collateral performed.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2F6dc0997d-ad2f-42ef-8760-4bf0bf879d2e.png?alt=media&token=54f31768-9f06-417b-b610-54949c15da70","id":"6dc0997d-ad2f-42ef-8760-4bf0bf879d2e","width":3840,"height":2160,"filename":"atkinsrealis_search3.png","type":"image/png","caption":"A varient of search used for testing – Spotlights search on the homepage","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2F901b8c26-ed66-4046-a6dd-fb2d92bea497.png?alt=media&token=cfa9426a-2378-4f01-9f4c-53cbf22e4201","id":"901b8c26-ed66-4046-a6dd-fb2d92bea497","width":3840,"height":2160,"filename":"atkinsrealis_search1.png","type":"image/png","caption":"A  varient of search used for testing – Embeds search into the navigation","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2F40c1c237-3b2e-48e1-89d2-aab6716af7b6.png?alt=media&token=417e98d1-7630-4ef4-83dd-48406591f796","id":"40c1c237-3b2e-48e1-89d2-aab6716af7b6","width":3840,"height":2160,"filename":"atkinsrealis_search2.png","type":"image/png","caption":"A varient of search used for testing – Highlights the international nature of business","border":false}]}
```

Interbrand contracted NaN to develop custom typefaces for the brand. We worked with them to test the accessibility of the these in real world scenarios and developed a set of guidelines for their use.

[Learn more about the typeface](https://www.nan.xyz/custom/atkins-realis/)

We also did a deep dive on accessibility in general. Whilst users responded well to certain elements, overall we found the lowest friction approach to perform best and the key accessibility considerations could be handled in the implementation and engineering of the site.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2F31a88227-04c7-4a50-a9d6-ff0f09aac150.png?alt=media&token=97942545-d583-4e9d-adce-20887f07590e","id":"31a88227-04c7-4a50-a9d6-ff0f09aac150","width":3840,"height":2160,"filename":"atkinsrealis_settings1.png","type":"image/png","caption":"A site settings concept – language and accessibilty communicate the international and inclusive nature of the company","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2Ffa6d4d0b-ba62-420c-9588-8b93ffaee7fd.png?alt=media&token=d0449fb0-0e03-45bb-8944-e017d2e8a17c","id":"fa6d4d0b-ba62-420c-9588-8b93ffaee7fd","width":3840,"height":2160,"filename":"atkinsrealis_settings2.png","type":"image/png","caption":"A site settings concept – explored incorporating brand message","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2F095d01f7-0af8-4594-bc01-2c8a11645110.png?alt=media&token=3c2fe171-eff1-417c-95a4-3fb095e32998","id":"095d01f7-0af8-4594-bc01-2c8a11645110","width":3840,"height":2160,"filename":"atkinsrealis_settings3.png","type":"image/png","caption":"A site settings concept – testing if adding a person communicating to the user was preferable to users","border":false}]}
```

Due to project deadlines a decision was made to simply reskin the existing site for the brand launch. AtkinsRéalis expressed interest in incorporating our findings into future site development.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FZrSbiFf8CPdfpRRP1XXt%2Feed78a50-014d-4fbd-a369-d2dc6e592ae5.png?alt=media&token=f0a2e644-3f5d-472b-a411-e3bed5b0dc12","id":"eed78a50-014d-4fbd-a369-d2dc6e592ae5","width":2120,"height":4024,"filename":"atkinsrealis_wireframes.png","type":"image/png","caption":"Range of low fidelity wireframes","border":false}]}
```

What opportunities does a ground up rebrand present for a multinational civil engineering firm?

In Denmark, over [10%](https://ventilen.dk/om-ensomhed/) of young people are sometimes or always lonely. Ventilen is reducing this number by hosting gatherings in venues across the country, multiple times a week. Five fellow students and I worked with them to help their volunteers develop new ways to break the ice at these gatherings.

[Watch the workshops](https://youtu.be/tWcAhTBUCOw)

### The delivered design

Ventilator is a board game to be used during Ventilen’s gatherings. It aims to help lonely youths that attend Ventilen form friendships with each other and encourages tough topics to be discussed. The players’ goal is to reach the centre of the board. They move by rolling a dice or spinning a spinner. After moving they take a card that matches the colour of the space they land on. Each card belongs to one of the following four categories:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Fa928e624-5705-4062-b3fb-e40e4c782342.jpg?alt=media&token=0dfdc278-1d57-4471-b27a-56d6c48be95c","id":"a928e624-5705-4062-b3fb-e40e4c782342","width":2048,"height":1280,"filename":"ventilen-card-soft-scaled.jpg","type":"image/jpeg","caption":"Softball question — easy and fun topic.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2F70843cf1-dd36-4f15-8ee3-a7f5d459c94d.jpg?alt=media&token=1d354779-641e-45a2-b033-9dfa9c8b86cd","id":"70843cf1-dd36-4f15-8ee3-a7f5d459c94d","width":2048,"height":1280,"filename":"ventilen-card-tough-scaled.jpg","type":"image/jpeg","caption":"Tough question — tougher topics that cover issues that the youths often struggle with.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Fa24fcee4-a0a0-4195-8f75-1b8a8a3802b8.jpg?alt=media&token=5a0d7397-2de7-4d34-9127-a4c1387de0c2","id":"a24fcee4-a0a0-4195-8f75-1b8a8a3802b8","width":2048,"height":1280,"filename":"ventilen-card-interactive-scaled.jpg","type":"image/jpeg","caption":"Interactive — a challenge that involves other players.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Ffe47187c-279c-43fd-8595-b9e16947ae13.jpg?alt=media&token=096ada6c-cabc-428e-b180-d1f782ff2978","id":"fe47187c-279c-43fd-8595-b9e16947ae13","width":2048,"height":1280,"filename":"ventilen-card-rule-scaled.jpg","type":"image/jpeg","caption":"New rule — A rule from the card must be added to the game.","border":false}]}
```

If the player picks up a card they don’t want to answer, they can opt to return to the spot they came from rather than answer. So, while the game incentives players to discuss tough topics, they aren’t excluded if they aren’t ready to answer. Also this relaxed approach to progression highlights to the player that the game won’t be fun if played in a highly competitive manner. This relaxed play style creates a calming atmosphere where friendships can be formed.

## The design process

### Making contact

A team member was already acquainted with the chairman of the Copenhagen branch of Ventilen. He recruited three co-workers with each at a different level of seniority and experience within the charity. The participants also had different roles within the organisation, which provided us with the perfect cast for the two workshops we had planned.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2F108730e5-93a9-4da4-83a2-83b6a371ad97.jpg?alt=media&token=1bf1e1cc-e4a3-44c8-92af-60bd9040b11d","id":"108730e5-93a9-4da4-83a2-83b6a371ad97","width":2048,"height":1383,"filename":"Workshop-2-64-of-64.jpg","type":"image/jpeg","caption":"(Left to right) Anne is responsible for recruiting new volunteers. Sebastian is chairman of the Ventilen Branch in Copenhagen. Anya is vice-chairman. Jes helps coordinates social outings for the youths.","border":false}]}
```

We ran two workshops with our four participants, each of which was split into two parts. Afterwards a meal was served, both evenings lasted a little over two hours each. We hosted both the workshops in one of the team member's apartment in Vesterbro, Copenhagen. Whilst our university, ITU Copenhagen, offered space in which we could conduct workshops, the team agreed our priority was to create a relaxed and informal atmosphere. We felt under these circumstances our participants would be more likely to open up and be frank about the challenges they face.

### Workshop one

The primary aim of the first workshop was to identify a clear design opening. First, a modified version of Cranium was played. We tailored the game to focus on topics relevant to Ventilen and shifted some of its mechanics to better suit the co-design model pioneered in Scandinavia. Sometimes the player would have to enact a scenario that occurs at Ventilen gatherings. Other times they would need to respond to a quote taken from interviews done with members of the public we did prior to the workshop regarding volunteering.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Fede736aa-59ef-48e1-94a2-c080169e00b9.jpg?alt=media&token=bfe98b51-a271-4ad1-9407-50536939f37f","id":"ede736aa-59ef-48e1-94a2-c080169e00b9","width":2560,"height":1707,"filename":"Co-design-00010-scaled.jpg","type":"image/jpeg","caption":"","border":false}]}
```

This was an ideal activity to start with, as the participants were immediately absorbed by the competitive nature of the game. Within minutes they began speaking freely about each topic the game introduced. If an insightful comment was made, the game would pause organically as the facilitators participating in the game asked follow up questions. The participants enjoyed the game so much that when asked if they wanted a break, they wanted to play a final round.

The second session consisted of a [Future workshop﻿](https://en.wikipedia.org/wiki/Future_workshop). This design exercise got participants to envision their dream scenario for problem solving. First, they reflected on all sorts of problems they have encountered at Ventilen, which they sorted by priority. Then the participants and the team came up with the ideal scenario in which the problem they faced could be solved. This could be entirely abstract from the reality in which they had to tackle it at the time. Lastly, the participants were encouraged to integrate these utopian scenario into the reality of working at Ventilen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2F09ba4412-c443-4940-ab42-2c5878c16201.jpg?alt=media&token=108bbf39-4eb8-4e2e-911b-667b199db0b7","id":"09ba4412-c443-4940-ab42-2c5878c16201","width":2560,"height":1707,"filename":"Co-design-00036-scaled.jpg","type":"image/jpeg","caption":"The participants were given a range of props and materials to illustrate their ideas.","border":false}]}
```

The four key insights from workshop one were:

**Assumptions vs. Reality**\
Based on our fieldwork, we thought that Ventilen would have issues with recruiting volunteers. However this isn’t a problem. They have an excess of applications, and have to turn some down.

**Network Recruiting**\
The participants agreed that knowing somebody in Ventilen was the easiest way to join the charity. This is a double-edged sword as whilst new volunteers require a “stamp of approval” before joining, it also reduces the diversity within the charity, potentially limiting the range of skills and ways of thinking at the charity's disposal.

**Sharing experience within Ventilen**\
Ventilen mentors their volunteers through a trained psychologist. The volunteers have a duty of confidentiality, so meetings with the psychologist are individual. Despite this, the participants all desired more opportunities to share their knowledge and learn from fellow volunteers.

**Leaving the charity** \
Those that receive the support of Ventilen can sometimes struggle when transitioning out of the charity. The participants ascribe this to the fact that some of the youth use Ventilen as a clubhouse, where they meet all their friends.

### Workshop two

The insights gained in workshop two presented a number of design openings that we examined in the second workshop. In the first session, we presented our responses to the design openings we had identified. We encouraged critique, which they were willing to provide thanks to the strong rapport the group had developed in the first workshop. In the second session, the participants collaborated with us to improve the concepts and eventually choose a favoured design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2F713c5c9f-571d-49c8-90f9-1c013d7cdeab.jpg?alt=media&token=3f16c47c-d63b-4abb-9128-dfa67f897c13","id":"713c5c9f-571d-49c8-90f9-1c013d7cdeab","width":2048,"height":1365,"filename":"Workshop-2-32-of-64.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Fa22c36b8-4932-42ed-a8a7-725982f6a6e2.jpg?alt=media&token=88d418fb-7e77-4fcd-9f0e-ea8270fea1e3","id":"a22c36b8-4932-42ed-a8a7-725982f6a6e2","width":2048,"height":1365,"filename":"Workshop-2-27-of-64.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Fc76faf4b-3492-4d04-bac3-7d655001c770.jpg?alt=media&token=630ca7bc-195b-40f9-9cc1-00f4dda5bb5b","id":"c76faf4b-3492-4d04-bac3-7d655001c770","width":2048,"height":1365,"filename":"Workshop-2-42-of-64.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2Fjuap7422GRlJRxgEUdk2%2Ff048d4cd-9a43-453f-a2ec-fef8b099bc2a.jpg?alt=media&token=357d9a9a-ed4d-4079-9ede-44f482088d92","id":"f048d4cd-9a43-453f-a2ec-fef8b099bc2a","width":2048,"height":1365,"filename":"Workshop-2-31-of-64.jpg","type":"image/jpeg","caption":"","border":false}]}
```

We presented the participants with a number of designs that employed modern digital platforms. They saw potential in them but were wary of the complexity they introduced to the organisation and resources they’d require to build and maintain. When we mentioned the idea of adapting the version of Cranium we had used in the first workshop for the Ventilen attendees, they lit up. They agreed that the game had been the catalyst in the success of the first workshop, in that it made a potentially uncomfortable encounter between near strangers into a fun evening in which everyone left feeling progress had been made. The rest of the workshop was spent fleshing out this idea.

Tackling tough topics

Typically the Wall Street Journal (WSJ) hosts business leaders in Davos for the WSJ CEO Council, an exclusive forum in which key issues of the day are discussed. The coronavirus has made this impossible, so Cheerful Twentyfirst were challenged with building a virtual experience to replace the in-person forum.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FtMWqNJgS4YtMA5E5UXgg%2F9f510864-ea13-4bc2-80c2-82ed66079a4f.mp4?alt=media&token=b7521b52-6380-48b6-ae70-485ba1752f8e","id":"9f510864-ea13-4bc2-80c2-82ed66079a4f","width":1600,"height":1200,"filename":"auditorium message_1_1.mp4","type":"video/mp4","caption":"Auditorium — I aimed to make asking the speaker a question as low friction as possible.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FtMWqNJgS4YtMA5E5UXgg%2Fe155c67e-8690-4fae-807c-269078116504.png?alt=media&token=70261da0-cf4b-4662-b200-8d62d0ec09b2","id":"e155c67e-8690-4fae-807c-269078116504","width":3200,"height":2400,"filename":"web_1280___wsj_auditorium_wireframe.png","type":"image/png","caption":"Auditorium wireframe — This interface aims to provide only the most relevant information.","border":false}]}
```

My role was to design and lead the development of the platform on which the event was hosted. We partnered with [eventfinity](https://www.eventfinity.co/), a virtual platform provider. They deserve a huge amount of credit in working in tandem with me so we could have the platform ready in time for the client’s incredibly tight deadline.

Being the sole UX and UI designer, my role was client facing. I used co-design techniques to involve stakeholders in the design process so all had ownership of the final product.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FtMWqNJgS4YtMA5E5UXgg%2F95057736-cb10-4e74-9f1e-f260b91d36a2.mp4?alt=media&token=0450d86d-e47c-4be8-afb7-b56f76dc538b","id":"95057736-cb10-4e74-9f1e-f260b91d36a2","width":3200,"height":2400,"filename":"welcome.mp4","type":"video/mp4","caption":"Welcome — Landing page designed to guide attendees to key features, with an emphasis on the stream itself.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FtMWqNJgS4YtMA5E5UXgg%2Fd0b5bd6a-936c-4639-ad9c-3277ddcaf3c3.png?alt=media&token=41709756-6a59-4047-b4f0-bc2ea685d145","id":"d0b5bd6a-936c-4639-ad9c-3277ddcaf3c3","width":3200,"height":2400,"filename":"web_1280___wsj_wireframe.png","type":"image/png","caption":"Welcome wireframe — Items are placed just above the fold to encourage users to scroll in an organic manner.","border":false}]}
```

For this event the user group was truly unique and therefore a lot of time was spent in understanding their needs and how to appeal to them. 'Less but better' was my North Star during the design process. These attendees did not have the time or patience to find what they wanted. I crafted simple user journeys that streamlined the process of gaining critical information and engaging in activities core to the experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FtMWqNJgS4YtMA5E5UXgg%2Fa8947e0c-4e3b-448c-b995-698312511ed6.mp4?alt=media&token=283e1b76-49cf-46f2-b9df-02ff43606db9","id":"a8947e0c-4e3b-448c-b995-698312511ed6","width":1600,"height":1200,"filename":"Lobby-short.mp4","type":"video/mp4","caption":"Lobby — A collection of features not directly linked to live stream. Networking was emphasised","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FGt1XFSgEswRPMBkwGHrKggr7fq73%2FtMWqNJgS4YtMA5E5UXgg%2F5524b7a2-df89-4cfd-9c1e-a50c56560520.png?alt=media&token=b379f67b-a52f-4472-ad1d-48d49605d184","id":"5524b7a2-df89-4cfd-9c1e-a50c56560520","width":3200,"height":2400,"filename":"web_1280___wsj_lobby_wireframe.png","type":"image/png","caption":"Lobby — I create a micro design system during the design phase of a project. This helps me code the UIs efficiently","border":false}]}
```

The client emphasised how important networking was to their guests. To drive engagement I created a unique animation that featured the attendees’ headshots, a live counter of users online, coupled with an assertive call to action.

> “A huge thank you for the delivery of yesterday — we are getting endless thanks, high-fives and praise from all parties — internal and external.”

**Angus Peckham-Cooper, Vice President, Global Events at Dow Jones**