Elevating the food delivery industry by streamlining the connection between restaurants and dark kitchens.
.png)
Individual Client Work
Research, UX Design, UI Design
14 Weeks
11.14.2022 - 02.17.2023
Figma, FigJam
Adobe Creative Cloud
Pas Une Marque is a Parisian luxury fashion house that relies on online shopping, with over 90% of their sales coming from their website. Originally designed in a desktop-first approach, their site recently began facing a strong shift towards mobile usage.
Amidst this shift, users started to express navigation difficulties leading to decreasing conversion rates. I was requested to identify the reasons behind these and redesign the e-commerce based on the discoveries with a mobile-first approach.
A mobile-first e-commerce platform providing customers with a seamless shopping experience, allowing them to explore the brand’s diverse catalogue with ease, while offering a streamlined checkout experience.
The sliding filters allow users to explore the brand’s diverse catalogue without leaving the home page.
-poster-00001.jpg)
.png)
-poster-00001.jpg)
The product page has a bottom fixed bar with two options: add to cart or shop now. You choose.
Cart page subtly slides on top of the page you’re on without having to leave, easing the experience.
-poster-00001.jpg)
Desktop Version
Enhancing the user experience by segmenting the product images into a self-contained scrollable area, while locking the product details and shop buttons in a fixed section.
My approach to this project integrated human-centered design principles with the specific business needs and project constraints. The design process began with a comprehensive examination of their existing website and consumers.
For an in-depth visualization of each stage in the design process, please visit the website through a desktop computer.
To begin with, a thorough analysis and deconstruction of the existing website was necessary to gain a comprehensive understanding of its user experience to later determine where it falls short.
-poster-00001.jpg)
-poster-00001.jpg)
Dissecting the site into flowcharts helped gain a deeper comprehension of what it takes for a user to discover and purchase an item.
By soliciting feedback from both previous customers and individuals who had browsed the website but failed to make a purchase, we were able to identify the main factors contributing to the low conversion rate.
The interviews shined light on various performance indicators I then used to compare Pas Une Marque's website to its competitors. This allowed me to draw inspiration from their strengths and apply them to Pas Une Marque's weaknesses where applicable.
By identifying trends among the user comments and competitors’ study, I was able able to consolidate the research into three main weaknesses. These were addressed by questioning how might their exact opposite experience be achieved.
Changing pages to discover products adds loading time, delaying the navigation experience.
Having to visit your cart to complete a purchase after adding the item risks losing the sale.
Users struggle to discover the brand's full product range due to poor accessibility to different categories.
How might the navigation experience be accelerated?
How might we reduce friction in the shopping experience?
How might we spotlight the brand’s diverse catalogue?
To address the design opportunities effectively, a user persona and its corresponding journey were constructed, allowing for a more in-depth exploration of the pain points.
After grasping the user's frustrations its developing the persona and journey, understanding the project constraints was necessary to initiate ideation. It was crucial to gain a deep understanding of the current limitations to see what was achievable and what was not.
Only 1 Designer Available: Me
Only 1 Engineer Available: Vikrant
Design Time Left: 9 Weeks
Engineering Availability: 8 Weeks
.svg)
Once the engineer clarified the constraints, the design ideation began, ensuring that the ideas do not exceed the limits and can be accomplished within the designated timeframe.
The ideation phase resulted in multiple individual solutions, which were brought together into a unified system through wireframing.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
The ideation process birthed two distinct design directions that address different issues identified in the research phase. These were approved by the Creative Director and engineer to move forward for the user testing.
-poster-00001.jpg)
Direction 1
View your cart without leaving the product page.
Fixed checkout button in the cart overlay.
Smaller product images to indicate they’re scrollable.
-poster-00001.jpg)
Direction 2
View all styles in one same page with the sliding buttons.
Fixed shopping buttons in product page.
Bigger product images with arrows to indicate swiping
Time constraints didn’t allow us to actually develop both directions for A/B testing, so both high-fidelity prototypes were shared to consumers and tested through Zoom sessions that were carried out along with the Creative Director.
Having both design directions tested and one chosen to move forward, users provided valuable feedback that contributed to the design's improvement. We addressed their comments with the following updates:
The design system was updated with the corrections derived from the feedback received during user testing of the selected design direction. This was the last step before finalizing the mobile screens.
.png)
.png)
.png)
.png)
.png)
.png)
Strategically, the desktop design left behind complex features, like the sliding filters on the homepage and fixed bar with shopping buttons on the product page, as this format accounts for less than 20% of the website's traffic.
.png)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.png)
.png)
A final high-fidelity prototype was built to visualize the overall website’s navigation in both mobile and desktop before development.
-poster-00001.jpg)
 Mobile Entire Website (Video)-poster-00001.jpg)
One of the business objectives was to increase the conversion rate on desired actions such as visiting product pages, adding items to cart and most importantly, purchasing them. The website has just been deployed so it’s still to early to evaluate numbers, but eventually, this will be the strongest success metric.
Pas Une Marque was struggling with an unusually high cart abandonment rate. Like with the conversion rate, it’s still too early to tell, but eventually this would be the second most important metric to take into account when measuring success.
The project was particularly challenging as it was limited to a single designer and engineer due to budget constraints. Additionally, the short development schedule posed limitations on incorporating complex features, which forced me to mostly focus on rearranging UI elements carefully enough to have an impact on the overall UX.
Testing different design directions was challenging as we couldn’t actually develop them and conduct A/B testing. To overcome this obstacle, I created high-fidelity designs and worked alongside the brand's Creative Director to organize Zoom sessions with consumers, sharing Figma prototypes with them and collecting feedback.
