Beyond Accessories App

Beyond Accessories App Design

A virtual try-on app design which allows a seamless experience for users to try on accessories before making purchase decisions.

Challenge

Customers in fashion stores are unhappy because they cannot try on accessories which are also non-refundable.
Current virtual try-on apps can be laggy and the outcome looks unrealistic in comparison to actually wearing an item.
Many retailers have resorted to charging their customers for returning items purchased online because they are losing money as a result. This equally puts a strain on the customer, potentially having to pay twice.

Results

The user research survey received 134 responses, providing a rich amount of data to analyse, and scope for the design. Additionally, this helped understand the needs of both experienced and inexperienced users, so appropriate features on the virtual try-on could be designed.
A clickable prototype which all users who tested it described as clear and intuitive : "Seemed very intuitive and similar to other online shopping site lay outs"
Users responded positively towards the use of colour in the final designs : "I like the neutral colours of the design, its sleek and modern"

First hand experience as a Retail Sales Assistant

While working in the fitting rooms, it was observed that customers were frustrated that they could not take their accessories in to see how they would look with their outfit. This was due to company and in store policies in the interest of hygiene and preventing stock loss from shoplifters. Many accessories are also non-returnable, which often affected their decision in whether to chance it by making a purchase. This is something I believe can be changed by designing a virtual try-on system, making the shopping experience easier and more enjoyable for the user.

The research poses the question: Can virtual try-on applications improve the online shopping experience?

A business and environmental need

Fashion Retailers

With the rise in e-commerce since the Covid-19 Pandemic, the return rates of online shopping have increased
Processing online returns is a lengthy and labour-intensive process, resulting in products potentially missing their season and decreasing in value.
Retailers are hit with a financial cost of processing online returns
Many retailers such as Zara and Uniqlo are now charging customers for online returns to make up the cost.

The Environment

The abundance of online returns on items which miss their season often end up in landfill
Online shopping uses up a considerable amount of energy, depending on the digital, blockchain, and cryptocurrency systems used to create and trade them, as well as maintaining the digital world in which we use them.

Competitor Analysis

Products

Mobile

Web

Real time

Image Upload option

3-D Image Scan

Data Privacy message to access device's camera

Pros

Make-up, Nail Art, Eyewear, Footwear, Decor, Hats and Watches

Jewellery

Glasses

Fashion - clothing, make-up, accessories, decor, fragrance

Ties and Bowties

Variety of products to try on. High quality realism and accurate imagery. User can choose other variations of the products (colour, pattern etc.) Virtual Try-on feature has its own page on the navigation bar, so

High visual accuracy. Option to have the items tried on by a model, or upload a photo of yourself.

Clear instructions for the user, instructions are also voice-assisted which considers user accessibility. Option to re-scan. Accurately scanned imagery for left, right and centre angles. High quality on both Web and Mobile.

Feature works on both Web and Mobile. Dior's makeup mobile app has high quality realism on virtual try-on. Having the brand's logo at the top on the camera mimics the imagery for a magazine cover - making the user feel important.

Cons

Can be used on Mobile and Web, which gives users flexibility. High visual accuracy from different angles. Option to view the bow ties from different angles.

Next item doesn't change straight away and no instruction (e.g. stamp feet to change trainers). Not all Gucci's products are available to try on. Unavailable on web platform.

Only works on mobile web page

Doesn't capture how the items would be worn from other angles, like above and below.

Competitor

Virtual try-on doesn't look as realistic on web app. Makeup is the only product range available to try on mobile application. Not all items of clothing and accessories are available to try on web application.

Although there is an option to try the items on the web, it doesn't work. Only bow ties can be tried on. The data privacy message does not apply to this application because ti requires you to download a virtual reality file, which can be opened automatically on an iPhone or using a VR application if using on a desktop device.

Using competitors to inform design

Dior is a global high end designer brand, therefore having the text overlay of their logo on the live camera, to reflect a Vogue-style magazine cover, works for that particular brand. Should the project go beyond a student project and is for an existing brand with a high-end point of sale, this overlay feature might be appropriate.
Web platforms are being used for virtual try-on applications more than on mobile phones.
User research will be conducted to reveal which platform the users prefer to use for online shopping, mobile or desktop. Conducting user research will also help see whether users would prefer a pre 3-D scan or a live try-on.
Although virtual try-ons appear to be self-explanatory, supporting instructions can ensure the user can explore the application to its full potential.

Other mobile app interfaces were analysed to inform the design. These particular designs were depicted from the fashion retailer Zara, where I previously worked as a sales assistant, as well as Zara’s sister store Pull and Bear.

User Research Survey results

Previous use of Virtual try-on?

Reasons for not having used

a Virtual try-on

Participants' preferred Platform for online shopping

Would you be willing to use a virtual try-on?

Preferred visual representation of Virtual try-on

[In response to 'no']

What could encourage you to use virtual try-on?

[In response to 'Real Time - Live video']

Why Real-Time visual representation?

If it required as little effort as possible for a worthwhile result
I like to be able to see the clothes I'm getting
I think I'd need to be reassured that the virtual try-on accurately represented real life

Quicker
More realistic
More immersive
Easier to see different angles (assuming this is supported)
It would feel closer to a real shopping exp

How can your experience of virtual try-on be improved?

Better graphics
Better fit to head/face
More guidance
Make it a live video try-on so you get a better sense of the product rather than a static 2-D picture
It would have been cool to compare different styles side by side, something you can't do in the real world

Any other features you'd expect to see on a virtual try-on?

