Improving the user experience for HubShop.ly
Overview: Groove Commerce is a Baltimore based full-service company that offers e-commerce, lead generation, web design, development, and marketing services.
Methods used: UX Audit, Competitive analysis, Heuristic evaluation
Tools used: Figma
Team: Airy, Apoorva, Shubhi
My Role: I worked as a UX Designer, from Sep 2019 - Mar 2020. In the due course of time, I worked extensively with fellow designers and team leads to ideate, prototype and present high fidelity interface designs. I collaborated cross-functionally with marketing and development teams to check the feasibility and implement designs.
This case study is a reflection of my learning and exploration during this period. Please contact me if you wish to learn about the final designs and its iterations. Thank you for your cooperation and understanding :)
What is Hubshop.ly?
Its an inbound marketing plugin for eCommerce platforms like BigCommerce, Magento and Shopify. It syncs the cookie data with customer's eCommerce order data, which then can be used to create personalized emails and increase average customer lifetime value. These automated emails include: Welcome series, Abandoned cart recovery, Post purchase follow-up, and Product review requests.
Design Process
Our design process was fairly straightforward, aligning with Scrum framework. We meet once a week to brainstorm, discuss any problems or concerns, meet developers and senior designers to get feedback, and plan our tasks. I joined the team after the initial research had already begun, my contribution started with drawing design mandates from research, designing prototypes and presenting them.
Understanding the problem space
We directly heard from the CEO and the Creative Director about the problem statement which was focusing on improving the experience of HubShop.ly. We conducted market search to understand about the market, kind of apps users prefer, and what is expected of the product.
Market Research
We considered top rated plugins from BigCommerce, Shopify and Magento. Research criteria included studying their positive and negative aspects, identifying unique features, analyzing information architecture, and evaluating user stories.
Takeaways:
“About the app” section is important, it should be short to prevent the reader from skipping past it.
Filter the content and add bullet points to highlight
Highlight key features using visuals of dashborad
Include customer reviews, ratings, use case studies
Include demo video along with gallery
Clear CTA
Evaluating the existing interface
Market research gave us an overview about the type of plugins that are popular on platforms HubShop.ly is integrated. To understand UX perspective in detail, we conducted Competitive Analysis and UX Audit. Competitive Analysis was carried out to compare the interface of top 3 inbound marketing tools- Klaviyo, Justuno, and Privy. During UX Audit, we considered user and business goals, Nielsen’s heuristics, best UX practices and recommendations.
UX Audit
Criteria
The overall style
Unclear visual hierarchy, Crowded Content
Hero Banner
Distracting background
Product promotion
Numbers and good reviews are displayed but are not easy to find
Customer service
support articles not specific to problem area, installation video is broken
Recommendations
Create a better visual guideline in terms of typeface, color scheme, white space, and margin
If applicable, motion design can also be considered
Create a eye popup Hero Banner with benefit driven language.
Powerful yet simple CTA for free trial.
Better Storytelling: what is the app about , what the app does, what the app offers and how can this be helpful for users.
Explain more about the unique strengths of HubShop.ly that can’t be found anywhere else (e.g. add a “why HubShop.ly” section)
Better pricing representation
Fix the installation video
Use chatbot to provide prompt help for users
Provide FAQs of common questions
Design solutions
After getting a clear picture of the existing interface and pointers for re-design, we sketched our initial ideas. We used Figma because it supports easy collaboration and is versatile in terms of wire-framing and prototyping. It took 6 iterations to get the final high fidelity prototype. Below is the breakdown and our progress with each iteration:
1st iteration: wire frames sketches incorporating all the features and recommendations
2nd iteration: incorporating feedback from senior designer - aligning elements, rounding sharp edges, creating visual hierarchy
3rd iteration: exploring motion design to depict variation in numbers (eg: number of contacts, number of orders, etc)
4th iteration: incorporating feedback from developers - unable implement motion design, exploring various graph styles
5th iteration: adding color scheme, icons, logos,
6th iteration: final design touch-ups, and green signal from developers, senior designers and co-founder!
Please contact me to learn about the final designs and its iterations. Thank you for your cooperation and understanding :)
Learnings
Got Certified!
It took me 7 lessons, 34 videos and 15 quizzes to complete this course on Growth-Driven Design (GDD), where I learnt how to build and optimize a peak-performing website that delivers user value and drives business growth. I also learnt about agile web design and project management.
Let the ideas flow. Don’t be afraid to experiment with new style.
Along with redesigning HubShop.ly, I also had an opportunity to work closely with Danielle (Graphic Designer) to re-design product catalog page for one the clients. One of my biggest takeaway is that I realized that my re-design ideas were similar and following a particular aesthetic. She encouraged me to explore more variations in style by considering factors like the overall experience the product is trying to convey, what do their target audience look like, will the new design lose its original personality, or enhance it?. These were some great pointers to keep in mind while re-designing any product in future.
When working in teams, identify the strengths of co-workers and distribute the work accordingly.
While presenting the design, make sure to instill ‘trust’.
I learnt this from Bethany’s (Strategy Team Lead) feedback after the final presentation. She was impressed with the way I presented the designs by explaining background research, when necessary, and justifying the design decisions. She said by doing this a feeling of ‘trust’ is built with the client which is very important!