How whiteboarding helped us identify overlooked user experiences
Taking a low-fidelity approach to UI illustrations improved our localization for Shopify.com
When Shopify first put together a team focused on international merchants in 2017, Shopify.com was using imagery with English text and currencies exclusively in USD. Learning to localize and scale visuals for an international audience in 19 languages is challenging at the best of times. With the adoption of our new international-first mindset, we recognized that updating and maintaining image assets to support all screen sizes was not scalable. It was taking up too much time for our developers and designers. But before jumping into high-fidelity designs, it was important to take a moment to zoom out and look at the broader picture. This post describes our design process and how a multidisciplinary approach to whiteboarding allowed us to find the right solution for a visual design system and save significant time.
Before we undertook this multidisciplinary approach, our first two attempts at internationalization had run into some hurdles.
Our first approach used symbols when representing text to create a scalable visual system.
Through user research, we found the grey “text” lines didn’t always provide enough context when communicating Shopify’s features, products, and capabilities. This was especially true when Shopify first entered the Japanese market. The early user research showed our Japanese users wanted to see more literal representations of our admin to help them evaluate if Shopify was the right fit for their business.
The second iteration of our visuals was a hybrid approach where we used a combination of the grey “text” lines and translated text along with localized avatars.
When we kicked off a full Shopify.com redesign we thought it would be a good time to start exploring what a more development- and design-friendly approach might look like to adapt visuals for our increasing international markets. We started with the name “Inline SVGs” but eventually landed on “UI illustrations” to prevent being tied to any particular technical implementation. But before jumping into high-fidelity designs, it was important to take a moment to zoom out and look at the broader picture.
One example that inspired our team came from Slack.com. Slack’s approach took into account two of our International UX principles — plan for text expansion and cultural differences. Their use of product visuals on their marketing site is a great example on how to handle localization for international markets.
Slack’s visuals were coded in HTML + CSS. This did a better job of managing text expansion for multiple breakpoints and enabling unique localized features relevant to any given culture. For example, to reflect traditional cultural values and sensitivity to racialized imagery, the Japanese product visuals feature coloured boxes in place of avatars. Through user research and experimentation, we found that when a user resonates with product marketing — without always being able to articulate why — it can often be attributed to localization.
Inspired by this understanding, and with a desire to better our international users’ experience, our team entered a design and UX developer whiteboard session. The goal was to leave the room with a minimum viable concept for the UI illustration visual design system. We whiteboarded together for a few hours to identify all the user experience cases that we needed to take into account. We know Shopify users log into their admin dashboard to gather valuable information about the state of their business. We needed a way to represent those product use cases while enhancing the four key pillars when starting a business with Shopify — Start, Sell, Market and Manage.
To understand what each of these pillars could be represented by, we started with a low fidelity “box” representation of Shopify’s admin dashboard.
With limited resources and a short timeline we wanted to make sure we were going to be able to ship an MVP. Bringing together expertise in development, design, and internationalization for a whiteboarding session would allow us to understand the browser limitations and what techniques we could use to enable each discipline to move quickly. It helped us avoid common pitfalls like text expanding beyond boxes or challenges that can arise during design to dev hand-off. We optimized for reusability and were on the same page from the very beginning of the UI illustration concept.
We limited the number of variations to six — in our case, less was more. We used interchangeable elements that would allow us to test the concept of UI Illustrations in production and enable the visual language to scale. Scale was especially important if we decided this was going to be a long-term approach on Shopify.com international domains because it enables other teams to easily contribute. We also gave ourselves an opportunity to explore what enhanced user delight might feel like once we were able to add visual layering plus motion.
Once we decided on our low-fidelity visual approach, we followed that with brainstorming a list of potential experiences that users might see in their Shopify admin panel:
- Fast growth (business)
- Build your brand/store
- Standout retail experience
- Ecommerce anywhere (Mobile)
- Extend your reach (Channels)
- Audience targeting
- Campaign creation
- Marketing automation
- Actionable insights
- Centralized fulfillment
- Payment processing
- Store insights
- Business activities
With our Shopify.com redesign, we recognized we couldn’t necessarily represent everything and short-listed actions that would enhance the messaging behind Start, Sell, Market, and Manage.
- Fast growth + Shopify
- Build your brand/store
- Standout retail experience
- Ecommerce anywhere (Mobile)
- Combination for 5, 6, 7 & 8
During our whiteboard session we decided on four interchangeable components of Shopify’s admin: total sales, total sessions, unfulfilled orders, and analytics.
Our designer, Jana de Klerk, was able to take the low-fidelity concepts we put together while whiteboarding, and create beautiful high-fidelity mockups that would enable us to move into the development stage.
The original four high-fidelity mockups would set the stage for reusable components.
With each panel you can change the component being highlighted. This allows our visual design system to scale into more examples that represent Shopify’s product and surface the most relevant user information.
Each panel can also be adapted for desktop or mobile views with relevant information:
We quickly followed the desktop UI Illustrations with mobile representations:
Along with an interchangeable library of elements:
Updating and maintaining image assets as we grew internationally was not scalable and took up too much time for our development and design team. Bringing together development and design for a whiteboarding and wireframing session was a crucial step in helping us build a visual design system that could scale with international expansion. Through that process it helped us adopt a localization strategy to surface localized content to the user. It allowed our developers to build components that could be flexible and easily maintained as we grew internationally.
The approach doesn’t guarantee success but setting a few hours aside to whiteboard and wireframe with multiple disciplines is super valuable! Today, you can see variations of the UI Illustrations across all of our Shopify.com domains. You can read more about the technical dev process with our UI illustrations from Jen Taylor on our UX blog and Ilana Beer on our Engineering blog.
