Web & Mobile

Petbrosia E-Commerce

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.

100K+ visitors per month
$5M+ VC investment
10K+ paid subscribers
5 founding employees
100K+ visitors per month
10K+ paid subscribers
$5M+ VC investment
5 founding employees
100K+ visitors per month
$5M+ VC investment
10K+ paid subscribers
5 founding employees

The challenge

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.

My role

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.

Chapter One

Think

Analytics review

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.

User testing

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.

The Rainbow Spreadsheet

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.

Gathering inspiration

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.

Competitive analysis

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.

UX audit

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.

Multiple Platforms

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.

Chapter two

Make

Sketches

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.

Wireframes

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.

Mockups

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.

Code development

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.

Chapter three

Check

KPI performance

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.

Heat mapping

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.

Continued 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.

Chapter four

Final Designs

Up next