Project Brief
Poetic collaborated with Moesle Meats to create a new brand for their holding company, Whetstone Distribution. Poetic's approach to this project was grounded in collaboration and thorough research. The Poetic team conducted discovery calls, facilitated workshops alongside the Whetstone team, and examined the competitive landscape within their industry.
My role was the UX Designer and Webflow Developer. I collaborated with a project manager, graphic designer, and Senior VP of Operations and Strategy at Poetic.
Give Whetstone Distribution a trusted and cohesive identity while preserving the core elements that define Moesle Meats within the industry.
Our deliverables were: a company website, the design of brand collateral to reflect the new look and feel, and the development of a brand guide and tone that align with the new brand and core values.
Project Overview
Below is an overview of the design phases of this project.
Competitive Analysis
Our team identified Harvest Sherwood and Wolverine Packing as Whetstone's main competitors. We created an affinity map to analyze each competitor. We identified what our team liked about these main competitors' websites. We then used our findings to identify themes and insights to bring into our UX design.
User Research
Based on our research findings, we created multiple user personas to reflect the primary audiences that Whetstone will reach with their new website. Future acquisition partners, platform employees, and future suppliers are the primary users identified.
Site Map
We created a site map to hone in on the users journey through the site and consider the information hierarchy of each page. We defined the sections required on each page, and identified the main goals of each page. The copy was written through a collaboration with the VP of Operations and Strategy and the design team.
Branding
We defined Whetstone's brand voice as trustworthy, welcoming, knowledgable, and reliable. With Whetstone, clients gain a cutting-edge advantage, elevating offerings with premium proteins that leave a lasting impression.
Wireframes
I used our in-depth strategy deck to wireframe the user journey of the site. I designed components that could be re-purposed thoughtfully throughout the site to ensure that the website feels cohesive and consistent. I aimed to create a sophisticated but minimal layout that aligns with the brand guide. All feedback on the site structure and copy was addressed during the wireframe stage.
Mockups
I used the brand guide to inform my visual design direction as I moved into high-fidelity mockups. I aimed for a polished UI design that relies heavily on brand elements such as custom iconography.
Webflow Development
I follow Finsweet client-first guidelines when developing in Webflow with the goal of a lightweight build that loads quickly. Once the basic site is built, I bring the website to life with interactions that will keep users engaged. View the live site here.
Key Takeaways
Having time allocated for in-depth competitive analysis and UX strategy made the UX design process flow smoothly with minor stakeholder feedback.
As much of the team was collaborating from different time zones, we tended to communicate asynchronously via Slack.
Utilizing tools such as Miro to brainstorm, and Figma's comment feature, helped our team quickly iterate without wasting time on endless emails.
While there was minimal instruction on the Webflow direction, I find that investing time into thoughtful motion design on each project results in greater client satisfaction.