Frutitas Website
- UX Research
- UI Design
- Project Management
- Information Architecture
New retail brand of fruit-infused water looking to build a new website to establish web presence.
Organization: Frutitas / BlueTriton Brands
Industry: Retail, Consumer Goods
Role: UX Engineer, UI Designer
Tools: Figma, Photoshop, Drupal, Monday
Year: 2023
A Little Content
Project Background
Frutitas is a new, developing brand in the portfolio of BlueTriton Brands (soon to be Primo Brands). Frutitas was looking to establish their web presence by have a landing page designed and developed showcasing their product line, values, and showing where consumers can purchase the products.
Setting the Stage
Discovery
I began the project by reviewing the content the brand already had which included a brand book and product photography. The brand book outlined the branding, tone, typography, colors, some graphic elements, and personas which fed into the next phase.
Additionally, the brand provided a creative brief with requirements for the new website. I used the requirements outlined in the brief, paired with my recommendations, to plan out steps using the organization’s project management tool, Monday. I brainstormed ideas, itemized needs, briefed the SEO team and copywriters to start the conversation on content development, and developed a timeline based on the brand’s desired launch date, factoring in the teams’ bandwidth.
View Discovery Work
Defining the Flow + Structure
User Experience
Using the creative brief, I began the UX phase by creating a visual sitemap, allowing me to visually layout out each required page, their connections to each other with a high-level content outline beneath each page. This served as a useful reference for the brand, SEO, copywriting, and creative teams.
With the personas, typography, colors, graphic elements already defined in the brand-provided brand book, my next step was to create a wireframe to outline the more detailed structure for each page. Using Figma, I laid out the pages and sections to confirm all needs were captured from the brand’s perspective before starting on the design. This also helped with the planning identify content needs for creation.
View UX Design
Layering the Visuals
User Interface Design
My next step was to translate the elements from the brand-provided brand book into a web style guide. I tested color combinations to ensure they met ADA AA level standards for web accessibility, defined how to pair colors, along with component-based styling.
With the style guide complete, I set up the design file in Figma with typography, color, and effect styles for consistency, easy reuse, and efficient maintenance.
From there, using graphic elements, lifestyle and product photography, I layered the visual design on the structure from the wireframes. Using components, variants, auto layout, and saved styles, I designed the pages responsively with reusable elements. Additionally, I made it an interactive prototype to show the desired interactions to all teams.
View UI Design
The Build
Development
Upon design completion, review and approval, I handed off a Figma file with digital assets, along with a walkthrough for development. The development was completed by a third-party team, built using Drupal.
View Live Site