Annie came to me with a homepage wireframe and a clear vision: a website that could grow alongside her content and guide visitors seamlessly toward her blog, YouTube channel, and curated resources. I transformed her initial concept into a fully realized, content-focused website that serves her business goals and empowers her to manage it independently.
Solo UX/UI Designer & Front-End Developer
6 Weeks
Figma, Shopify
Annie came to me with a single wireframe and a clear vision for her next chapter: to build a home for her travel community. The challenge was architecting a site beautiful enough to represent her brand and simple enough for her to run solo.
My goal was to design and develop a fully responsive website that serves as a central hub for Annie's brand. By leveraging user-centered design and custom development, I aimed to:
• Integrate Annie's YouTube content and long-form blog content
• Develop intuitive pathways to her curated resources and affiliated links
• Build a custom CMS and design system that allows Annie to manage and grow her site independently, without touching code
Before diving into the design in Shopify, I first analyzed Annie's existing content and audience engagement patterns. My goal was to move past her one-page concept and architect a 7-page digital ecosystem designed for conversion, community, and long-term scalability.
Strategic Discovery
• Identified key value propositions for her audience and streamlined the navigation to reduce user friction
• Mapped touchpoints for affiliate links, Amazon shop, and digital products to ensure the site served as a business engine
• Expanded the initial homepage wireframe into a comprehensive sitemap
• Defined a clear architectural breakdown that guides visitors from high-level discovery to specific conversion points
Blueprint: This sitemap provides a clear architectural breakdown, detailing the user journey from high-level navigation down to specific page sections and external conversion points.
Wireframing the Experience
I expanded the initial homepage concept into a cohesive 7-page system. By wireframing the full journey, I was able to test the information hierarchy for:
• Content Hubs: Dedicated environments for the blog, trips, and resources
• Dynamic Detail Pages: Flexible templates for individual blog posts and trip itineraries that prioritize readability and user engagement
Transitioning from a single wireframe to a comprehensive 7-page system allowed me to define a clear architectural breakdown that guides visitors from discovery to action.
To ensure the site could scale without ongoing developer support, I engineered a custom backend using Shopify's metaobjects. This turned the complexity of the site into a plug-and-play tool-kit for Annie.
• Built a dynamic content management system to publish new blogs and trips in minutes, zero code required
• Leveraged metaobjects to manage "global" content, allowing updates to images, text, or links in one place to reflect sitewide
• Developed templates that maintain brand consistency regardless of the content uploaded
• Provided Annie with the independence to update her site without fear of breaking the design
By leveraging Shopify Metaobjects, I created a custom interface that allows for rapid content updates while maintaining design system standards.
While Annie provided her core branding assets, my role was to evolve them into a high-functioning digital design system. I focused on bridging her personal aesthetic with the technical rigor required for a modern, inclusive web experience.
• Audited and refined the brand palette, adjusting color contrast ratios to meet WCAG 2.1 standards to ensure it remains legible and inclusive for a global audience
• Established consistent typography and spacing across all seven pages to guide users' eyes toward high-value content.
• With my background in photography, I thoughtfully curated and integrated Annie's brand imagery. Ensuring that every visual serves a purpose to either deepen the narrative of a trip or provide social proof for a resource
• By applying the logo, palette, and custom UI elements across the entire ecosystem, I created a unified "home base" that feels as professional as it does personal.
Final UI for the dynamic blog feed, showcasing a clean typographic hierarchy and balanced grid system.
The final website provided a fully realized, visually cohesive representation of Annie’s personal brand, bridging the gap between artistic storytelling and strategic business growth. By streamlining the information architecture, I created an intuitive ecosystem that guides visitors effortlessly toward her blog, YouTube channel, and curated travel resources.
Key Outcome
The outcome is a future-proof digital home built with custom Shopify architecture that balances high-end storytelling with a modular, developer-grade backend. By prioritizing responsive layouts and accessible navigation, I delivered a tailored experience that scales seamlessly with the client's growing community.
A live look at the fully integrated, mobile-responsive platform designed for community engagement and content scalability.
View the Live Website:
Check it out here
By prioritizing systems over pages, this project successfully transitioned a content creator from a fragmented digital presence to a unified, professional home base. The result is a 7-page digital ecosystem that Annie can manage entirely on her own. By bridging the gap between artistic storytelling and technical rigor, the new platform achieves her core goals of driving conversion, fostering community, and ensuring long-term scalability as her brand evolves.
"Jocelyn did an amazing job of understanding the functions I wanted in a website, and in selecting a hosting platform that had all the functionality I needed. I'm excited to see my business grow now that it has a brand new, functional home on the web!"
Annie T.
Average Girl Does Cool Things
Working with Annie as my first professional client was a huge milestone, but it also taught me that a design is only as good as the person's ability to use it. I spent weeks building a custom backend that I thought was "easy," but watching Annie struggle with simple things like image sizing was a wake-up call.
My job doesn't end when I hit "publish," it ends when my client feels confident.
I've learned to have much more honest conversations upfront about how much time a client actually wants to spend managing their site. It's okay to choose the simpler path if it means the client will actually use it.
I also learned a lot about the "messy middle" of the project. Even with the best intentions, emails get lost, and life gets in the way. It was sometimes hard to keep things moving when feedback was slow, and that's on me to manage. To mitigate this, I'm tightening up how I structure my check-ins. Instead of just waiting for an email, I'm setting clearer "due dates" for feedback and finding better ways to follow up so we stay on track without it feeling like a chore for the client.
At the end of the day, seeing Annie's brand finally have a home that looks as professional as she is made all the hurdles worth it. It's made me consider offering an ongoing support retainer for clients who want to focus on creating content while I handle the technical backbone.
Connect with Me
