Disclaimer: This design was created as part of a bootcamp course during my time at Bitmaker General Assembly in Toronto. I am not employed by and have no affiliation with GoSquared or gosquared.com and created this design purely as an excersise to develop my skills
Disclaimer: This design was created as part of a bootcamp course during my time at Bitmaker General Assembly in Toronto. I am not employed by and have no affiliation with GoSquared or gosquared.com and created this design purely as an excersise to develop my skills
Introduction
As our final project for the User Experience/Product Design Immersive Course at General Assembly in Toronto, we were assigned to redesign features for an existing business, based on a client brief.
GoSquared is an Analytics and Chat Automation website based in the UK. For our redesign we were tasked with making the website, which is mainly designed for individual use, more intuitive and easy to use for Small to Medium Businesses.
It was no small (to medium) task.
Introduction
As our final project for the User Experience/Product Design Immersive Course at General Assembly in Toronto, we were assigned to redesign features for an existing business, based on a client brief.
GoSquared is an Analytics and Chat Automation website based in the UK. For our redesign we were tasked with making the website, which is mainly designed for individual use, more intuitive and easy to use for Small to Medium Businesses.
It was no small (to medium) task.
My Roles
User and Contextual Research
Ideation and Wireframes
Hi-Fi Layouts - Prototyping
Usability Testing
My Roles
User and Contextual Research
Ideation and Wireframes
Hi-Fi Layouts - Prototyping
Usability Testing
Tools Used
Whimsical
Sketch
Figma
Adobe XD
Tools Used
Whimsical
Sketch
Figma
Adobe XD
Team Members
Richard Willson
Galen Hogg
Sanket Patil
Team Members
Richard Willson
Galen Hogg
Sanket Patil
What's The Problem, And How Do We Solve It?
What's The Problem, And How Do We Solve It?
How do we expand GoSquared’s platform to be easy to use and understand for small and medium sized businesses with teams of varying sizes and experience levels?
Through changes to the interface and architecture of the existing platform, we can make GoSquared more intuitive for teams of all sizes and experience levels.
Competitive Analysis
We started our research by looking at GoSquared's main competitors, including Google Analytics, MixPanel and Kissmetrics. While many of the sites we looked at already have some ability to add multiple users, GoSquared's main advantage is its Live and Automated Chat features.
One drawback, however, is the lack of a guided tour or onboarding process. We would expect this to mean the platform is intuitive for users of many different experience levels; through contextual inquiry, we found this not to be the case.
We started our research by looking at GoSquared's main competitors, including Google Analytics, MixPanel and Kissmetrics. While many of the sites we looked at already have some ability to add multiple users, GoSquared's main advantage is its Live and Automated Chat features.
One drawback, however, is the lack of a guided tour or onboarding process. We would expect this to mean the platform is intuitive for users of many different experience levels; through contextual inquiry, we found this not to be the case.
Contextual Inquiry
Who We Tested With
8 users between age 24 and 64
Owners or Employees of Small to Medium sized businesses
Varying degrees of experience with
analytics software
Who We Tested With
8 users between age 24 and 64
Owners or Employees of Small to Medium sized businesses
Varying degrees of experience with
analytics software
The Tasks
Invite a Team Member to GoSquared
Customize the GoSquared analytics dashboard
Set Email Reports to be sent Daily
The Tasks
Customize the GoSquared analytics dashboard
Invite a Team Member to GoSquared
Set Email Reports to be sent Daily
We mapped out the results of the contextual inquiry, and started to look at what the biggest pain points for our users might be.
When asked to add a Team Member:
100% of users clicked on People
Users said they were looking for a “Team” button
Only 63% of users were able to
accomplish this task
When asked to customize thier Analytics Dashboard:
Users had trouble finding the “Edit Layout” button
Were unsure about how to interact with the widgets tray
Weren’t sure about changes they made in the widgets tray
60% of users were looking for an “x” or "Trash Can" icon to remove a widget
Users had trouble finding the
“Edit Layout” button
Were unsure about how to interact
with the widgets tray
Weren’t sure about changes they
made in the widgets tray
60% of users were looking for an “x” or
"Trash Can" icon to remove a widget
When asked to set Email Reports to be sent Daily:
Users were confused about where to start looking for Email Settings
When Users did locate the Settings menu, most were unaware that there were separate sub-menus (Project Settings, My Account)
Only 13% of users were able to
accomplish this task
With validation that the GoSquared platform was not intuitive enough to stand on its own without changes to the interface or a guided tour, we defined our problem statement and got to work brainstorming on how we would solve it.
Sketching Out The Solution
We split off and started doing sketches. Thinking about 3 of the main problem areas we identified, we gave ourselves 20 minutes per task to think up some ideas for possible solutions.
Through our sketches, we came across solutions that we felt would improve usability, as well as accessibility. Some ideas included having the active page highlighted in blue on the navigation bar, making the "Edit Dashboard" button more visible on the Analytics page, moving the "Team" page to the "People" section, and adding more options for customizability in Email Reports.
Through our sketches, we came across solutions that we felt would improve usability, as well as accessibility. Some ideas included having the active page highlighted in blue on the navigation bar, making the "Edit Dashboard" button more visible on the Analytics page, moving the "Team" page to the "People" section, and adding more options for customizability in Email Reports.
User Flow
Once we had some ideas down on paper, we jumped back and thought about how the user would move through the platform with our solutions implemented, which we felt would make the platform much more user friendly.
Low-Fidelity Wireframes
Now that we had an idea of how users would navigate the features we were looking at, we jumped into creating lo-fi wireframes.
High-Fidelity Screens and Usability Testing
When we were all happy with our wireframes, we started adding some skin to the bones of the wireframe. Using the existing website as a guide, we added colour and icons, created new assests such as alternate button states, and modified existing elements like backgrounds to add more consistency.
We brought our screens into Adobe XD to create a quick prototype to start testing with our users. Right away we noticed an improvement in the usability of our features, with users getting through tasks much more quickly than our inital test. But there were still some modifications to be made; users found some of the text too small or not legible enough in a few form fields and buttons. We also fixed some minor alignment and screen size inconsistencies discovered during testing.
With our changes made, we retooled our prototype and tested again. It was a complete success; while in our initial test of the existing site some users were unable to complete most of individual task when given 2 minutes per task to do so, on our final prototype all of our users were able to complete all the tasks combined within about 2 minutes.
With our changes made, we retooled our prototype and tested again. It was a complete success; while in our initial test of the existing site some users were unable to complete most of individual task when given 2 minutes per task to do so, on our final prototype all of our users were able to complete all the tasks combined within about 2 minutes.
Final Prototype
Customizing the Analytics Dashboard:
- Minimizing and Maximizing Widgets
- Removing a Widget
- Adding a Widget
Adding a Team Member:
- Add Team Member Activated
- Information Entry
- Confirmation
Customizing Email Preferences:
- Choosing Email Information Options
- Saving Changes
Navigation:
- Collapsing and Expanding Navigation Menus
Final Thoughts
This project was a real challenge, but in the end, I'm really happy with what we came up with. There were lots of challenges to face along the course of the 2 weeks we spent working on GoSquared. Scope creep was real, and there were lots of things we wished we could have included, but they'll have to wait for another time. We were also three designers working on three different aspects of a problem with three different softwares; two of us using Sketch, one using Figma, and the prototyping done in XD. But we made it work, and were validated by the response we got on the final round of testing. We also had to sign up for a bunch of free trials to properly look at our competitive analysis, and will probably be getting emails from Kissmetrics and MixPanel until the end of time.
We actually reached out to the team at GoSquared, despite this only being a case study for a bootcamp course. They were impressed by what we'd built around their product, and talked us through why they had made some of the choices they had regarding the design and the difficulty around implementing some of the changes we came up with, but also about features they're currently rolling out that mirror our findings.
Other Recent Projects:
My Crazy Little BProduct Design, Graphic Design
PricemateProduct Design
Watch With Friends on the Netflix Mobile AppA Case Study
