Transformative Design for Whitefox Publishing

Crafting Aesthetic Narratives for Timeless Tales

My Role
User Experience Designer
Year
2023
Client
Whitefox via CuriousWays

Services

  • UX Audit of the current website
  • Competitive analysis
  • Vision board creation
  • User flow development
  • Component library
  • Wireframing High-Fidelity final design prototypes

Deliverables

  • Comprehensive UX Audit report
  • Detailed competitor analysis document
  • Inspirational vision board
  • Multiple conceptual designs
  • Streamlined user flows
  • Wireframes
  • Polished final design prototypes

Outcomes

With the new website launch, Whitefox experienced a 30% reduction in bounce rate, reflecting more engaging content. Impressively, there was also a 25% increase in inquiries through the contact form, signalling greater interest in publishing with Whitefox.

01/

Introduction.

Project overview

Whitefox is a small publishing company with roots in the UK and branches stretching to the USA, embarked on a digital transformation journey. They approached me for a 3-month mission: to reimagine their website into a reflection of their literary artistry. Working hand-in-glove with their lead developer and head of marketing, the mission was more than a redesign—it was a reinvention of their online presence.

Goal

The mandate was to weave a digital tapestry for Whitefox’s website that would captivate newcomers with its intuitive design and engage seasoned visitors with its storytelling prowess. The objective: a website that mirrors Whitefox’s transformative spirit, inviting trust and satisfaction at every click.

Key challenges

  • Content Overload: The content needed a storyteller’s touch to simplify dense text without losing meaning, enhancing the user journey.
  • Accessibility Gaps: t was crucial to ensure seamless navigation for all users, regardless of ability.
  • Responsive Design: Crafting an experience that flowed seamlessly across various devices was paramount.
  • Storytelling Balance: The challenge was to balance the art of storytelling with the clarity and functionality of the website’s design.
  • Value Proposition Clarity: Communicating Whitefox’s unique value proposition was key to connecting with their audience.
02/

Process overview

Strategic Blueprint

For Whitefox’s website transformation, I embraced the Double Diamond design method. This structured approach started with a deep dive into discovery, where we gathered insights by exploring Whitefox’s unique challenges. Clarity came in the ‘Define’ stage, where we turned our findings into actionable plans. The ‘Develop’ stage was a collaborative idea factory, and finally, the ‘Deliver’ stage brought these ideas to life through polished designs.

Pivotal Actions

  • Collaborative Creativity: Workshops with the Whitefox team sparked innovation and aligned visions.
  • Mapping the Story: We charted the full publishing journey to ensure every step flowed naturally.
  • Prototyping the Experience: Building and testing prototypes, we fine-tuned the user experience to intuitive perfection.
03/

Discovery phase

Understanding Whitefox

Kicking off with a workshop, I immersed myself in user research to truly understand Whitefox’s narrative. Analysing their website interactions and benchmarking against competitors gave me a clear picture. I synthesised this into a vision board that captured diverse possibilities for Whitefox’s digital presence.

To streamline our workflow, I set up a Notion workspace for real-time collaboration, ensuring every team member and piece of feedback contributed to a comprehensive understanding.

04/

Conceptual Evolution

Initial Concepts

Building on initial insights, I created three distinct homepage designs for Whitefox, each unraveling a facet of their brand story. These new concepts cut through the clutter, directly addressing core user queries:

  • The essence of Whitefox’s mission.
  • The process of bringing a book to life.
  • The storytellers behind the scenes.
  • The trustworthiness of the Whitefox brand.

The goal was to offer instant clarity and connect users with Whitefox’s vision from their very first click.

Concept 1:
Clarity and Connection

The first concept crystallises ‘what we do’ at Whitefox, presenting it through a clear and inviting lens. By placing essential services at the forefront, this design immediately acquaints users with Whitefox’s core offerings. The ‘Authors’ section weaves in transparency and trust, ensuring users find the answers they seek at the outset.

Concept 2:
Engaging Through Story

The second concept emphasises trust, marrying engaging visuals with the credibility of services. It unfolds Whitefox’s narrative by featuring esteemed authors and timely updates, crafting a journey that encourages interaction and leads to a compelling call to action.

Concept 3:
Synthesis of Ideas

The third concept takes the best parts of the first two, creating a unified online look for Whitefox. It makes the brand’s message clear and the user’s journey smooth and engaging.

Reflecting on User Feedback

Feedback from user tests showed that Concept 3 was the winner. People liked how easy it was to navigate, the personal feel, and how well the images fit into the design. However, the other two concepts got very good feedback too.

Results:

  • 57% of participants answered that they find Concept 2 more trustworthy for form submission
  • 100% of participants answered that they can gather good information about Whitefox from all these landings pages presented to them
  • 57% of participants answered that they prefer concept 3
  • 71% of participants answered that concept 1 felt more familiar page to them

Connect the pieces

After designing the homepage, I focused on creating user flows that were logical and easy to follow, ensuring that the website would meet Whitefox’s goals and the needs of their audience. Close collaboration with the Whitefox team was key in this process.

05/

component library.

Let’s keep consistency

I put together a component library to speed up the design process. This resource helps the development team with all the essential elements and variations they need for building the website.

06/

Solution snapshot.

Solution Summary

We’ve crafted a brand-new website for Whitefox that addresses every question and need. It sports a modern look that captures Whitefox’s vibrant essence, offering a welcoming space for authors and readers alike.

Detail That Delights:
Micro-animations

Subtle micro-animations were woven into the website’s fabric, providing not just elegance but also guiding users intuitively through their journey, making every interaction enjoyable and smooth.

Branding clues

I ensured that branding clues form the core elements of the website, strategically weaving them into every aspect to create a cohesive and recognisable brand presence.

Discovering Whitefox Page

The ‘About us’ section has been transformed, now featuring clear visuals that highlight Whitefox’s array of services, offering users an immediate and clear understanding of what Whitefox stands for.

bring everything together

The following screens are the final designs that were given to the developers.

07/

Outcome & Learnings.

Outcomes

  • Launch: The Whitefox website transitioned from concept to a live, operational platform.
  • Brand Identity: The design now fully embodies Whitefox’s ethos and character.
  • User Experience: Notable improvements have been made, creating a more intuitive and streamlined user interaction.
  • Visual Engagement: The site now sports an engaging interface that captures and keeps users’ attention.
  • Strategic Vision: The website is perfectly aligned with Whitefox’s strategic objectives and business goals.

Learnings

This venture was a significant stride in my professional path, marking my first extensive project as a Senior Product Designer. It honed my direct communication skills, especially in discussions with company leaders, and sharpened my decision-making. Navigating these dialogues, I’ve enhanced my ability to bridge business objectives with user needs, bolstering my design and client relations skills. This experience is a cornerstone, strengthening my approach to product design and strategic execution.

Other projects

Find out more projects that I have worked on