Avascope
The future of online fashion retail, guarantees ‘your perfect look and fit everytime’
From the outset, this was going to be a challenging project using groundbreaking technology to allow customers to try on clothing in-browser, on multiple devices. Due to the size of the team I had to wear many hats, leading the graphical design as well as the UX stream of work.
Role: UX lead, Creative lead, Branding
The problem
Clothing sizes vary across retailers. When buying clothing online it is almost impossible to know if it will fit or not.
To create a consistent experience across multiple devices with a ‘multi-interface’ capability targeting general online shoppers, fashion buyers, and fashion students.
The process of discovery
The initial prototype drew a lot of attention and secured the first round of funding from investors. This was then taken into user testing to work out where improvements could be made based on feedback from a variety of user groups.
Sketches and user flows were quickly turned into rapid prototypes and tested with another set of users to check the new interaction and ideas worked. Once the users and the business were happy with the direction we quickly entered into the production phase with by-weekly meetings and reviews for both ‘experience and graphical design’.
The solution
A complete brand and user experience overhaul, bringing the fit of the clothes to the fore. The consistent position of the avatar across multiple ‘browse’ templates allows the user to try on various items of clothes, and create and save outfits without losing sight of the fit of the clothing items.
The colour palette was intentionally toned down, using black & white to maintain contrast throughout the design. Others are used sparingly as accent colours to draw attention and enhance brand recognition.
User testing
Four rounds of user testing sessions were completed over a three-week period on the original prototype to establish where the main problems lay and where to focus our attention when rethinking the UI and interactions.
The above results from the rounds of user testing were presented back to the client using visual clues to show whether a user had:
01. Completed the task (green smiley face),
02. Completed the task with prompting (confused orange face),
03. Failed to complete the task (red sad face)
These were then fed into a document outlining the recommendations for: Interface, Colours, Iconography and typography, primary navigation, Browse screen, Content filters, Main product listing, Product detail, Avatar and product hover states, Changing room, My Outfits and My avatars.
Wading through the feedback template by template and testing out a few ideas helped form a solid foundation on which to base the new concepts for navigation and content hierarchy.
The brand
The final logo is made up of the deconstructed angular shapes that are found in a t-shirt, reflecting the three-dimensional polygons used in the clothing visualisation and the corresponding draped clothing items.
Looking at how the brand works with various styles of 3d assets from angular and stylised forms to fluid forms created by the dynamic cloth visualisation.
The landing page
Animation of the Avascope landing screen to show the developers how the various elements should animate, detailing the hover states of the left and right portions of the screen and easing in and out of the animations.
The outcome
Final delivered concepts were developed and pitched to investors for second-round funding after positive feedback from retailers.