Dollskill: Webiste Redesign
How does an online retailer offer an inclusive experience?
The Run-Down
Dolls Kill spotlights a collection of odds and ends for consumers who enjoy trendy street style. However, they fail to consider translating their brand to fit a wider audience.
This UX case study aims to organize the contents for an online retail platform, while maintaining brand identity.
KC Yeneza, UX Designer
What I did in four months:
Audited the current experience to assess how inclusive design and storytelling are integrated across fashion websites.
Spoke with real users to uncover challenges, especially around accessibility, representation, and ease of navigation.
Redesigned the site layout using wire framing and Figma, with an emphasis on simplified UX, and inclusive website standards.
Our Scenario
I collected data through user research and assessed key areas of opportunity by screening the current experience, and carried out a redesign of the website which resulted in the final iteration.
My objective with this project was to manage Dolls Kill’s influx of content, by simplifying category navigation and pages, therefore improving accessibility.
I encountered challenges in maintaining brand identity however, designing an inclusive experience was my ultimate priority.
Evaluting Dollskill’s current experience
Failed checkpoints
This process found inconsistencies in Dolls Kill’s website, including: busy menus and pages, non-contrasting colors, and an overall neglect to design inclusively. Many needs weren’t met for usability purposes.
I first screened their experience using a website audit framework, designed in collaboration with an expert in the field, to evaluate the site’s performance and user experience.
Single-Track Flow
This would allow consumers a more efficient way to checkout. However, the purchasing flow wasn't the biggest concern with Dolls Kill's website, and the layout of their pages needed some rethinking.
Low-Fidelity Prototypes
I made some sketches through the app GoodNotes on an iPad, and mapped out the pages to model the screens for desktop and mobile. I was determined to create a simplified layout that prioritized their products, as well as their consumers.
Mid-Fidelity Wireframes
Desktop
Here, I was able to bring my vision to life. This further mapped out the updates I wanted to implement, introducing different fonts and sizes, placements of images and buttons, and finally creating a more communicative prototype for others to view.
Mobile
High-Fidelity Wireframes
These screens focus on interacted components, color contrast, and overall finalized design choices.
Expert Feedback
After receiving instructor feedback I synthesized the following pain points:
-increase text size for both mobile and desktop screens
-increase the visibility of the functions of buttons
-span the content to fit the grid
-include a coupon and promo input box
Before
After
Design Library
Final Thoughts
If I had more time on this project, I would play around the different ways a home page can be more engaging but still cater to everyone. I would also consider how to really personalize Dolls Kill's branding to fit my current screens. Although I tried to include pieces of Dolls Kill's brand identity, I want to experiment expanding on this more and tweaking the layout.
This experience taught me how to mix aesthetic with designing products that are inclusive of a larger audience. This helped me realize first hand how design isn't subjective to the author and how many modern platforms fail to create works that are more inclusive. I was surprised at the easy changes that could be made to reach this goal.