Help button, FAQ
Blurring/dropping away of the background
Tap to change colour of item
An acknowledgement of privacy & their usage of photos
To take a picture so I can show my friends
Items that can usually go together and can be tried on together, would be great e.g. lipstick and eye shadows pairing

Business Goals and User Goals

Business Goals

User Goals

User Persona

Using the data from the user survey and considering both the user and business goals, I created a persona to help identify key themes and thought patterns amongst my audience and empathise with them. This helps to make the best decisions to inform the development of my design.

User Task Flow

I created a User Task Flow to visually represent the user's journey from opening the mobile application, trying on the items, to making a purchase decision.

Visual Design Brainstorm

Low-Fidelity Wireframes

User Feedback

The low-fidelity wireframes were tested on five participants by asking them to respond to a series of questions, using the Heuristic Evaluation as a framework for the interviews. Below are recommendations from each participant, following iterations.

The ability to compare different accessories
Create a logo or a slogan for the system to make it more memorable
Could explore error messaging more fully during live try-on, for example 'oops the lighting is too dark, move to a lighter area'

Design Systems

Design objectives:

Clear

Easy to read

Non gender specific

No distractions

Intuitive

Accessible

High Fidelity Designs

View Interactive Prototype

Responses from the observational User Testing

It's the mental model you have of other websites. Everything's recognisable
Text under the sunglasses is a little too small
I don't know the instruction to tape the colour of the screen - lower the heading down a bit, but a good place to have instructions
Good that there are directions to help you
Add a “back” button whilst pairing with one item to be able to pair with a different item

Conflict:

Participants from non-technical backgrounds would often not think out loud, unlike the participants from technical backgrounds who did think aloud.

How I overcame this:

I prompted these participants by asking open-ended questions like "what are your thoughts on this page?" and "what are you thinking as you are working through this part of the prototype?".

Post User Testing Survey Results

Favourite virtual try-on feature

Additional feedback:

'I was expecting to have to go back to the product again to select the other colour so was really efficient to be able to tap to change colour'
'I like to colour co-ordinate my accessories and the pair with feature would really help with that'
'I always look for second opinions on clothes so I would definitely use the photo sharing feature!'

How likely would you use this app?

If this were a real app, on which format could you envision using this application?

(You can select more than one answer)

Additional feedback:

'It would be easier to use the camera on a mobile'
'The layout of the application looks perfectly suited to a smart phone screen'
'Smart mirrors would be cool but not easy accessible'

Would this application make sense in-store?

100%

Agreed that it was obvious how to go from one place to another on the Prototype.

100%

Agreed that the design looked easy to use.

100%

Agreed that the 'adjust brightness' and 'blur background' features were visible enough.

85.7%

Reported that all the features were what they expected to see on the prototype.

100%

Agreed that there was an even balance between the text and image.

14.3%

Reported that all the features were not what they expected to see on the prototype.

Indicates participant from technical background

Indicates participant from non-technical background

Feelings towards the balance of text and image

The large font was very user friendly. The pictures were very easy to navigate
Not overloaded with information that would overwhelm the user
Similar to other online shopping site lay outs

Thoughts on the navigation

Follows the conventional paths of app design
There was a clear and functional menu bar at the bottom and to go back to a previous place was intuitive
I didn't have to think about it too much and I knew what to do

Feelings towards the features on the prototype

The share function and the blur function were added bonuses to what I'd expect to see on the prototype
There could be a link to view image library next to share button after taking photo
Very similar to many other apps

Thoughts on use of colour in the design

Feelings about the instructions on the app

What would you change about the app?

Minimalistic, in a good way
I like the neutral colours of the design, it's sleek and modern
Very gentle colour scheme, easy on the eye

Very clearly labelled and follows a familiar pattern from other shopping apps
They were helpful as it was the first time I had ever used an app like this and the instructions guided me
Helpful but not totally necessary to someone who's online shopped before and is tech savvy

Hamburger icon usually should be separate from other list items
Shopping for clothes rather than accessories
Reorienting the women's page a bit to ensure that there is no image cropped at the bottom and that all images and texts are evenly spaced

Findings:

Participants from non-technical backgrounds provided more detail in the survey as opposed to the think-aloud stage
Participants from technical backgrounds gave more detail in the think-aloud stage, but their answers were more brief in the survey

Conclusion

Overall, participants responded positively towards the app, particularly the simplicity of the overall design, the lack of jargon and the ease of navigation.

"Design was well made, minimalist and not overloaded with information that would overwhelm the user."

"The navigation was straightforward, and the use of the icons confirmed the direction."

"As a person with dyslexia I appreciate when I am not forced to read too much because it does make me tired."

Some areas for improvement were identified by participants, including a lack of continuity and misuse of icons.

"I find it interesting that you can see faces in the pictures except the ties and bowties – may need more continuity."

"Generally, when you use the hamburger menu it would be at the top corner."

Next Steps

1. A/B Testing
A/B testing could be implemented to get participants to test multiple designs against each other.

Option

A

B

2. Payment Process
Designing a quick and easy payment process would be the next stage in the development of the app design, as suggested by a participant from the high- fidelity user testing.

Ecommerce checkout user flow from SlickPlan

3. Available for download
If this design became a real mobile app, it would be taken through the process for approval to become available for download from the App Store and Google Play.

4. Field Study
If this prototype were to be designed for an existing accessories brand, it could be tested on their customers and an observational field study could be conducted.

5. Bring the experience in-store
To encourage in-store engagement and make the experience more realistic, the prototype could be taken further by designing a smart mirror and tested on participants who go shopping.