OVERVIEW
Summary
I have been thinking about what a refreshed homepage would look like on our site on and off throughout most of my time as the UI/UX Designer here at ElleVet Sciences. From a development and design resource standpoint, though it had not been a viable project to take on until the beginning of 2025. When my manager let me know that he’d like me to organize, lead, and execute this project from start to finish I got excited for a few different reasons. The first, is that it was a vote of confidence from my manager, which as a still relatively new UX Designer further solidifes that I made the right career move. Second, it was a great opportunity for me to prove that I have the skills to manage a large scale, high visibility project to other people in the company that might not have had a lot of time working closely with me. And finally, this was exactly the right moment to try and implement a Scrum Sprint framework to our project operations, something that we had not tried here at ElleVet before.
After a few design iterations, we quickly renamed this project from a “Refresh” to a “Redesign” considering the amount of developmental and visual change that was coming with it. In the end, I led our small cross-functional team through a successful Scrum Sprint to implement a homepage that we all feel proud of.
My Roles
Scrum Master/Project Manager
Lead Technical UX Designer
Tools Used
Figma (Design)
Monday.com (Task Management)
WooCommerce (Implementation)
What am I working with?
I think the above gif shows really well why I felt like this project was important in the first place: as a customer, you are instantly bombarded with a large-scale product feed that spans a majority of the length of the page. I knew that as the company continued to grow this product feed would become more and more cumbersome to deal with, expanding to lengths that most of our customers would never scroll past. Most of our customers already don't scroll past the first fold and get right into the shopping flow, as indicated by scroll heatmap data. On top of that, there is a very clinical feel to the imagery and the organization. At one point in time, that was the feeling that ElleVet wanted to convey, but as the eCommerce landscape has changed over the years and our brand image has grown and matured this page feels stuck in the past.
Once you get past that product feed you are met with some information and images that feel sort of pasted in one after the other with no thought to them. In some cases, there is even repeated content stacked right on top of each other. It was time to be more intentional and make a homepage that makes people actually want to scroll and discover more.
Early Redesign Stages
A few mockup iterations for homepage refresh ideas
As I said in the summary, refreshing the homepage was something on my mind (and many other coworkers') for quite some time. Throughout the months, if I had a free moment I started drafting some ideas for a new homepage. Some were based off just my observations, some pulled inspiration from competitors or other eCommerce sites, and some ideas from other team members.
Once I started having some pretty presentable ideas, I started teasing the idea of a refresh and showing off my initial mockups with people around the office. After a few months of this, the Marketing team started picking the project up, and the Development backlog was getting into a spot where we felt like the refresh would finally be possible to do. The Marketing team did extensive competitive research and aligned on a structure outline for what everyone was envisioning for a new homepage.
While this outline would get changed, and the designs iterated on many times, these building blocks were all a very important foundation for this project.
Assembling the Team
The time finally came where this large scale project got put into motion. My manager knew that this was something I had already put a lot of thought into, so he told me that he wanted me to organize and lead the project from start to finish. This was a perfect time for me to push my own boundaries of experience with both UX design and project management. Larger projects at ElleVet in the past typically were operated in similar fashions; There's a kickoff sync and then each team sort of operates independently for the most part until (hopefully) all the pieces align and fit into a viable product. For a page as important as the homepage, and for my first time managing the success of a project, I didn't feel like this process would suffice.
I half jokingly brought up to one of our Graphic Designers that I wish we could just get in a room with a Developer, Graphic Designer, Copy Writer, and myself and drop everything else for a week to focus on this project. Her response was something along the lines of "I mean it'll probably take more than a week, but why not just run a sprint?" So I set out to learn everything I could about how to be Scrum Sprint Master in a short period of time.
First step: identify the key stakeholders and team members.
Stakeholders: Shaun (Sr. Director, Software Development & IT) and Katie (Sr. Director, Marketing)
Product Owner / Scrum Master: Jedd (Me, UI/UX Designer)
Team Members:
Development: Adam (Associate Software Developer)
Graphic Design: Jillian (Sr. Digital Designer)
Communications/Copy: Katrina (Director, Brand Marketing)
How do I keep us on track?
We use Monday.com for all of our basic project management/developer backlog ticketing system. I started creating a new board for this homepage redesign right away. I started off by creating a project charter to define the objective, timeline, scope, and success criteria for the team.
Next, I started filling in a high-level overview of backlog tickets that would need to get done in order to fulfill those objectives.
This definitely started feeling overwhelming starting from scratch. How in depth should these tickets be? Should I make them broad and subticket them, or should I make each ticket more specific? Even as I tried to research the best approach online I got conflicting answers. This is when I really started pulling on the resources available to me right in the office: Asking coworkers who have Scrum Sprint experience for recommendations! This was an invaluable source of information to help me successfully run this project to the finish line.
I also found that planning the start of a project was a great use case for ChatGPT, because we all know by now that there are plenty of times where it is overkill or unnecessary. Since I had all the bullet points for the project, I used ChatGPT to help me create a shareable document summarizing those bullet points into something more cohesive. Also, whenever I wasn't sure what else I needed to include for my team I prompted ChatGPT to ask me questions to help fill in any blanks.
After an official kickoff and a few sync up meetings with the team, we were off and running. I don't want to go into too much detail about all of the admin stuff, but we agreed upon a sprint increment of two weeks, assigned tasks to the relevant parties, and defined the language around any new sections/modules we were planning on adding.
What is the new look of ElleVet Sciences?
The main goal of this project was to modernize the homepage to improve the product discovery and user experience as a whole. Refreshing the homepage would also enhance the scalability of our site in the future; our graphics would be closer to our packaging for brand recognition, new modules built for the refresh would be usable for more frequent homepage updates as well as on other landing pages on the site.
Our graphic designer, Jillian, took on the first critical step of finalizing the wireframe of the homepage. While it might seem like this is more a job for the UI/UX Designer (me), I was happy to have someone take this on while I focused on this new world of project management. I was busy planning daily check-ins, sprint reviews, retrospectives, along with assisting Jillian whenever I could with the wireframe.
This was pretty exciting, because up to this point I had mostly worked in Figma alone, drafting wireframes, presenting them to developers, and then moving on. Being able to collaborate in real time on these wireframes was new to me, and really let me start using UX language in practice with a fellow UX designer. Did I mention Jillian was a UX Designer in a previous job, as well as a Scrum Master at some point? I know that portfolio case studies are supposed to be all about me, but the guidance she provided me on this project was seriously so helpful and appreciated.
After many rounds of iteration, sprint standups, and approvals from stakeholders we had a high fidelity working wireframe. Throughout this process each team member had tasks broken up into incremental chunks. While the team had a few various set backs throughout the process, we managed to design, prototype, develop, and implement this new homepage down to the last pixel.
The new ElleVet Sciences Homepage
The new and improved homepage is now live and can be seen on ellevetsciences.com. I am extremely pleased with how this homepage update turned out. Visually it looks much more modern, warmer, more personal, and has intriguing elements like scrolling marquees and hover effects. The user experience is cleaner and flows intuitively between informational and guided shopping flows. This page implementation addressed many of the issues that I discussed earlier:
1. Product Feed with far scroll distance ---> Removed the product feed and transitioned to categorized focused shopping navigation points
2. Imagery and information is clinical and impersonal ---> Warmer, more personal imagery and copy incorporated
3. Extra information sort of slapped on to bottom of page ---> Intentional, meaningful, and focused content ordering to help guide users
This project was a great opportunity for me to practice new skills in project management and introduce a more formal sprint structure to the company. There was a great reception by the rest of the company since everyone saw how smooth the project went and how organized and effective even a small team of four could be. From my own personal insights as well as from the team's feedback in our retrospective meetings I learned a lot about how I could continue to improve the sprint structure in future projects. I hope that this inspires other people in the company and I can't wait to see what other sprint projects that come out of this.
