Designing Shopify iOS Widgets in three days

Shopify Summer 2020
Mockup of final widget designs on the iOS home screen
This project got some CEO clout on Twitter

The start of a three-day, company-wide hackathon

Hack Days

During my 2020 summer internship at Shopify, the company was holding its traditional Hack Days event. This event is an exciting time for Shopifolk, since it's an opportunity for everyone in the company to step away from their everyday work to devote three days to working on a project that inspires them and improves Shopify. In short, Hack Days is all about building something awesome in a short period of time, all while learning, experimenting and working with new people.

iOS Widgets

I found a Hack Days team that was going create Shopify iOS widgets and knew right away that I wanted to be a part of the project. I believe that widgets introduce an interesting design challenge, where designers must find ways to visually present information in a glanceable and consumable – a challenge I was looking forward to taking on.

The three different widget sizes

Contributing in a team of 5 designers

I teamed with 4 other designers, some developers and a product manager during this three day event. I contributed to the research, ideation and visual design direction, all leading up to the final widget designs. The process was a collaborate effort, where I had the opportunity to diverge on my own ideas and later converge with the other designers to iterate until the end.

Why design widgets?

Designing widgets provides us with a unique opportunity to bring merchants a more polished mobile experience. Widgets could provide insightful information about a merchant's store throughout the day, which otherwise would mean navigating into the app to find. At Shopify we are aware that as a merchant, seeing your sales increase or the number of people visting your store is rewarding. If we could surface store insights in an accessible and glanceable way, it'd be a big win for our merchants.

Setting constraints

Apple Human Interface Guidelines

Before diving into ideation, I referenced the Apple Human Interface Guidelines for Widgets, to ensure that I was designing with the right intent. Apple's document outlined many guidelines, however I set these two constraints:

1. Focus the widget on one idea
‍

Identifying a single idea for a widget and scoping the information to display are crucial first steps in the design process

2. Use dynamic information

If a widget’s content never appears to change, people may not keep it in a prominent position... it's important to find ways to keep their content fresh

Data accessibility

The design was also constrained by what data could be surfaced. This meant that that the widgets would use data points that already exists for a merchant's store, instead of introducing new ones. This also ensures that the experience remains consistent, since merchants would be familiar with the the type of data in the widgets and because clicking the widget could link to an existing page in the Shopify app.

Ideation

Focusing widgets on one idea

In Shopify admin, I referenced the analytics dashboard to draw some ideas for what data we could highlight in the form of a widget. As a merchant, this analytics dashboard includes metrics such as total sales, store sessions, customer return rate and other insights about your store. We decided that one widget would focus on total sales throughout the day and the other, on the number of store sessions throughout the day. This decision was made based on past research that indicates most merchants are most interested in these metrics, since sales and sessions are the main performance indicators for their stores – they're a means of tracking success. Focusing seperate widgets on these metrics aligned with the Apple Human Interface guidelines we set out to follow. We confirmed the feasibility of surfacing these metrics with the engineers and then moved onto designing.
Merchant's analytics dashboard in Shopify admin

Establishing a visual design direction

Visual design plays an important role for widgets, since they are small in size, must communicate only the most important information and must retain visual consistency with its app. I contributed to establishing these key design elements for the visual direction of our widgets with the other designers:
  • Rounded fonts would provide a soft and consistent appearance with the rounded shape
  • Using Shopify colors would keep them consistent with the product
  • Visually emphasizing the key metric would ensure glanceability
Summary of the design direction

Diverging to explore design variations

After we established the visual design direction, I diverged to explore different ways of using color, typography, visual graphs and the overall widget information hierarchy. Some variations I explored included:
  • Possibility of a reactive background, depending on the trend of the metric to quickly communicate performance
  • Experimented with the use of the Shopify logo in coordination with the brands green to remain consistent with the existing app
  • Variations in typography size for the metric in contrast to the surrounding information
  • How the metric might truncate to fit large numbers, for bigger merchants
Some of the design variations I explored

Outcomes

After exploring our own designs, the team would converge to share ideas and use dot-voting to narrow in on approaches. This allowed us to move quickly and iterate on or designs. We made some final design decisions:
  • Different solid background colors for each widget so they can easily be distinguished
  • Keep layout consistent for both widgets
  • Use of graphs is a better visual representation of metric trends
  • Remove Shopify logo and use brand colours for brand consistency
  • Indicate the store for the widget – some merchants might have multiple stores
By the last day of the event, staring at Figma canvases with tens of squares was becoming repetitive. However, the team had landed on final designs for the 'Sales' and 'Sessions' widgets.
Final design for the Sales widget
Final design for the Sessions widget
Note: The team explored other metrics and different sized widgets. Due to confidentiallity reasons, I cannot share these designs.

Information hierarchy

The information hierarchy ensures that the widget remains glanceable. At the top, the metric type and the store are the main identifiers for the widget. The metric is large in font size, so that it stands out against the other information. Finally, the graph at the bottom provides a visual to indicate the metric trends throughout the day.
Information hierarchy breakdown of the widget

Live release

While Hack Days forced us to finalize designs in three days, further investigation was required by a dedicated product team before releasing them live. Towards the start of 2021, the Insights team shipped two different widgets in the small size, which included 'Sales' and 'Sessions.' Some of the changes to the design included:
  • Addition of a string that indicates when metric trend and when it was updated
  • Variations for light and dark mode in iOS
  • Removal of currency abbreviation in the 'Sales' widget
While there are some slight visual differences between the live widgets, our project established the foundation for the design and its information hierarchy.
Final versions of the Shopify widgets live on iOS (Sales left and Sessions right)

What's next for Shopify widgets?

The Insights team is currently working on the next milestone for Shopify widgets, looking to bring more metrics and different sized widgets. I'm looking forward to seeing what the team creates and how our project will act as the foundation as the team moves forward.
Credits to: Anna Yu, Jesse Bennett-Chamberlain, Marten Bjork and Jordan Ouellette who were the other designers that contributed to this project.
Have a Shopify store? Go try out the widgets!