A talk given at 2019 CAA International in Krakow, Poland.

1. Creating a Universal Design System
for Web, Mobile, Wearables, and XR
by Luke Hollis and Damir Kotorić

2. Over the last five years, we’ve been working on cross-platform web, mobile, and AR/VR apps for several excavations as term partners.

3. Some of our original goals starting out with this were 1. to display archaeological data directly where it was discovered and 2. create an interface that can be used to
construct site or object narratives equally to empowering researchers to interrogate collections.

4. We hope to empower expert users with advanced search tools and live access to geodatabases and shapefiles while also enabling curators and students to construct
guided tours of their data for the general public.

5. The most significant challenge of all this was creating a design system to provide a cohesive experience across mobile, tablet, desktop, AR and VR platforms, and with
that, I turn it over to Damir to talk through how we did it.

6. Universal Design System?
Thank you Luke. Hello everyone. Today I will take you on a tour of how we created our design system. This talk is about the “how”, or the process we use to build a
design system. Information that will hopefully help you if you decide to create your own design system for your digital product.
Quick show of hands: who here knows what a design system is?
In a nutshell, design systems are an extension of systems thinking. Whether you’re aware of it or not, you interact with products derived from systems thinking every
day.

7. Here’s an example of systems thinking at work: LEGO.
You have many LEGO pieces, but every piece follows a certain standard in order for it to plug ’n play with other pieces. This creates a consistent experience. When a
new LEGO set comes out, consumers already know the ground rules for how to use it.

8. Here’s another one: IKEA
Each piece conveys a certain IKEA aesthetic, and even when some furniture is more unique, it is often assembled using the same standard IKEA screws and parts.
This reduces cost for IKEA because those parts can be mass produced and reused.

9. And a final example: Apple and their cohesive suite of products.
Their products have a similar Apple feel to them. If you have an iPhone, pick up an Apple Watch, and you’re already half familiar with how it works, even if you’ve never
used it before. You spend less time learning, and more time enjoying and exploring. And that’s exactly what we want for our users as well.

10. Systems Design v Bespoke Design
So those 3 examples I just gave you all derive from systems design. On the opposite end of the spectrum is bespoke design. That is, handcrafted single-use designs.
There’s nothing wrong with bespoke design if one has the time and money for it. But it’s usually more costly, especially as a product grows. Imagine how much your
average iPhone would cost if Apple assigned one of their designers to design one specifically for you. And how long such a phone would take to build. Having your own
bespoke smart phone designer seems ludicrous, right?
Yet, in a way, this is how most digital products are made these days. From websites, to mobile and VR apps. And, this cost and inefficiency makes building these
digital products costly, and therefore more difficult to secure funding for. Especially projects on tight budgets could really benefit from systems design thinking.

11. Design at scale to build
high-quality, cohesive products,
across all digital platforms — fast.
So, the point of creating a design system is to design at scale to build high-quality, cohesive products, across all digital platforms — and fast.

12. Example
Let me give you an example of a design system we have created at Archimedes Digital.

13. This is our flagship product, Orpheus, and we created a design system specifically for Orpheus.
The idea for this design here is that you as a user can explore a Google Street view style 360 experience of the Giza plateau in Egypt.
The idea is that you’ll be able to do this on a virtual reality device, on laptop, mobile, and smart watch. Next I’ll show you how the UI shares common colours,
typography, icons, and a family of common UI components like the play button, and the map view.
So first, the virtual reality experience that you can see on the left there…

14. So imagine you have a virtual reality headset strapped to your head, and a controller in hand, and you go to explore the Giza plateau in virtual reality, and you see this.
I’ll zoom in on the UI here.
Image credits: https://unsplash.com/photos/CJ4mbwSK3EY

15. And here, you can select “Start Tour” to explore the space around you, and to hear an audio narration as you explore the space.
So, with your controller you would select the “Start Tour” button at the top…

16. … and the tour would start.
The audio narration starts as well and you can look around and explore the space. Zooming in on the UI…

17. …these little pins that let you teleport yourself to tour spots in virtual reality. Now, I won’t go into detail here about how this app will actually work, but just notice how
this virtual reality experience, feels similar to the laptop experience, which I’ll show you now.

18. Here’s the laptop experience for Orpheus. Same content you saw before.

19. A slightly different layout, adjusted to suit the laptop experience. But here you can still click the “Start Tour” button. The core features are the same. So, you click the
“Start Tour” button and…

20. … the tour starts. To zoom in…

21. …again, same colours, typography, and the same UI components, though we do tweak them a bit to adopt the device. Next, you’ll notice how the sidebar that’s shown
on the right here, is reused on mobile, where it’s location is at the bottom of the display.

22. And here it is on mobile. And as you see, the sidebar information and UI has moved to the bottom of the viewport, to make best use of the limitations of the mobile
display. But they are all still the same components, same icons and typography, the same features, and the same consistent user experience.
Next, I’ll show you how we have adjusted this UI to fit on a smart watch display, where there is a lot less room.

23. So, here it is on an Apple Watch. I’ll zoom in…

