Spryful - Designing a Nutritious Brand Experience From Scratch
Role
Lead Web-Designer
Original Color Pallet
The Hiya Kids Vitamin Site
The Final Spryful Designs
Final with Different Opacities
Shopify
6 Week Sprint
Platform
Time-Constraint
What’s Spryful?
Spryful is a startup on a mission to make breakfast better for kids. Spyrul strives to make nutritious, oat-based breakfast cups that are as fun to eat as they are good for you. Meeting with the stakeholder, for the first time, he had a vision and a colorful brand identity. What they needed was a digital home: a Shopify storefront that could carry that identity and connect with parents and children alike.
As the lead designer on a cross-functional team of six, with two marketers, two graphic designers, one developer, and myself, I was responsible for translating the brand style guide into a fully functional Shopify website, all within a six-week timeline.
The project kicked off with the graphic designers and marketers building a brand style guide through defining typography, logo usage, and a bold palette of nine vibrant colors. My job was to take that guide and bring it to life on the web. I started with wireframes to nail down site structure and user flow before committing to any visual direction. Once the layout was validated, I moved into Shopify and began building out the site's skeleton.
With structure in place, the real design challenge began: implementing a nine-color brand palette into a web experience without it feeling chaotic. I delivered five distinct color variations to the stakeholder to gather directional feedback early.
Midway through the project, the stakeholder shared a new design direction he envisioned for the site. Rather than treat this as a setback, I pivoted quickly, and adapted the color system to his new foundation and delivered six additional variations, each exploring different ways to balance the bold palette.
Rethinking the nine-color palette
The brand style guide included nine bold, really saturated colors, which is a lot. Web design generally calls for restraint, and figuring out how to use all of them without the site feeling overwhelming. This required significant trial and error but through persistent effort I was able to find the solution. The solution came through opacity: using softer tints at scale and brighter fills in small, intentional moments.
Adapting to a new design direction mid-sprint
Midway through the project, the stakeholder shared a new design direction he envisioned for the site. Rather than treat this as a setback it allowed me to apply the entire color strategy into a new foundation without losing the work already done and without missing the launch deadline.
Learning Shopify from scratch
I had never worked in Shopify's CMS before this project. Understanding its theming system, section architecture, and how design decisions had to be made within its constraints added a steep learning curve on top of an already ambitious timeline.
Bug tracking alongside design
Working closely with the developer, I helped maintain a live bug log throughout the build. Staying on top of functional issues while simultaneously iterating on visual decisions required constant context-switching and close collaboration.
In six weeks, a team of six went from brand guidelines and blank wireframes to a live Shopify storefront that genuinely felt like Spryful. The project pushed me to grow quickly and not just technically (Shopify's CMS, color system theory, bug logging) but professionally. Adapting mid-sprint, presenting design decisions with confidence, and collaborating under pressure all became real skills, not just talking points. Spryful showed me that good design lives at the intersection of design and communication.
Skills and Experience Gained:
Shopify
Cross Functional Collaboration
Bug Tracking
Rapid Iteration
Color Theory
Design Decision Communication
Comfort with Presenting
Key Takeaway:
Communication and team collaboration is invaluable especially when working under tight deadlines.
The breakthrough came from studying Hiya, a site the stakeholder pointed to as inspiration. I noticed that Hiya used lighter, lower-opacity tints of their bright brand colors as dominant background fills, while the saturated, punchy shades were reserved for smaller touchpoints, such as text, buttons, and accents. This kept things feeling energetic and kid-friendly without being overwhelming.
I applied that same principle to Spryful: using opacity-adjusted versions of the nine brand colors across larger sections, and preserving full-saturation colors for calls-to-action and highlights. The result struck the balance the brand needed, to be playful, but legible and polished. Below are the final designs of the site.
