Reflaunt
Designed the upgrade of the Reflaunt brand website, a destination to communicate the brand’s mission and services on offer.
Role
Design Lead
Timeframe
6 weeks
Team
1 Engineer
1 Stakeholder
Context
Reflaunt is a fashion-tech startup looking to revolutionise the way we consume fashion. This is done through empowering fashion brands and retailers with the circular economy and encouraging their customers to engage with resale through seamless experiences.
Since launch, Reflaunt has built resale services for an assortment of luxury and fashion brands with the industry attention growing. To fuel the attention and drive new partnerships, a clear way of communicating Reflaunt’s proposition was required.
The Challenge
Improve the existing Reflaunt Company website with three key objectives:
As the Lead Designer at Reflaunt, I worked on the website from end-to-end. Beginning with research and ending with communicating with the tech team to develop the approved design. Being a small company, I also had to take on the roles of copy writing and artworking to pull everything together. The timeframe was to deliver as soon as possible due to the increasing attention Reflaunt was getting.
I undertook a competitive analysis, selecting a mix of B2B companies primarily offering services in the fashion-tech space and digital services. I also drew inspiration from sites like Squarespace and Shopify to guide best practices for design interfaces and interactions. To facilitate easy comparison, I logged my findings in a spreadsheet.
Observations
Through the research, I highlighted the fundamental features and selected the most successful and relevant to communicating Reflaunt as a business.
Key features
A primary CTA that is visible at all times
Opening with a clear mission statement
Demonstrate product using screen mockups
All services on the homepage
Logos of partners to build credibility
Press articles to build credibility
KPIs to communicate successes
Ideation
To begin ideating possible layouts of the website, I had to have a sense of the content that would fill it. To collate this information, I wrote up notes on the services Reflaunt offers, referencing content from presentations.
I created a sitemap to show how the content will be navigated, and sketched wireframes based on initial layout ideas whilst keeping in mind the objectives at all times.
Design
With the initial wireframes confirmed, I defined a grid system the website would follow across the different devices to allow a responsive design.
From this I built out the website layout and begun adding the content in to create an initial prototype in Figma showing just the landing page and service page with some interactions. I presented this prototype to the CEO and Head of Strategy for early feedback to assess if the direction was accurate. Providing visual mockups was helpful for the team to see how Reflaunt was being presented and able to provide constructive feedback.
Change of business strategy
While the initial design was developed, the company had revised it’s business strategy and therefore the services on offer were adjusted. This impacted the design layouts however provided a cleaner business structure to work from.
Iterate
The new strategy provided a cleaner business structure as the services were interconnected with one another, providing clients the opportunity to combine services.
Objectives
Build credibility
Explain services
Inspire action
Link services
Revise design based on new company strategy
With the additional objective in mind, I revised the wireframes simplifying the layout and rewrote the copy to reflect the new services.
Above
Revised wireframes for the website. Left showing the homepage and right the services page.
To fill the pages, I was limited to assets from Reflaunt’s existing client projects and imagery shared from brands. To complement this, I sourced images from royalty free websites - carefully curating to be in line with the clients imagery.
Once the designs were signed off, I did a design walk through with the engineering team using a Figma prototype to demonstrate interactions and linking. I ensured to provide in Figma a layout for desktop, tablet and mobile to communicate how the content should respond at the different breakpoints.
As well as the Figma design file, I created he shared a drive folder with all assets and fonts to be used on the website and detailed all of the specifications on the Figma file
QA testing
When the website was ready to be QA’d, I tested each element and linking, confirming it aligned with the design file. To keep track of my feedback and communicate effectively with the engineer, I provided created a feedback document to log all corrections and check off each one that had been fixed.
New website was very well received across the business and from stakeholders. Reflecting the key objectives of the website and where these have been achieved:
