Auralis: A Greenfield Omnichannel eCommerce Project
UI/UX Design | Web Development | Content Strategy and Marketing | SEO | 2024
Introduction
Auralis started with a blank canvas. They had the brand vision, but no digital infrastructure. When they contacted me, my mission was to architect their entire digital ecosystem from the ground up, translating a boutique fashion experience into a high-scale, multi-channel eCommerce platform.
Auralis planned to enter the market as a digital-first brand.
The challenge was, that they wanted the prestigue of physical boutiques without the overhead of owning them.
The goal was to launch as an eCommerce channel, while simultaneously integrate third-party luxury boutiques as Click & Collect hubs and fulfillment centers.
The UX Strategy: Architecting the Logic
As the boutiques would be independent partners, the UX had to solve their problems as well.
There ware 5 problems to solve:
Partners trust: I designed a simplified stock reporting flow that would integrate partner boutiques into the Aurelis flow. This would enable them to update availability with very low friction.
Customer assurance: The UI I crafted clearly distinguishes between our stock and the stock available in our partner boutiques with a simple click on an "In stock" link. That opens up a panel with a search bar. This enables them to select the desired shipping method in the checkout.
Fullfillment flow: in the designed flow, it is visible how the user interacts with the shop, how stock is deducted from the total available stock, how long it is reserved, and what happens when the item is paid for.
The designed flow above represents the blueprint for the entire business logic. It factors in cases where users can see availability across various locations, and it offers the option to implement Click & Collect customer notifications automation.
Strategic UX Decisions
Inventory shown on product pages:I designed the UI so there is an "in stock" CTA that opens a panel allowing users to check availability without leaving the product page.
Checkout logic: The user can easily select the click-and-collect option, which opens a panel to choose a pickup location.
Backend logic to help the staff: After the order is completed online and the user selects the pickup option, the selected boutique will receive an email confirmation that they have an order to fulfill. The staffer could then check the system and move the order to the "Ready for pickup" status. This would trigger an email to the customer confirming they can pick up their order from the boutique.
Inventory availability on single product page
Pickup location selection in the shipping section of the checkout
Understanding who the primary target audience is
As the brand would be selling higher-priced items, it was not for everyone.
We need to position the brand to people who value quality and fashion above the price tag and understand that they are investing in quality clothes, not just buying low-quality fast-fashion items.
The primary persona was developed:
Gender
Woman
Age range
25 - 50
Job
Office Job
Salary
Medium to High
Interests
Fashion, looking beautiful and feminine, feeling strong and confident, interest in dressing up, caring for the environment, Quality fabrics and items.
Technical Implementation
The foundation for the plan was the WordPress and WooCommerce platforms. I focused on:
Scalability: The infrastructure and eCommerce platform were optimized to handle frequent updates from POS systems without slowing the user experience for users and staff.
Mobile Performance: Since most users these days come from mobile devices, I opted for a mobile-optimized view to be thumb-friendly. Also, the underlying server was selected with speed and stability in mind. This means a dedicated server with as much control over optimization as possible, plus Cloudflare support.
Main success metrics and goals for the first 12 months
1.
Organic Traffic
2.
Click-through rates
3.
Sales
4.
Conversion rates
5.
Rage clicks
6.
Scroll-depth
These will be our success metrics.
Throughout the first year, user experience data will also be collected. I suggested Posthog to start.
These data will help us collect data on the usage of the website and will help us understand:
1.
How users use our website
2.
How our CTAs are working through heatmaps
3.
What to optimize
These data will enable us to run A/B tests and improve the whole user flow from entering the shop to finalizing the purchase.
With A/B testing, we will be able to test headings, CTAs, content, images, and layout. This way, we will be able to test the whole product quickly.
Brand marketing story/plan
The brand is a premium high-fashion brand for women who want to feel confident and comfortable in their clothes. As well as dress up and radiate their energy. It is a brand of slow fashion that encourages women to invest in their wardrobe, not just buy another piece that will be forgotten in a few months.
This is why, as you can see below, a dedicated green landing page was planned to give back to the environment and secure the planet's future for us and our children.
Together with the founder, we also planned an extensive blog section featuring tips and tricks on how to dress, what to buy, and which fabrics are suitable. The content plan included pieces that would entertain and educate users.
The Final Design
The design is clean and minimalist, featuring a black-and-white scheme. A bit of Gold is added for a premium feel and look.
From the beginning, the user would feel that the brand is striving for their well-being and the future of all of us, and that it presents a prestigious brand with added value.
The homepage hero section was designed to attract attention and, at least at the start, to encourage visitors to enter the webshop.
The webshop page features a layout of three items in a row, allowing the item images to have a greater impact on sales. Filters were hidden and can be easily activated with the button above the first row of shop items.
The single product page is designed to serve as a sales landing page, allowing users to select sizes and colors and check stock with a single click.
The checkout was designed with three steps, so that we wouldn’t overwhelm users with asking too much information at once.
The checkout steps
The steps are:
Contact information with the option to sign in for existing clients
Shipping - where the clients could also select the option to pick up the items in their most convenient pickup location (future planning)
Payment
Throughout the webshop, users also have the option of a mini-cart, which shows what is in their cart and the total value. Inside the mini-car, you can proceed to checkout or continue shopping. This is done to make sure the user is never left without a next step in their buying journey.
There is also a stock management slide-out and a pick-up in-store slide-out, designed and planned.
Content strategy
I prepared a content plan for their blog. The plan consisted of more than 220 title ideas and 22 topic clusters.
These clusters were designed to provide comprehensive guides to potential buyers and to attract more visitors to the online shop
All to position the brand effectively in the users' minds and search engines for better discoverability.
The Key Results
First, I thoroughly enjoyed working on this project. I could work on the marketing plan, content, and the user journey.
However, I learned that no matter how well-planned and well-executed the plans are, the budget and costs are unforgiving. After my work was done, the project was halted due to financial troubles. Everything stopped before it could even begin to work.
A sad end to a fantastic project with such a good plan and potential.
What Did I Acomplish:
The steps are:
Unified Brand Experience: Users could enjoy a seamless transition between online and physical stores.
Operational Clarity: The blueprint flow would enable users to benefit from an automated system and reduce staff time spent on manual coordination.
Foundation for Growth: The system would be robust and scalable, allowing the brand to add new locations with ease.
