How can brand design turn personal struggle into a story?
Small Steps Giant Sleeps was born from personal struggle, and Rebekah, the founder, wanted her story to inspire and motivate parents.
But nothing about the current brand shared her story or differentiated Small Steps from competitors.
*Note: images and content shared with client permission.
Product
Website
Timeframe
2 weeks
My role
Researcher, designer, web developer
Research methods
Competitive analysis
Tool:
Figma, Figjam, Webflow
The opportunity
The existing Small Steps Giant Sleeps might have been described as “sleepy”. There were limited assets, and the illustrations and style didn’t show much personality — particularly when compared to competitors:
objective
Design a unique brand and website that captures the story and personality of Small Steps Giant Sleeps.
business value
Beyond price, there is little a layperson can do to distinguish the value of different infant and child sleep consulting products or services. Having a unique brand can engage customers into a compelling story and differentiate the value of Small Steps Giant Sleeps.
The work
I was responsible for developing the brand story and visual identity, designing the website and marketing collateral, and building the website.
design goals
- Develop a brand visual identity that captures the personal of Small Steps Giant Sleeps.
- Tell a compelling story through the user experience.
- Differentiate the brand from competitors.
competitive analysis
A competitive analysis of ~10 competitor brands identified common visual themes in the industry. Key features were muted color palettes, cursive and serif fonts, simple shapes and rectangular or “boxy” layouts.
Additionally, the industry lacked inclusivity, with inaccessible color palettes, fonts, interfaces, and a lack of diversity in stock photos.
The competitive analysis suggested that the Small Steps Giant Sleeps brand could stand out through fun and excitement. Rather than leaning into “sleepy” visual themes, her brand personality can emphasize how fun and exciting parenting is — once the parent is sleeping.
Additionally, inclusivity aligned with the Small Steps Giant Sleeps mission and the founder’s involvement in local efforts to reduce maternal and infant mortality rates that disproportionately impacted families of color.
branding
Injecting fun and excitement into the brand while staying within the theme of infant and child sleep required a balance. Common industry colors were muted purples, greens, and reds. In order to inject excitement, I build a color palette that paired those muted colors with bold counterparts. Decorative, asymmetrical shapes tracing the muted colors with the bolder counterparts added fun and surprise to the design.
The moon and stars theme from the original logo transformed into a space travel theme, capturing the name of the brand (a play on the “One small step” quote) along with the themes of dreams, adventure, excitement, fun, and big accomplishments.
Stock imagery emphasized more diverse infants, and the typography guidelines emphasized a stronger color contrast, larger font size and more accessible font and line spacing.
information architecture design
Small Steps Giant Sleeps offers coaching services as well as educational products. The educational products could be either courses, or downloadable materials. A critical challenge was that the course materials lived on Teachable, creating significant challenges to designing the user workflows for purchasing and accessing content. A deep content audit of the course materials, pages, checkout workflows, and business service materials (e.g., terms and conditions) helped inform a simple information architecture fit within the constraints of the platforms used.
Website design and development
An early component / design system laid a foundation for a more agile brand. Visual elements were translated into components and patterns that could establish a visual hierarchy.
I collaborated closely with the founder on content design, ensuring I was adequately capturing her story, tone, and voice. Once the content was written and fit into a structure, I mapped the content hierarchy into the relevant components and patterns for a visual design that told the right story.
The outcomes
Customer reception on the site has been extremely positive, describing the site exactly as we’d hoped: fun. The site is extremely unique when compared to other sites, leaving a brand impact that stands out in potential customers’ minds.
Check out the Small Steps Giant Sleeps website.
key design decision 1
The brand should emphasize bold colors and asymmetrical shapes.
Reason:
Competitors universally use muted colors and simple shapes. Bolder colors and asymmetrical shapes can bring surprise and delight to the design while differentiating from competitors.
Impact:
The palette and shapes capture the fun and excitement in parenting while still aligning with the themes of infant and child sleep.
key design decision 2
Implement hand-drawn imagery of space objects, rocket ships, and astronaut helmets.
Reason:
This moves the story beyond the challenge — sleep — and into fun. It’s not just about getting sleep: what are your dreams for your family?
Impact:
Customer feedback specifically appreciated out the space theme and astronaut helmets, and the hand-drawn, overlayed style allows Small Steps to easily carry the brand into any other materials.
key design decision 3
Emphasize inclusivity in the visual and UI design.
Reason:
Competitors websites are largely inaccessible and lack diversity, and part of the Small Steps Giant Sleeps’ mission and vision are supporting marginalized communities disproportionately impacted by infant and maternal mortality.
Impact:
The website is far more accessible and inclusive than the industry, and includes content that outlines Small Steps’ mission. There are some known accessibility challenges, particularly with the Teachable platform, but I continue to collaborate with Small Steps to resolve issues as they’re discovered and as we’re capable (given skills and budget).
Reflections
This project was a storytelling sprint, from competitive analysis to launch. At the end of a week I was exhausted, but proud of the first completely custom website I had designed and developed myself.
Challenges
Being quite frank, I didn’t know the first thing about web development. Small Steps Giant Sleeps couldn’t afford a developer, and we were willing to learn together. It wasn’t easy, but I managed to pull a version 1 out in 3 days. After another week, I was able to release a much better version 2, and Small Steps has invited me back for additional work — and each time, I find opportunities to improve the backend code while preserving the design.
If I could do it again…
In the most ideal world, I’d love to collaborate with a strong developer. There were a few elements of my original design that I wasn’t able to achieve in WordPress. My knowledge of CSS allowed me to work around some theme limitations, but nothing beats working with a developer that’s solved the same probably a hundred times already.