I managed the UX for Petbrosia, a rapidly growing eCommerce startup company which offers the first pet food that is customized to the unique nutritional needs of pets. The product is delivered to consumers doors and each unique blend is dynamically updated over time to ensure optimal nutritional benefits for the pet.
Petbrosia’s website had become a bit of a “Frankenstein”. Outdated information, an offensively bright color palette, overcrowded designs, a complex taxonomy, and a clouded user flow were all contributing to major usability issues. Moreover, I needed to design within a strict set of constraints, in order to accommodate multiple custom functionalities and limited developer resources.
As the sole designer responsible for this project, I both led it and corresponded with our development agency while building out the designs. I conducted multiple rounds of research. I produced sketches, wireframes, and mockups. I delivered final assets and documents, supervised development, verified the live product, and iterated again for multiple rounds.
Because Petbrosia had already been operating for around a year and a half, we were able to perform a historical data analysis on the existing site. User behavior immediately indicated that there were major experience issues to be found throughout the site and its product funnel, thus beginning an iterative redesign to the site itself.
Behavioral data collected by Google Analytics showed how users were interacting with the site and where they were dropping off.
After reviewing the quantitative data, we began to seek out qualitative data that could supplement the information that we already had, as well as identify early issues in the site that could be corrected within the first couple iterations. Testing was conducted with existing customers and users that had never interacted with the brand before.
This particular round of user testing was moderated. A tab recorder and a webcam recorder were utilized simultaneously.
In order to collect the qualitative data and visualize it in a quantitative format, we utilized a Rainbow Spreadsheet, which lists common occurrences in the user testing session and accounts for how many users experienced each event.
Now that we had background data on our site, we began canvassing the industry using sites like SubscriptionBoxes.com and My Subscription Addiction, as well as a list of direct competitors. The ultimate goal was to scope out the subscription box market, get inspired, and find opportunities for innovation on our part.
BarkBox and Blue Apron proved to be major influences for their simplicity in design, messaging, and imagery.
We performed a light competitive analysis and used it to gauge which elements our competition was prioritizing in comparison to us. It turned out that we actually had a lot of the core features our competition had. However, there was still a massive opportunity to be had in the design and development of those items and functionalities.
Our design had the core components that it needed, but the execution was sub-par compared to our competition.
Despite the fact that the Petbrosia site possessed many of the core functionalities that its competition had, it still wasn’t performing to its full potential. So we set our sights on opportunities contained within the execution of the design itself. Major usability issues, including uneditable and disappearing content, surfaced very quickly.
The product funnel was especially plagued by usability issues, one of which involved content that would collapse unexpectedly.
Petbrosia’s product funnel was built on Magento and utilized proprietary food blend algorithms that produced a unique food blend for each pet. This special functionality required the product funnel to live on Magento, while legacy code required the remainder of the site to live on WordPress. This created unique design and development constraints.
Rapid sketch iterations were used for directional discussions. We took feedback from our multiple different departments, and although one department’s interests would sometimes conflict with another department’s, we were able to begin closing in on a design. The sketches were then placed in front of users (current customers, friends, even strangers) to see what their feedback was.
Using custom horizontal and vertical graphing templates, we were able to quickly produce uniform sketches.
With tight time constraints, we focused exclusively on wireframing high impact pages and specific modules whose functionality needed to be laid out for our developers. This provided enough of a direction for us to communicate the design to the necessary stakeholders and still hit our deadline.
Low fidelity wireframes were used to communicate content hierarchy and critical functionalities for development.
Once we had a solid design direction, we began to produce high & low fidelity mockups, which would then be converted into prototypes with limited functionalities. These were then used to perform iterative rounds of quantitative and qualitative user testing. While this was great because it gave the user a “polished” design, it also took a considerable amount of time to make changes (compared to rapid prototyping).
High fidelity mockups and prototypes were great for user testing, as they removed the ambiguity of the design.
As designs were finalized, we began to work with our developers (in-house and agency) to code them up and maintain quality in execution. A key part of this process was that we were coding designs as we were still finalizing others, so the Lean framework really came into play and saved us a lot of time. Major design elements were finalized first, like the header and footer, as they were universal.
Through utilizing the Lean framework, we developed code and finalized designs simultaneously.
We had set a list of key performance indicators at the beginning of the project, and it grew as the design and scope matured. Upon initial release, we began monitoring critical metrics, like event tracking and goal completion. This helped us understand where the design was performing and where it need some additional work in future iterations.
The Goal Flow report in Google Analytics was critical in helping us to understand how our product funnel was performing.
In order to understand how users were engaging with specific elements of the new design, we initiated regular heat mapping and scroll mapping. This information was paired with data collected from ongoing user testing. Whenever feedback overlapped, we'd use it to inform iterative design changes.
Heat maps and scroll maps were critical in identifying pain points for ongoing user testing and optimization.
By increasing internal utilization of tools like Google Analytics and implementing new tools like Mixpanel and Optimizely, we were able to create a culture of ongoing iteration, where live data and user feedback would continue to shape the site.
Brought in as the team’s first UX Designer, I established our process and led HubSpot.com through its first major redesign.
How our small team built one of the most-visited SaaS sites on the web, multiplying conversion and revenue in the process.
