Little Stream Software was looking to update a reporting tool for their Repeat Customer Insights app on Shopify that allows merchants to gain visibility into their customer purchases. Their goal was to move a current reporting tool from one page to another and give it a fresh new look in the process.
How I Helped
Wireframe designs of the new report.
For any merchant, understanding why customers purchase from you, or don’t, is incredibly important. But understanding which customers repeatedly purchase from you, when they purchase and what they purchase, is gold.
The challenge is displaying this valuable information in a way that merchants can absorb and take action. So how do you display content heavy data in a simple (or simpler) way that they understand?
Eric, the founder of Little Stream Software, asked me to help mockup a better way to display the data. He’s a developer, so he could code it, but didn’t feel confident in his skills to make it look appealing.
We discussed his ideal layout, which included moving from a 1 x 4 layout to a 2 x 2 grid, larger fonts and room to grow so he can add another card or two in the future.
The limitations on the design were:
- the standard design elements from Shopify were required,
- the design had to be compatible with the Uptown design framework that Little Stream Software uses, and
- components and data needed to match the other reports in the application.
How the data comes in to the cards is incredibly important and required further questions. For example, can the text be changed? Nope!
This is important to know. My original thought was to reduce the redundancy between the metric warning.
It’s not necessary to say “average order values” when there is a heading called “Average Order Value”.
However, this data is used elsewhere in the application and changing the text wasn’t worth the development effort.
My other thought, was to add some charts. Unfortunately, Eric wasn’t a big fan of charts because so many people use them the wrong way. Can’t say I disagree either.
So I provided some options.
My initial wireframe designs
After presenting the first three options, Eric completely changed his thought process. He realized that the 3rd option in a single column resonated more with Shopify’s layout and more with him.
Also, some of metrics are a bit difficult to understand when you’re new to Repeat Customer Insights. So we brainstormed ideas on how to add context without crowding the cards.
And came back to the standard Shopify admin panel for something like this:
My final wireframe design
We ended up with a dashboard that is familiar to Little Stream Software’s customer because it’s similar to Shopify and something that will be able to grow as they add more cards.
I like this layout. It gives me the flexibility to add charts when necessary without drastically changing the aesthetics. Its clean and easily highlights the important things. It’s clear when something is not right with a stores metric.
Eric, Founder of Little Stream Software.
Live and in action
Here’s the first release of the design live inside the application.