ShopStatus Simplified

homemock.png

Overview

  • I was the UX Designer for this project in a design team of three. Our goal was to redesign the ShopStatus add on for Shopify, an e-commerce site-building and hosting service.

  • ShopStatus is a monthly service that monitors your Shopify site for uptime, inventory, and refund thresholds. Depending on what you choose to monitor, you receive alerts to inform you of any changes with your online store.

  • Our main objective for the business owner was to clearly display the value of ShopStatus to users, what effects down time could have on your shop, as well as the scaling convenience with multiple sites.

  • Our main objective for the user was to simplify and organize the data provided by ShopStatus and create a more intuitive user flow. 

Challenges

  • There were no comparison tools for users with multiple sites.

  • The data provided to users was unorganized and overwhelming.

  • The learning curve for new users was too high.

  • There was no categorization of alerts to indicate urgency.

  • There was no customization options for the display of the home screen.

User Interviews

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"

0.png

Competative Analysis

​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.

comet.png

User Research

40% of e-commerce store owners we surveyed “almost never” check if their site has gone down.

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.

  • Store owners were most concerned with loss of customers, company embarrassment, and lastly loss of money.

  • They also thought it would be important to prioritize alerts based on urgency.

  • 40% of people would be willing to pay a monthly fee for a  service that monitors their e-commerce site.

Value Proposition

  • We used our research to create focused concept for the product that makes it easier for the user to visualize the benefit to their business. 

Get Alerts When Your Shopify Store is Down

Monitor your shop’s uptime. Build customer loyalty. Save embarrassment and money. Who said your shop could take time off?

 

An essential app for any Shopify store

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. 

Survey Results: 8/10 people say customer loyalty is the most important factor when making sure your site is up

Personas

Persona 1.jpg
Persona 2.jpg
  • With our research we created two unique personas to represent different types of users.

  • Shiela 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. 

Journey Maps

  • 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.  

Journye map1.jpg
Journeymap2.jpg

Sketches

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.

shopstuts ia.jpeg
shopstatus  menus.jpeg

Iterating

Dashboard

V_Brooks-Home.png
R_Brooks-Home.png
V_Brooks-Home1.png

Alert Settings

V_Brooks-Notificaitons.png
R_Brooks-Notifications.png
Sheila- Notifications.png

A/B Testing

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. 

moniters2.jpg
moniters.jpg

Solutions

  • Created better visual separation between different areas of information.

  • Added visual ques for priority, urgency, and at-a-glance viewing.

  • Added more customization so that you could remove unwanted data or alerts, offering a large quantity of information without it being overwhelming to the user.

gfddgfg.PNG

Prototype

monitormock.png

Presentation

Dark Clay  Copy 2.png

Final mockups

p5 desktop mock.png