Sustainable fashion app with AR fitting room Individual | 30 weeks | UI design + AR modeling
Introduction
This project introduces adore, a smartphone app. The objective is to provide affordable, fashionable, and sustainable clothing, including an AR fitting room for virtual try-ons. The site also allows for the purchase and sale of used clothing. This software enables users to promote sustainable fashion by reducing waste and pollution. The project examines sustainable fashion trends and AR virtual fitting room technologies to assess their impact on sustainable fashion. The major results are a sustainable fashion app visual prototype and an augmented reality fitting room technological prototype.
Presentables
Figma prototype of the sustainble fashion app
AR fitting prototype by Snap AR technology
Demonstration VIdeo
Aims and Objectives
Objectives
Create a prototype for trying clothes
virtually to make sure the clothes sold fit in
style
Designing a system for new and second-
hand clothes to avoid the waste of unwanted
clothes
Show how the project concept impact on the
environment
Aims
Find out the technique of AR technology to
apply in a virtual fitting room in an app.
Find out the habit of buying clothes and how
to handle unwanted clothes of the users
Find out the target audience of the clothing
application
Investigate the user experience of existing
clothing app
Research Findings
AR virtual fitting room technology A lot of software and hardware are produced
nowadays and employed as virtual fitting rooms,
making augmented reality (AR) a well-developed
technology. However, most of them demand a
specialised camera or a sizable monitor. The VFR
should not use any sensors other than the
camera if the goal is to create an AR virtual
fitting room where the user may try on garments
at home. A few algorithms are found in the
literature review to accurately find the clothes
mask and determine the size of the clothes. The
user can still utilise the AR virtual changing room
even if they don't have a depth-sensing camera
or a camera that doesn't support AR
measurement.
Project Development
Mood Board
User Persona and User Journey Map The persona's character is a student of
Environmental Science who works as a content
creator. Since this kind of person would be the
most typical representation of the target
audience. She will be conscious of environmental
issues as long as she studies environmental
science, and as a content creator who shares
everyday outfits and life, she will always buy new
clothes to try on. Since she is a student, she
therefore always seeks to purchase items that
strike a balance between fashion and
environmental protection at a reasonable price.
As a fashionista, she gets a lot of unwanted
clothes and wants to get rid of them.
Elevator Pitch
adore.uk is a sustainable fashion app with an
augmented reality fitting room that offers an all-
in-one sustainable fashion platform for people
who want to buy sustainable garments at
affordable prices to reduce the environmental
impact, compared to other fashion brands that
only focus on one of the style, sustainability, or
price of the garment. adore.uk strikes a balance
between the three elements, producing
sustainable items that are still fashionable and
reasonably priced.
Branding Guide
Colour Scheme The colour scheme of Adore is earth tone, which
represents nature. Since colours are often
associated with the natural world, evoking
images of trees, rocks, and other organic
materials, earth tone has a sense of calming and
soothing the atmosphere. The main tone of the application is beige
(#F0E5CF), which is a dark shade of orange and
is associated with solidity, earthiness,
but dullness (Chapman, 2021). To avoid
monotony, other earth tone colour is used as the
secondary tone of various features in the
application.
Typography A round-edge font called Baloo Thambi is used in
the whole application. Round-edge fonts are
generally considered to be more friendly,
approachable, and informal than traditional, serif
or sans-serif fonts. This can be particularly
effective for creating a sense of warmth, comfort,
and familiarity. The logo is written in a handwritten cursive font.
It highlights the brand's distinctive character. It
is a unique artistic component that has the power
to catch the viewer's eye. People are forced to
stare at the design for just a few milliseconds
longer because the fonts frequently do take a
little bit more mental effort for proper
comprehension. Pure black is also not used in typography. Pure
black (#000000) has a big contrast with the
backdrop colour (#FFFFFF). Purely black writing
on a white backdrop makes the eye work harder
to read it due to the contrast. For this reason,
the contrast is decreased, and the readability is
then increased by using a grey colour similar to
black (#212427).
Fitting Room App
Onboarding Screen When a user opens the app, the first screen that
appears is the splash screen, which displays the
app's logo and colour scheme. There will be an
advertisement displaying the event if there is any
ongoing event. If the user opens this application
for the first time, an introduction carousel will
appear to introduce each main function, and how
the app can contribute to sustainable fashion. If
the user has previously logged in to the
programme, the home screen will appear
following the splash screen. The full logic is
depicted in the figure below. On the home
screen, there are promotions of the event,
advertisements for the fitting room, and some
highlights of the product.
Shop The brand's majorbusiness is its sustainable
clothing store. It functions similarly to other
fashion brands. There are various categories
from which to pick. Users can browse by
selecting a category. The carousel of each
clothing is displayed on the listing page, and
users can examine the photographs by scrolling.
And the specifics are listed below. Because Adore
is a sustainable brand, all garments should be
produced in a sustainable manner. All of the
sustainable elements are listed on the website.
In addition, the amount of carbon emissions
reduced is shown to provide a quantifiable
concept to the consumer of the environmental
benefit of choosing a sustainable brand. There
are also comments and star ratings for the item
to ensure that the user buys the appropriate
apparel and that the brand receives feedback for
improvement.
Second-hand clothing market The used clothing market is separated into two
sections: selling and buying. It functions similarly
to the app's shop function for the purchasing
section of the market. When the user clicks on
the seller's name, a seller profile appears,
displaying the rating, listing, and comment; the
user may then determine whether or not to
purchase the listing from the seller based on the
information. Users can also contact the seller
with questions, and the response time is
displayed.
Users can upload and manage their listings in the
selling section of the market. If someone orders
the listing, the user will receive a notification
for confirming the order, after which they can
mail the item and fill out the response form for
tracking.
Fitting Room App
Another important feature of the sustainable
shop is the AR fitting room. The AR fitting room
reduces the possibility of purchasing the
incorrect size or style of garment. Just the visual
design of the AR fitting room is available, the
technical prototype is not yet produced at this
stage. This AR fitting room is divided into two
sections: size measurement and Try-On clothing.
Size measurement Users have first to enter their information in the
size measurement section. The height is a crucial
piece of information since it allows you to
calculate the upper and lower body widths. The
user will then enter the scanning step. Following
the body scanning, the data is automatically
recorded in the app, and it can be further altered
if necessary.
Try-On The AR fitting room is another component of the
project. It functions similarly to a fitting room in
a clothing store, but in a virtual setting. In the
fitting room, users can select up to five items to
try on. The fitting room page functions similarly
to the Instagram story page. Users can select
clothing to sample by swiping via the camera
button.
It should be noted that because neither the front
nor back cameras are wide enough to
accommodate the entire body, users must either
Place the phone on the table, activate the
selfie mode, and back up until it can
catch your entire body.
Place the phone in front of a full-length
mirror
Ask the person next to you to hold the
camera
Shopping cart and wishlist The shopping cart and wishlist function similarly
to other clothes applications in that items from
either can be transferred to the other. When user
finish choosing the clothes, they can check out
and pay for the bill. After that, the user can track
their order.
Fitting Room App
A prototype of
an AR fitting room prototype is constructed for
the technical part. Lens Studio is utilised as the
platform to demonstrate the AR fitting room
because it has a comparable interface to the
visual design of the AR fitting room and its AR
method support is comprehensive and simple to
use. Even if the phone's camera does not have
an AR function, the AR function can be used. It
operates on a filter basis, making it simple to
share the artefact with others for display and
user testing.
Try-On Initially, Blender loads a T-pose or A-
pose 3D model. Next, a fabric-textured UV map
is applied to the surface that has to be coated
with the material. The surface of the 3D model is
then unwrapped and flattened into a 2D plane in
order to execute UV mapping, a method for
applying textures to 3D models. This plane is
then given the fabric texture, which is then
wrapped back onto the 3D model to provide the
appearance of cloth. In order to ensure a proper
depiction on the 3D model, the form and location
of the cloth texture is modified after it has been
applied. After the modification, the 3D clothing is
finally made.
Rigging Rigging is a vital process to make sure the 3D
clothing can inherit the moving body precisely.
Maximo, a tool made by Adobe, is used in the rigging project. The first step in rigging is setting
the chin, wrists, elbows, knees, and groin in the
proper positions. The system will automatically
start rigging the 3D model once these points
have been accurately positioned. This procedure
involves constructing a hierarchical structure of
bones that matches the digital skeleton of the
human body. Particular location and movement
range is allocated to each bone, allowing the 3D
clothing to move and deform realistically when
the user moves. Users can view how the 3D
garment will move and flow on their own body in
real-time.
Apply the clothes to the model The garment is added to Lens Studio at this
phase. A 3D body asset is available from Lens
Studio for placing 3D objects on the body. The
hierarchy of the body model in the asset and the
newly created 3D model should match in order to
ensure that the garment moves with the body.
The 3D model should move along the body after
matching the hierarchy. The occluder shader is
then utilised as the transparent texture to make
the other portion of the section invisible. The
clothing is then covered with the garment.
Upload the lens to Snapchat, and once it has
been approved, the process of creating an AR
fitting room demo for a garment is complete.
Conclusion
The project successfully combined sustainable fashion with AR fitting rooms for study and practise. Sustainable fashion using AR technology is a promising notion that will receive significant attention, according to study and practical work. Due to its prototype status, the project has constraints such as limited interaction with the app, such as form filling and data editing. The demo, app, and AR fitting room are independent, and the AR fitting demo does not operate without Snapchat. If this project is continued, there are various possibilities due to the remaining tasks. The AR fitting room can be linked into a genuine app. If Adore becomes a genuine brand, sustainability discussions will include affordable, trendy sustainable apparel and reducing packaging and transportation carbon footprints.
