A success story...
18% boost in overall site conversion rate
194% increase in products being added to cart
22% more users hitting checkout
My role
This project was carried out in partnership with 54 Bit Studios, a boutique web agency. As the sole UX/UI designer, I worked closely with developers from 54 Bit Studios and stakeholders from Beyond Nine to deliver a fresh, upscale aesthetic that improved usability, boosted sales, and increased SEO performance. I took the project from concept creation through to dev handover and QA feedback.
The client
Beyond Nine is a UK-based fashion brand that began as a maternity label. Over time, their collections have grown to include pieces suitable for everyone, regardless of pregnancy. For this project, Beyond Nine wanted to embrace this broader appeal. The goal was to position the brand as upscale, timeless, and relevant to a wider market, while still retaining its core values of comfort and effortless style. This redesign was also an opportunity to increase sales and improve conversion rates.
Overview
Project goal
Expand market appeal: Position Beyond Nine as a brand for all women, not just maternity.
Enhance branding: Create a fresh, modern, and upscale look.
Boost performance: Drive sales through CRO, showcase new product drops, and improve SEO.
Elevate UX: Simplify navigation and deliver an engaging shopping experience.
UX/UI Research
I leveraged findings from Baymard Institute’s e-commerce usability studies to ensure the design was data-driven and optimised for conversion. The studies emphasise key UX principles which I then integrated into the design to create a shopping experience that encouraged exploration and increased sales.
Stakeholder interview
The project began with an in-depth kickoff call which was an opportunity to dive into Beyond Nine’s current challenges and aspirations for the project.
They emphasised the need to expand their appeal beyond maternity wear, position themselves as a modern and upscale brand, and drive higher conversion rates.
They highlighted specific pain points in the current site, such as limited visual engagement and outdated functionality, and discussed features they wanted to prioritise, including customer engagement sections and tools to spotlight new product drops.
They described their typical customer as a busy mother, most likely to be browsing on mobile. That information informed a lot of my design decisions as I explained I would want to make sure all interactions were straightforward, could be completed with one hand and in the fewest clicks possible.
The session also provided clarity on their stylistic preferences through examples of inspirational websites from brands like Goodhood, Pangaia, Skims, St. Agni, Allbirds, Me+Em, and Good American.
Discover
Market research
To inform the redesign, I conducted competitor and market research, analysing sites mentioned in the kick off call. I categorised these into three key design directions which helped to articulate the client's vision and clarified the direction for the redesign.
Direction 01
Inspirations
Pangaia
Colorful Standard
Northface
On Shoes
Allbirds
LNDR
Keywords
Friendly
Bold
Welcoming
Fun
Accessible
Direction 02
Inspirations
Goodhood
Bedfolk
Toast
Pangaia
Girlfriend collective
Dora larson
Keywords
Simple
Clean
Content focused
Traditional
Classic
Direction 03
Inspirations
Me + Em
Toast
LeMaire
St Agni
YMC
Keywords
Editorial
Minimal
Cool
Sleek
Fashion-forward
Inspirations
Pangaia
Colorful Standard
Northface
On Shoes
Allbirds
LNDR
Keywords
Friendly
Bold
Welcoming
Fun
Accessible
Direction 01
Inspirations
Goodhood
Bedfolk
Toast
Pangaia
Girlfriend collective
Dora larson
Keywords
Simple
Clean
Content focusedTraditional
Classic
Direction 02
Inspirations
Me + Em
Toast
LeMaire
St Agni
YMC
Keywords
Editorial
Minimal
Cool
Sleek
Fashion-forward
Direction 03
Concept generation
I created three concepts based on the distinct styles identified during research: Friendly & Bold, Simple & Traditional, and Sleek & Editorial. Using Beyond Nine’s brand identity kit as a starting point, I adapted its ad-focused direction to web design, taking which allowed artistic freedom to explore each style. Each concept visually expressed its style with unique elements, such as rounded buttons and fun accents for Style 1, symmetrical grid layouts for Style 2, and a minimalist white-space-heavy look for Style 3.
Define
Presentation
When presenting the concepts to Beyond Nine and the development team, I walked them through the features and reasoning behind each design decision. For example, I explained how Style 1 created a more welcoming and fun tone, Style 2 evoked a clean traditional feel, while Style 3 was more cool and fashion-forward . This collaborative review allowed us to assess which elements aligned with Beyond Nine’s goals and technical requirements.
Design direction
After feedback and discussion with Beyond Nine, we chose the Simple & Traditional style as the foundation for the redesign. We felt that this spoke to their customer base best and struck the perfect balance between Style 3 (being slightly more intimidating) and Style 1 (being slightly more playful). However, we also opted to incorporate certain features from the other styles, such as quick shop functionality and hero section layouts, creating a cohesive yet dynamic final design.
UX/UI
|
Fashion
|
Website
|
E-Commerce
Brief
Redesign Beyond Nine’s e-commerce store to modernise its brand image, expand its appeal beyond maternity wear and boost sales.
Client
Accessibility
Accessibility was a key focus, with features like clear contrast ratios, alt text for images, and intuitive navigation to provide an inclusive experience for all users.
Component library
I created a reusable component library, including buttons, forms, carousels, and grids, to streamline development and maintain visual harmony throughout the site.
Design system
I developed a cohesive design system to ensure consistency across all pages, defining typography, colour palettes, and UI patterns tailored to Beyond Nine’s brand identity.
Design
Responsive design
I reviewed data from Beyond Nines existing site analytics and discovered that 80% of their customers accessed the store on mobile so this was the main focus in design, however I ensured that the site was designed responsively to provide a great shopping experience across all devices.
High-Fidelity mocks and prototypes
I delivered high-fidelity mockups and interactive prototypes to effectively communicate the final design vision and functionality to stakeholders and developers. These would go through one round of feedback with the client before confirming the final design and beginning builds.
Lookbook
The lookbook pages feature a gallery-style layout with large, immersive photos to give an editorial feel. The design emphasises storytelling and inspires users to explore the featured items, linking to relevant product pages. This format effectively builds excitement and drives sales for new launches.
Blog and article
The blog pages have a clean, content-focused layout designed to engage users with stories, updates, and insights from the brand. Articles are neatly listed with thumbnails and preview text, making it easy to browse topics. These pages support the brand's storytelling efforts, encouraging a deeper connection with customers while indirectly driving traffic to product pages through related links or mentions.
Trouser style guide
I wanted to include an interactive page to help users understand the wide range of trousers. It provides detailed descriptions of each style's fit, fabric, and colour, along with 360 degree images. Users can view styles side by side, enhancing decision-making, reducing purchase hesitation, and creating a more personalised shopping experience.
Search
The search functionality has predictive search suggestions as users type. Search results are categorised by Products, Pages, and Articles for clear navigation. Each category includes a "View All" link, directing users to a comprehensive search results page.
This design simplifies product discovery, reduces friction in finding items, and encourages deeper browsing. By surfacing relevant results quickly and clearly, it boosts sales through increased engagement.
Collection page (PLP)
Breadcrumbs at the top allow users to navigate effortlessly, particularly important if they land on this page from a social media link. Subcollections help users to refine their search by style or fit. Filters and sorting tools are sticky to the top of the page for easy access. Quick view functionality provides product previews and allows add to cart without leaving the PLP. Image swiping on product cards and colour swatches alsi improve visual exploration.
Product Page (PDP):
The product page features a cool, stylised layout with a focus on conversions. It has a "Complete the Look" section, allowing customers to pair the item with other products. Options to add the item to favourites or send a hint to someone. The description is divided into clear tabs for better organisation, and customer reviews are prominently displayed to build trust. The "You May Also Like" section encourages further browsing, all contributing to increased AOV.
Homepage
I designed a document search and application process that guided users through locating and submitting records for their citizenship application. This feature simplified complex steps by breaking them down into manageable parts, with clear instructions at each stage. I incorporated intuitive search functions and easy upload options, allowing users to store, manage, and track their documents within the platform. The process was built to be supportive, making an otherwise daunting task feel straightforward and achievable.
Cart
I designed the cart drawer and page to boost sales without interrupting the checkout flow. When empty, the drawer links to key collections, gently guiding users back to shopping. When items are added, the drawer showcases complementary products tailored to the cart contents, promoting cross-selling opportunities. Users can then view and add these products without ever leaving the cart.
Deliver
Header, navigation & footer
The header was cleaned up, I emphasised the logo, added a transparent background over the hero section, and improved the typography. For the navigation I added a mega menu for the "Shop" and "Our World" links, offering an intuitive way to explore product categories and brand stories. The menu also included space for special offers and promotions. I also modernised the footer and added in important site links, social media links and newsletter sign up option.
Results
🎉 18% increase in overall site conversion rate.
🔥 194% increase in products being added to cart.
🎊 22% more users hitting checkout.