24. You have the same controls here, and the content is out of view. And the emphasis here is on the audio guided tour.
So, again, all the same features, the same UI components, just adjusted to fit each type of device.

25. Design system recipe
So here’s the recipe we used to create the design system you just saw.

26. Don’t reinvent the wheel
Step 1
So first thing. Don’t reinvent the wheel. I can’t stress this highly enough. Unless your project has a six figure budget, do yourself a favour, and pick a ready-made design
system and customise it to match your brand.

27. To make things easy, Google has created a ready-made design system that everyone can use and it doesn’t cost anything. It’s called Material Design and you can
think of it as a big bucket full of UI Lego blocks that you can use to quickly assemble your digital product.

28. You can find out more about Material Design by going to material.io and seeing all the different guidelines and UI Lego blocks that Material Design comes with.

29. Here’s a glance at some of the things that Material Design comes with: a colour system, a typographic system, animations, buttons, forms, selection controls,
navigation, sliders, tabs, you name it.
All you have to do is customise it a bit with your own colours and typography, and you’re good to go.

30. Customise Material Design
Step 2
And here’s how we customise Material Design to suit our needs.

31. Material Design starter packs are available for common design programs like Sketch and Figma. We use Figma (http://figma.com), and here you can see how we
customised material design using a free-to-download template (https://www.figma.com/resources/assets/material-design-themeing-ui-kit/). The link will be in the slide
notes.

32. So what you do with this template is you pick your colour scheme.

33. You choose your fonts.

34. And you get a nice overview of your theme.

35. Then all the components are themed to match your colours and your typography.

36. And you get a whole bunch of icons ready to go.

37. Build upon it
Step 3
Material Design gives us a solid foundation, but not nearly enough in most cases to design a whole product with it alone. You still need to build upon it, but Material
Design is a solid foundation. So, at Archimedes Digital about 30% of our design system is powered by Material Design. The remaining 70% comes from our own
creations.

38. So again looking back to the design I showed earlier. Here the typography, and colours are powered by Material Design. Everything else is our own addition to that
design system.
So, the design of the header and the header navigation, the big hero section at the top and the map view below, all that is our own creation on top of Material Design.

39. Tips
So some tips for creating design systems.

40. Default to simplicity and
consistency
I cannot stress this enough. Default to simplicity and consistency. These are your friends.

41. Looking at our vision for Orpheus here, we’re hoping that when a user moves from one type of device to another, that they’ll be able to quickly learn how to use
Orpheus on the new device. And, because of this consistency we can write less and that saves a lot of development time as well.

42. One source of truth
This is also important. You want one source of truth for the design system.
You want to have one place where your design system lives. If it’s scattered across mockups, emails, Slack messages, code, sketches on paper — if it’s scattered
then it’s nowhere, and if it’s nowhere then you don’t have a really have a design system.

43. So for us, the design system is born in a design tool — Figma. Then from Figma it moves to Miro, which is sort of a whiteboard in the cloud. Here we document it and
discuss it. This is where I lay out all the features and screens that our product will have. And this is where designers, developers, our clients open when we collaborate
early on.
But these are just architectural sketches, a temporary holding place for our design system vision until we build it out in code. It’s an important deliverable that help us
along the journey to creating our design system. But ultimately it’s just a throwaway deliverable. Because our design system doesn’t live in Figma or in Miro.

44. Our design system is baked right into the code itself. It’s a living, breathing design system, and it evolves as the codebase itself evolves.
This part could get quite technical, and beyond the scope of this talk.

45. storybook.orphe.us
But in case you’re curious, we use React to power our codebase, and a neat little React library called Storybook to help us do so. It’s open to the public for anyone to
view on storybook.orphe.us.

46. Okay, but how does this relate to
archaeology?
Okay, so this is cool, but how does this help you regarding the creation of your own digital products?

47. Greater efficiency.
Money wisely spent.
Well, if you start a product by utilising a ready-made design systems instead of bespoke handcrafting it from scratch, you’ll be far more efficient. This efficiency will be a
factor — albeit not the only factor — but an important factor in being able to secure funding for your work.
Basically, utilising a design system like Google’s Material Design allows you to hit the ground running. And this helps no matter what you’re working on, but especially
those with tight budgets, as is often the case in our field.

48. blog.archimedes.digital
@archimedigital
10 minutes is only enough to scratch the surface of using design systems. There’s plenty more about this on our blog, where we also talk about how we prototype
virtual reality experiences, examples of how we run remote design sprints, and how we use design thinking to help test the waters for product ideas.
We’re also on Twitter: @archimedigital.

49. Recommended Reading
• https://www.designbetter.co/design-systems-handbook
• https://polaris.shopify.com/ for an example of a great design system in
action
• https://storybook.js.org/ for the React library that makes building UI
libraries a breeze
Before I finish up, I recommend you check out the following reading material. The designbetter.co blog posts are a particularly valuable resource.
Oh, and if you have experimented with design systems yourself, please come to us and tell us your story. We’d love to hear and learn from others who tackled similar
problems.

50. Thank You
blog.archimedes.digital
@archimedigital
Thank you for your time.