Purple.

Purple is a digital storytelling company that innovates and embraces the power of technology to grab attention and engage minds.

They help their clients bring their stories to the world —like never before. Some of their clients include Honeywell, SAP, Under Armour, and Microsoft.

Read more+

Before getting in touch with Naam Agency, Purple had recently reinvented its services after a major internal shift, transforming from a digital agency into a digital storytelling company.

One of the main reasons for this change was the effect of Hyro, Purple's brand-new immersive storytelling software platform, on the client's ways of presenting.

With the power of Hyro, they are changing the game for digital storytelling, and a new website was necessary to market these services. So, Purple asked us to reimagine the website with Hyro as their main selling point.

This case was my final project as Creative Digital Director and Webflow Developer at Naam Agency. I developed the entire website in Webflow with the Webflow CMS and custom integrations.

Services
Information Architecture
UX/UI Design
Webflow Development
A tablet on a grey background showing the Purple homepage
Purple's homepage hero.
Four phones on a grey background with various pages of the Purple website
Purple's website across a few mobile pages.

Challenges.

During the process we created a few main questions to help us structure our information, and keep the user & business needs in mind.

How might we present Purple's revamped services and explain they all run on Hyro, the heart of all their solutions?
1.
How might we use Hyro's existing marketing photos and videos to inspire sales and marketing managers to book a demo with Purple?
2.
How might we create the new site in Webflow and utilize Webflow's WYSIWYG Editor to give Purple's marketing team an intuitively updatable website?
3.
How might we help Purple find new talent as the company grows and provides solutions worldwide?
4.
How might we develop a Case Studies Collection Page with a CMS slider and reusable components in Webflow?
Bonus
Explore ↓
A tablet on a grey background showing a call-to-action to Hyro on the Purple website
Hyro call-to-action block.
A tablet on a grey background showing the solution section on the Purple website
Discover the solutions Purple offers.

Make it Immersive

The main design objective was that the website needed to show Hyro's immersive character, carry large amounts of content, and be easily editable.

However, the Hyro software is only one part of the puzzle. Hyro is user-friendly presentation-building software that drives audiovisual hardware to project presentations on multiple walls or TVs, creating an immersive room where a presenter can control the experience by swiping gestures or speaking commands.

The second part is the storytelling services; these are the presentations Purple creates for clients. Even though Hyro is an easy-to-use tool and clients can create their own experiences, it's common for clients to hire Purple to design one for them.

Additionally, Purple also provides (audiovisual) hardware solutions. For example, they can rebuild a room inside your office to host a permanent Hyro installation. Want to take Hyro to a convention? No problem, Purtple's got a portable pop-up room just for that. There are loads of audiovisual options, depending on how immersive you want your experience to be.

All in all, Purple offers a wide range of services that need careful explanation. Something we heavily focused on when designing the website.

Explore ↓
Full-page screenshot of the Case Study detail page on the Purple website
Full-page case study screenshot.
Typography used on the Purple website
Typography.
Structural colors from the Purple website
Structural colors.

Hyro

Hyro is Purple's most important product, so they requested it to be displayed in the main menu. For us, this meant that the Hyro page, especially the hero section, needed to pack a punch. Additionally, the rest of the page should clearly explain all of Hyro's features and present showcases of existing client projects that visualize the power of Hyro.

The main message the page needs to convey is that whether you want to boost sales, increase engagement, improve collaboration, or educate and inspire, Hyro is the tool for you.

Explore ↓
A laptop on a black background displaying the Hyro hero page
Hyro's hero interaction.
A tablet on a grey background displaying the Hyro page hero
Hyro's hero section.
Full-page screenshot of the Hyro page on the Purple website
Full-page screenshot of Purple's Hyro page.
Four phones on a grey background showing the Hyro page of the Purple website
The Hyro page at a mobile breakpoint.

Target Audience

Purple wanted to make sure their new website spoke directly to sales and marketing managers that wanted to present or educate on a whole new level. So we created a balanced combination of relevant case studies, metrics, and inspiring videos to help draw this audience in.

Besides that, Purple required new talent to help realize its new adventure. To help bring in this fresh talent, we created 'Career' pages to show all openings and the benefits of working at Purple. Besides that, interested people can directly apply for a role that suits them.

Explore ↓
A tablet on a grey background displaying Purple's contact page
Contact page.
A tablet on a grey background displaying Purple's job openings
Career openings component.
A tablet on a grey background showing Purple's team members
Team members section for the about page.
A tablet on a grey background showing a section of Purple's careers page
Careers page.
A tablet on a grey background showing Purple's career page hero section
Careers page hero section.
A tablet on a grey background showing Purple's values section on the careers page
Careers page 'values' section.

Webflow Components

During the Webflow development of the new Purple site, Webflow completely updated the Symbols, now known as Components.

To take advantage of this opportunity, I directly translated various components from the Figma design file to Webflow components. This development makes everything inside the Purple project easy to reuse and edit.

Explore ↓
Navigational components of Purple's website
Navigational components.
Form design for Purple's career page
Career Openings form.

Book a demo

The end-point for all user flows in the design strategy is the 'Book A Demo' page. Its form is minimal, simple, and easy to understand, all to help improve completion rates.

After someone sends a form, Purple gets in touch to book a date for the demo. This way, a potential new client can experience Hyro, and Purple's services, the way they should. In real life.

Explore ↓
A tablet and phone showing Purple's book a demo form page
Book a demo form pages.

Summary

Last I heard, Purple was growing rapidly and building new Hyro presentation centers at companies worldwide.

However, making this case study was bitter-sweet. After 12 years of designing and directing at Naam Agency, I decided it was time for something new, and this was my final project for them.

This project was an excellent closer to my time at Naam Agency. One in which all my skills came together. I'm sure Pepijn Eikelboom, Naam's (sometimes Webflow) front-end developer, will do my design and development justice and take care of all the new updates.

Explore ↓
Multiple tablets on a grey background showing various pages of Purple's website
Overview of various pages and sections of the Purple website.
Client
Purple Digital Storytelling
Services
Information Architecture
UX/UI Design
Webflow Development
Sector
Advertising
Year
2022
Details
Design
Timothy Maurer
Development
Timothy Maurer
Pepijn Eikelboom (Updates)
Strategy
Timothy Maurer
Creative Direction
Timothy Maurer
Team
Agency