Human-centered storytelling using the bento box

Role:

UX Designer

Responsibilities:

Brand, Visual Design


Key Outcomes


Evolved the Duo brand

Influenced the entire Brand Design team to adopt this style into the evolving Brand Guidelines.

Reduced uncertainty

Clear product UI give potential customers confidence.

Stakeholder satisfaction

100% Positive stakeholder feedback.

Use-case forward visual storytelling

Use-case forward visual storytelling gives customers a glimpse into how the product can enhance their lives.




Background

Since it had been a few years since the Duo Brand was updated, I conducted research to understand what is current and up to date. I sought out best practices in the industry that could potentially be applied to our brand storytelling. The current brand design used everywhere from At-A-Glance documents to Business Decision Maker Decks were using a style known as "collage," due to its literal collage method of layering images to convey a meaning, message, or story.

You can see below how this style played out—greyscale imagery, many elements overlapping.



The Challenge

When I first entered my role as a UX Designer on the web team, I knew that I wanted to address many of the issues that plagued not only the website itself, but the overall Duo Brand. Since the two are so intertwined, I knew that the task of evolving the brand's visual design was going to be a much bigger project than it seemed at a glance.

In my perspective (being on the web design team), evolving a brand's visual design requires considering:

  1. The website's component current design system

  2. Scalability across pages and mediums

  3. Use cases across the spectrum of simplest messaging to most complex


Key issues:

The collage style you see above received feedback of being "too lifeless" because of the lifestyle imagery that had been treated to be in greyscale. It also more often received the feedback that this style had contributed to visual fatigue due to the amount of elements stacked on top of each other with tiny elements needing to be deciphered. This left our users leaving each image either confused, fatigued, or both from having to try to understand what each image was attempting to convey since it utilized a lot of metaphors.

All of this culminated into the feeling that the overall brand needed a refresh, with the current visual design feeling dated, instead of its original founding intent—to be unique in the sea of the incumbent security companies rising up.

Design

In attempt to tackle this challenge, I took the initiative to create a sandbox to throw ideas at a digital wall. I needed a place to be messy, try things, and not be afraid to break it all down and build it back up.

Hopefully, you like cats if you are reading this. You might find that you'd want to work in this sandbox too!


Exploration

Sometimes, it can be hard to reimagine something that has existed for so long. My approach to this was to play as if there were no bounds or limitations to what could be changed. This helps with taking a larger stride forward than if we had only stayed strictly within the bounds of what we knew was possible, typical corporate red tape included.

I created several iterations of mostly reimagined visual designs for the website that had freedom across modifying components and creating new ones that would serve the purpose of storytelling.



The common thread that revealed itself from each iteration was the idea of being bold, bright, and most importantly, human.



Throughout the exercise, I ensured we preserved the integrity of the brand's history and significance, all while distilling the elements that made Duo shine from the start—shedding all of the fluff.


I designed several iterations before arriving at one that embodied the bold, bright, and humanity we were searching for. While I didn't share all the iteractions, the two above should give. you an idea of how we explored various directions for how the brand would manifest via web.

Revealing the brand's potential

While it was a necessary exercise, most of the complete redesigns were aspirational given where we were with our budget and reality of pages we had across the site. With this in mind, we took elements from the exploration and shaped it to fit into our current site; more as a stepping stone of evolution, rather than a complete overhaul.

You may be thinking that this all seems like a lot of exploration for something that would ultimately not be made pixel by pixel, but it was actually the work we needed to dive into in order to reveal the potential the Duo brand has. It was truly a matter of the chicken and the egg.

Aside from the lifestyle photography that embodied real-life use cases, we needed a way to showcase our product in a much simpler way than was currently done. We explored a few approaches:

  1. Laying out key UI elements, floating next to each other (with the potential to subtly animate as if was being used in the actual product)

  2. Laying out key UI elements that are treated to be isolated, without context of where they belong (e.g. without the phone frame)

  3. Laying out key UI screens with high context of the user journey within clear device frames

  4. Laying out key UI screens with high context of the user's journey with simplified device frames

Example #1



Example #2



Example #3



Example #4



*Example 3 was created by an external agency*

For each of these approaches, something always fell short under our pressure testing, so we knew we needed a more robust approach.

Launch v1.

Example #3 was the quick solution that was launched as a quick win, a small step of progress. It solved the issue of feeling too dated and monochrome, but it wasn't enough. So, I proposed we dive deeper into the style shown in Example #4 and build on it.

Launch v2.
Crafting a flexible, visual storytelling mode

To be clear, I am not claiming we invented this approach—the method of laying out cards in a "bento box" style has been done by numerous companies before us (notably Apple). For the sake of our internal approach, I wanted to ensure we made it our own. I started with building out some example wireframes of what this could look like, depending on the number of elements in the story.

The concept really felt like it was shining when we had the full-width of the screen to fill with visuals; however, we needed to factor in all possible cases that this could be utilized. Whether it was for a lower level page, all the way up to the homepage, we needed a way to subtract and add elements in depending on any given space available on those pages/what was appropriate.


For deeper level pages, I made sure that only the most valuable elements were in the spotlight. Here's an example from an Amazon Web Services (AWS) partner page I designed:



This concept is really designed to help the user really feel the brand story. At full-width, this comes into full effect with the user fully immersed in the visual story.


Impact

We received such positive feedback on this direction that it was adopted by the Brand Design team and incorporated into the Duo Brand Guidelines. This was used to create this promotional video that utilized the bento layout, with subtle animations.


We received 100% satisfaction feedback from stakeholders, including Product Marketing Managers, Partner Marketing Managers and Partners (such as Google and Amazon), and SEO.

Closing thoughts

Defining an evolving direction for a brand is not a linear process and this project shows exactly that, Reflecting back, the most helpful things that refined the process were:

  1. Thinking of the user/prospective customer and what would resonate emotionally

  2. How to reduce product uncertainty and give prospective customers confidence in the Duo product

  3. Identifying core elements of Duo's brand identity that have been/are received well