Innovative web page design solutions
Fostering stronger connections between businesses and consumers through impactful, relevant content.
The client
Ollie is a direct-to-consumer company specializing in personalized subscriptions for fresh dog food. Their commitment centers on using human-grade ingredients and highlighting the positive impact of fresh nutrition for dogs. Ollie’s mission is to deliver optimal dietary health for pups while empowering owners with knowledge to better care for their furry family members.
The project
The company transitioned to a CMS platform, enabling rapid web page creation without heavy reliance on the engineering team. This initiative accelerated new page launches and improved SEO performance within a condensed timeline. The project involved designing and building 12 web pages, maximizing the use of existing components while creating new ones to support future site expansion.
Role: Product Designer
Collaborators: Product Manager, SEO Manager, and Engineering Team
Tools: Figma
Defining the needs
I collaborated with the Product Manager and SEO Manager to identify the key content and pages needed to help the business reach consumers who are searching for fresh dog food.
We identified five main pages that I need to design and build. The focus of each page was determined by comparing our competitors' sites and analyzing data collected by the marketing team. Two of the five main pages will follow the same format to ensure consistency between them.
Fresh food
Recipes (1 for Beef, Chicken, Turkey, and Lamb)
Reviews
Learning resources
Best dog food (1 for each of the 5 breeds selected)
Because the existing component library was limited, new components were required to meet stakeholder objectives. Nine key components were identified and developed to address the project’s needs and ensure successful delivery.
Breadcrumb
Heading + paragraph
Recipe card
Image + button link
Blog links
Testimonial highlight
Key features
Customer reviews
FAQ
Ideating
I explored and designed several concepts for the pages and components, focusing on flexible layouts and usability. Anticipating that content would be added later in the CMS, I presented the designs as wireframes to clearly define the placement of copy and images.
Components and multiple iterations (Wireframed)
Finalizing
I collaborated with the product manager to finalize which components would be most effective for the project. We selected certain components over others based on their visual impact, which we believed would encourage users to engage more with the webpage. Research indicated that users tended to stay longer when presented with larger text and images. Additionally, we considered the ease of adding content to the components without needing to readjust the layout, as this had been a recurring issue with existing components.
To stay aligned with the project scope, we reused some component designs for other requests since they shared a similar format. This approach would reduce the time the engineering team would need to build them. My only request was the flexibility to add and remove elements, allowing the components to be used in versatile ways in the future.
Once we finalized the designs, I delivered the components to the engineering team for integration into the CMS.
The result
After testing and integrating the components into the CMS library, I developed the pages outlined in the project scope and created assets that effectively represented the content while adhering to the company's branding guidelines. As a result, Ollie now has pages that support SEO objectives and enable enhanced functionality and content creation, significantly improving the user experience for those learning about fresh dog food.
Pages for
Best dog food by breed
Pages for
Fresh dog food recipes
Pages for
All fresh food recipes
Learning resources
Reviews
Reflection
While I was building the pages and incorporating the copywriter's copy, I noticed some missed opportunities to improve the design of the components and to highlight key points. The copywriter was not involved until the components were integrated into the CMS, so it would be helpful to include them in stakeholder meetings. This would allow us to identify opportunities for versatility in the components.
Next steps
It's essential to iterate in order to enhance task flows. My next steps will involve gathering data on my designs to pinpoint user pain points and identify areas for improvement. With each iteration and testing phase, I will gain new insights and face new challenges, confirm my assumptions, and validate my research.
