The Thinx site had beautiful photography and spot-on branding. However, there was room for improvement – as a user, it was unintuitive, static, and slightly difficult to navigate. This redesign allows for the playfulness and eccentricity of Thinx’s brand identity (especially their photography) to shine through in their website. Note: All photography belongs to Thinx and their rightful owners.
Goals
Design for a better user experience more suited to Thinx’s consumer persona (Think Gen Z/Millenial, tech-savvy, social media influenced, and eco-minded)
Use the grid in a clearer, more appealing way
Introduce more type hierarchy, improving accessibility
Reduce flatness / Add dimension
Add interactive elements to increase engagement
Showcase and highlight the photography to increase brand affinity
Process
I started by wireframing a homepage for an e-commerce brand, using a limited greyscale palette and a completely neutral typeface and button style. Pictures below are sketches, which were then transformed into Sketch files.
I researched other e-commerce websites with similar customer demographics, such as Urban Outfitters, Topshop and Asos to see what kind of content was featured on the homepage, and used this research to determine what kind of content to have in my wireframe. I weighed my research against what I perceived might be Thinx's business goals as well.
It's important to note that as a self-initiated project, my designs do not reflect all the stakeholders' opinions and the company's business goals.
Next was translating the wireframe into the visual design, keeping in mind the customer persona and elements that would appeal to them. (Images and most text are pulled from Thinx and belong to their rightful owners)
Desktop vs. Mobile
Product Details
