Project Overview
When I started at BBTV, I noticed that the UI/UX of our congregate site was lacking some of the substance of a basic eCommerce platform. My manager and I agreed that it would need to be done and I volunteered to take on the task.
Tools
Shopify, Liquid, HTML, CSS, AdobeXD, Google Analytics, Google Merchant, Asana
Tags
Business Strategy, eCommerce, Product Management, Web Development, SEO, Google Merchant, Google Analytics
Timeline
Main Implementation: approximately 4 months (+ ongoing improvements)
INTRODUCTION
Project Context
Upon first joining the team, pain points and potiential revenue loss surrounding our eCommerce platform at the time were a major point of contention
I ambitiously decided that as part of my 30-60-90, I would re-evaluate our platform and deliver an outline to improve. As I developed the skillset, I ended up doing the implementation myself as well.
My focus was on improving traffic and sessions, increasing time spent on the site, and decreasing bounce rates while scaling the UI/UX to meet our standards.
A STARTING POINT
Discovering Product Improvements
To find out where I could make improvements in our main eCommerce website, I started with scheduling a whiteboard session to get out all the pain points. I led the session with the eCommerce team to discover all front end and back end pain points, grouping them into categories as we went. I primed the groups with areas of improvement I saw to start, and then let ideas snowball and bounce as we chatted through. Once we created an exhaustive list, I went through each item in each category and labelled with MoSCoW prioritization (MSCW). We were able to leave that meeting feeling productive and excited about the future of the site.
Creating a Plan
This was my first time planning a major project in this role (less than 90 days after I started), so I got to work. Applying timelines, revising based on our goals and alignment, distributing tasks based on how much I could implement myself, versus requiring other internal teams like UI/UX or R&D to assist on and allocating the resources appropriately to align with other initiatives and other workloads.
Luckily as a front-end web developer, I was able to implement most of the features myself and the size of the build was substantial considering I had to complete other team initiatives simultaneously with this rebrand. In an effort to stay on top of things, we initiated weekly one-on-ones with my manager to ensure I was on track.
Challenges
This project was composed of many details and challenges, but in this summary review I will focus on three major themes:
Customer Segments and Jobs-to-be-done Definition
Prior to the rebrand, the previous site was attempting to appeal to too many customer segments at once. As a result, it resonated with none of the customer segments and we needed to narrow the scope and vision to make a useful product.
Optimizations & Improvements UI/UX
Because of the clouded customer segment vision, the branding was lacking a unified UX. As we dove into the data, I found more areas of opportunity to improve functionality and the overall look and feel.
Google Analytics & Google Merchant - Partial Configuration
The implementaiton of Google Analytics and Google Merchant were minimal and our data showed many areas of opportunity to improve bounce rates and session time.
TARGETING IMPROVEMENTS
Customer Segment Distinctions
Our original site serviced a broad audience and that challenge stayed consistent with the rebrand. I wanted to ensure that before I made UI/UX changes, that I understood all audiences so changes implemented were targeted and purposeful to our prioritized customer segments.
I pulled data on our current customers and on the audiences of the highest performing creators to create a more holistic view of who was looking at our site and what they were doing. I summarized the data into particular personas, and built out their functional, social and emotional jobs-to-be-done.
Note: I removed all contents for privacy and added explanations per portion for clarity.
Implementing Quick Wins - UI/UX
Once we established who we wanted to service and what priorities this customer segment had, we needed to determine how to best translate those needs into visible improvements to the site to enhance the overall experience.
I bucketed the pain points and potential solutions into quick wins and projects that required more development or UX work.
From feedback from the eCommerce team and internal UI/UX, I analyzed the potiential solutions and extracted the most common themes they were trying to solve for. Then, I prioritized the themes based on impact, time, and risk.
Post prioritization of themes, I mocked up solutions that required some custom coding elements that made the biggest impact with the lowest risk that I could implement relatively quickly. Upon approval and revisions, I took on the custom coding of the add on elements in Shopify.
Finding Opportunities in the Data
Although this was not originally listed in our priorities and pain points brainstorm, I found some gaps in our current implementation of Google Analytics and Google Merchant that could vastly increase our performance KPIs.
I cleaned up the labelling, dashboard and views in Google Analytics. I identified some metrics that could be improved and integrated UI changes to improve those like navigation redundancies, higher priority CTAs, merchandising prioritization, SEO optimization and site speed improvements.
FINAL WORDS
Learnings
Although not discussed much in this summary, this project involved a lot of reprioritization of my own time because I was not only doing vision development and improvements, but also doing a majority of the custom development and implementation, UI/UX, metrics tracking etc., for the project. It was a big task to take on and in my previous experiences I knew I needed to set deadlines to ensure I was checking in with stakeholders regularly and also ensure realistic time expectations for the completion of tasks.
Finding improvement in products is extremely enjoyable. I love the challenge and there are always gaps and improvements — even in my favourite applications! That being said, resource allocation and reprioritization is the artform that needs to be perfected when tackling them.
Thanks for Reading 💛
If you’d like to hear more about my experience, feel free to send me an email–I’d love to chat ☕.
My Other Projects
If you'd like to see more, check out my other projects below!
