Shop Status
A web application to monitor and manage your Shopify store
My role: UX Designer
Tools: Sketch, Invision
Duration: 3 months
My role: UX Designer
Tools: Sketch, Invision
Duration: 3 months
Shop Status is a monthly service that monitors your Shopify Store for uptime, inventory, and refund thersholds.
Our main objective for this project was to simplify and organize the data provided by ShopStatus and create a more intuitive flow.
There were no comparison tools for users with multiple sites.
The data provided to users was unorganized and overwhelming.
There was no categorization of alerts to indicate urgency.
There was no customization options for the display of the home screen.
To get us started we grabbed a few users to watch them run through the site and see what they had to say about their experience.
"I don't know why you would monitor more than one page for uptime."
"I don't know why some pages go down unless there's an error but I don't know how that would happen."
"Are these notifications errors or just activity?"
"If my site is going down I would want to know why and what to do about it."
"I kind of ignore the side menu because it wasn't clear."
"I would want to be able to choose how I am notified"
To see how similar apps tackled the issues our users had during testing we took a look at Upkeep, Splunck, Datadog, and Google analytics. We wanted to see how other apps are displaying this type of information and in what ways they were organizing it.
In order to better understand the needs of our users we sent out a survey asking what they value about their store and what they believed would be most helpful to monitor.
In order to better understand the needs of our users we sent out a survey asking what they value about their store and what they believed would be most helpful to monitor.
Monitor your shop’s uptime. Build customer loyalty. Save embarrassment and money. Who said your shop could take time off?
ShopStatus monitors pages, functions, apps, and domains to send you real-time alerts when systems fail.
ShopStatus monitors your stores uptime, page errors, refunds, and inventory. When your pages are down or even load really slowly, customers will leave your site and you can gain an unreliable reputation. This affects sales and customer loyalty, and your sites’ rapport. Knowing when your store is down and why will save you time and money to get it back up and running as soon as possible. Shopstatus provides real time alerts, straight to you. Other apps will keep track of your stores progress, while Shopstatus can actually help you improve reliability. Make sure your store is running at maximum efficiency.
With our research we created two unique personas to represent different types of users.
Sheila is a new Shopify user who only needs to monitor one site. She is not quite sure why she needs to monitor her pages or what to do when they go down.
Brooks is an entrepreneur that uses Shopify to monitor several of his stores. He knows that when a page is down, it has a direct impact on his conversion rates. He wants to be able to meticulously monitor and compare his Shops analytics to see which would benefit most from his time.
To create our journey maps we took each of our personas along their user flows and mapped where they would encounter challenges along the way. We attached feelings to those challenges to better understand why they are feeling this way and how we can improve their journey.
Sheila starts her journey at the landing page where she sees a list of alerts. She is optimistic that the app is working but is confused by what the alerts mean and not sure what to do about them. She goes to her Shops home page to find more alerts that pertain to just her shop. She tries to click on them for more information but finds they aren't responsive. Sheila sees the refunds and inventory monitors and is excited because those are more recognizable
Brooks starts off having to chose which one of his stores to monitor because ShopStatus can currently only monitor one at a time. He glances at the alerts on the dashboard but is not sure which ones to pay attention to first. He is now wondering how to organize his alerts better. He looks to the menu but is confused by the labeling. He recognizes the analytics tab and clicks in. Brooks really appreciates being able to see his stores analytics but would like to be able to compare stores.
The amount of information ShopStatus provided was overwhelming for the user. To solve this we decided to use the card method to organize it into related sections and make it easier to digest while still having access to it all in one convenient location. Then we designed two different menu options to test.
Option A used text labels and tabs to give quick access to relevant features as well as an easily recognizable color scheme for alerts to give more info at a glance.
Option B utilized icons to make information grouping more intuitive and sub menus to reduce noise from unrelated information.
The Dashboard is the landing page for the app. From the research we could tell that different information would be important to different users. For that reason separated information onto different cards. This design enabled us to create a customizable dashboard. The small red/green corners are a switch to indicate if this card is shown on your dashboard, or removed (but will still be visible on its' original page).
Something that stood out immediately in the current state of the app, was that shop activity was all displayed in plain text. This means you would have to read through all of it to see if there is anything you need to worry about. To solve this we created a color coded alert system. The more crucial information would display at the top in red to catch your eye. You get to choose which alerts will display in which color. Giving you control over what information you feel is most imperative.
Something that was very important to this app was organization. While working with all of the different bits of information we changed our menu style 3 or 4 times to figure out how to best accommodate each category for each store.
To make sure we were on the right track with our designs we made different versions of our alert cards and asked users for feedback. Most felt the additional information being displayed by default for urgent cards was much easier to read and overall more useful.
As part of our presentation we created an interactive prototype of our design in InVision
After many iterations these are the final designs
