My role was a mix of product design, product management and UI development. My title was Lead Design Strategist, but my tasks includes everything from strategy, user and market research, design, front-end development, quality analysis, and design sprint facilitation.
Meet the target audience.
Our primary target were seasoned archivists and humanities professors that wanted to digitise their collections, and make them available for viewing online. But, we also wanted to support hobbyists.
Our first beta users were composed of tech-savvy archivists and hobbyists, and our plan was to build a compelling enough product to convert the hardline print-only traditionalists as well.
The tool was to support advanced features like selection of desired metadata standards for data storage, but never at a great cost to accessibility. We wanted to make archiving accessible and enjoyable for everyone.
Remote design sprint workshops lighting the product path ahead.
Early on, I helped the team realign their strategy. The product initially suffered from scope creep and a fragmented user experience. My job was to clarify what we're building exactly, and thereby reel in the feature list and create a more standardised user experience.
A lean canvas workshop helped clarify the business goals and limitations that we're designing within. Next, we narrowed down on our target audience, and collaborated on an inspiration board to get the product ideas out of our heads and onto a digital whiteboard.
The design sprint workshops here were done with a distributed team of six across different locations and time zones, with me doing the product analysis and user research ahead of time.
One design system to rule all platforms.
Orpheus is bringing digital collections and exhibitions to any device. I kept vigilant about creating a simple, minimalist, no-nonsense design aesthetic, even as the product requirements kept piling in, because we were trying to grow the product and cater to an increasing request for more features. I adopted the philosophy that Orpheus should be like an art gallery. The UI, like the exhibition space in an art gallery, recedes into the background, allowing the content to be king.
In hindsight, this extreme simplicity is what made the design system a success. No matter the use case or platform, by erring on the side of simplicity, this made for an easy-to-navigate user experience and a pragmatic solution to implement.
Coding the UI in React.
Together with my developer colleagues, I helped code the UI in React.js. This made it easier for me to pixel-perfect the UI without having to nag the developers about every small CSS-related adjustment. This is when I got a feel for the strengths and weaknesses of a single page application framework like React.
Moving the public-facing site away from React.
When I came onboard, both the website landing pages, and the core app ran on the same React.js codebase. This made for a very slow load. I spearheaded the move to a static site for all public-facing pages. The result was a remarkable performance improvement. On a fast connection we're talking a decrease in loading time from 10+ seconds, to 2 seconds — critical for a new product that needs to make a solid first impression.
Material design under the hood.
Most startups, including this one, don't have the budget for designers to create uniquely bespoke design systems from a blank canvas. We need a good enough solution, as soon as possible. That's why in the majority of cases I'll opt for a Material Design template, which I then customise — and by that I mean that I remove that awful ripple touch effect, and some other not-so-nice-to-haves. Selective customisation is needed so that the end product doesn't look "Googley", but overall Material Design is a solid design language to start with, and can be customised for any use case.
Cross-cultural design for an international audience.
We aimed to build a digital collection tool for all of the world's cultures. This means following internationalisation best practices, and being mindful about choosing the right typography that can support the widest possible number of languages.
After weighing the pros and cons of different type setups, I ended up choosing Noto Sans as the typeface of choice. I considered using system fonts initially, but even system fonts don't support a lot of minority scripts. In that regard, one typeface stood above all others — Noto.
Experiments in VR.
With Orpheus, we wanted to create a home for digital exhibitions, and to allow viewers to not just experience the archive in 2D, but also in the most immersive way possible.
Rapid prototyping tools for VR are still in their infancy, but I managed to put the above prototype together using a combination of Figma and Vrooms. This allowed us to quickly and cheaply experiment with the VR experience, before committing to the expensive and time-consuming build of a VR app (even more so than web development).
Growing an ambitious startup.
The trick with building Orpheus was to cater as many possible use cases as possible without sinking into feature creep, and without overspecialising the product to one particular domain — easier said than done! Like Medium.com, we wanted to provide the content platform, and allow no restrictions on the type of archives that are created. Archaeological archives, to personal collections, historic events, you name it.
Red Monastery Archive
Noam Chomsky Personal Archives
An archive for one of the Greats of our time.
Centuries old manuscripts.