01.
THE PROJECT
JAKS Apparel was a university project, where I worked in a team of 4 UX designers.
My role:
• User Research
• UX Design
• UI Design
• Visual Design
• Branding
• User Research
• UX Design
• UI Design
• Visual Design
• Branding
Software used:
• Axure RP
• Axure RP
____________________________________________________________________________________________________________________
02.
THE PROBLEM
In groups, we were required to design and develop an
online shopping website that provides users with an
online shopping experience that is both user friendly
and engaging for the user. It should provide users with
the ability to select appropriate products that they wish to
purchase, and advance to a final checkout where they can
make payment for the goods.
online shopping website that provides users with an
online shopping experience that is both user friendly
and engaging for the user. It should provide users with
the ability to select appropriate products that they wish to
purchase, and advance to a final checkout where they can
make payment for the goods.
The Task
Design an online clothing website that provides an online
shopping experience for users.
Design an online clothing website that provides an online
shopping experience for users.
____________________________________________________________________________________________________________________
03.
MY PROCESS
To help with my design decisions, I follow IDEO's
human-centered design methodological process:
human-centered design methodological process:
• Empathise
• Define
• Ideate
• Prototype
• Test
• Define
• Ideate
• Prototype
• Test
____________________________________________________________________________________________________________________
04.
EMPATHISE
Understanding Users
The primary audience is female students aged from 20-25.
The target audience live in Australia and they earn low to
mid income. They are inquisitive and open to try new things.
Their interests include: fashion, social media and photography.
The primary audience is female students aged from 20-25.
The target audience live in Australia and they earn low to
mid income. They are inquisitive and open to try new things.
Their interests include: fashion, social media and photography.
User Data Gathering
To inform the direction of the website development, user
data was gathered through a semi-structured interview
and an online questionnaire. Market research of existing
competitors and direct observations were conducted to
observe how users interacted with online shopping websites.
To inform the direction of the website development, user
data was gathered through a semi-structured interview
and an online questionnaire. Market research of existing
competitors and direct observations were conducted to
observe how users interacted with online shopping websites.
User Persona
Based on the research and data collected, I created a
persona that could potentially shop on JAKS Apparel.
Nina's goals are to find an inclusive shopping experience
for women of all sizes that is affordable yet simple and
easy to navigate around. Her frustrations include not being
able to find appropriate clothing sizes and the lack of
shopper's product reviews on a website.
Based on the research and data collected, I created a
persona that could potentially shop on JAKS Apparel.
Nina's goals are to find an inclusive shopping experience
for women of all sizes that is affordable yet simple and
easy to navigate around. Her frustrations include not being
able to find appropriate clothing sizes and the lack of
shopper's product reviews on a website.
User Persona: Nina
User Activity Diagram
An activity diagram was created in order to further
understand the possible interactions a user can make as
they navigate through an online clothing website. The
diagram outlines user errors and redirects them back to
the correct path in order to arrive at the final task; payment.
An activity diagram was created in order to further
understand the possible interactions a user can make as
they navigate through an online clothing website. The
diagram outlines user errors and redirects them back to
the correct path in order to arrive at the final task; payment.
User Activity Diagram
____________________________________________________________________________________________________________________
05.
DEFINE
Identifying Pain Points
To better understand user needs and user behaviour, it
is important that the experiences throughout their journey is
recorded through storyboarding and customer journey
maps. This will address the pain points that need to be
considered as I progress with the design process.
To better understand user needs and user behaviour, it
is important that the experiences throughout their journey is
recorded through storyboarding and customer journey
maps. This will address the pain points that need to be
considered as I progress with the design process.
Storyboarding
Storyboards were created to accurately depict a user's
step by step journey interacting with a website. As shown
below, Nina's journey navigating through an online shop
is a simple and familiar process as she is a returning
customer. JAKS Apparel aims to deliver design solutions
to tackle user needs and pain points in order to provide a
comfortable experience for online shoppers.
Storyboards were created to accurately depict a user's
step by step journey interacting with a website. As shown
below, Nina's journey navigating through an online shop
is a simple and familiar process as she is a returning
customer. JAKS Apparel aims to deliver design solutions
to tackle user needs and pain points in order to provide a
comfortable experience for online shoppers.
Customer Journey Map
From the user personas, scenarios and storyboards; customer
journey maps were created to follow the user's experience of
the stages of logging on through to the final purchase. From
Nina's persona, it was highlighted that her frustrations
included a lack of a diverse size range and product reviews.
Other pain points include having too many options to choose
from, therefore needing a filter feature to narrow down results.
From the user personas, scenarios and storyboards; customer
journey maps were created to follow the user's experience of
the stages of logging on through to the final purchase. From
Nina's persona, it was highlighted that her frustrations
included a lack of a diverse size range and product reviews.
Other pain points include having too many options to choose
from, therefore needing a filter feature to narrow down results.
An Online Shopper's Possible Journey
____________________________________________________________________________________________________________________
06.
IDEATE
Research of Existing Websites
To understand the user experience of shopping online,
research was conducted to identify the various types of
metaphors and interactive functions offered by existing
websites. Kookai is an Australian brand targeted towards
women. The website is responsive on both desktop and
mobile, consistency in visual design and layout has been
achieved. The process of adding items into carts through to
the purchasing stage follow a clear sequence and provides
users with a seamless experience as they shop online.
To understand the user experience of shopping online,
research was conducted to identify the various types of
metaphors and interactive functions offered by existing
websites. Kookai is an Australian brand targeted towards
women. The website is responsive on both desktop and
mobile, consistency in visual design and layout has been
achieved. The process of adding items into carts through to
the purchasing stage follow a clear sequence and provides
users with a seamless experience as they shop online.
Existing Website: 'Kookai'
Site Map
A site map was then created from all the data gathered
to identify key content usually featured on an online
clothing website.
A site map was then created from all the data gathered
to identify key content usually featured on an online
clothing website.
Site Map of JAKS Apparel
Lo-Fidelity Wireframes
Wireframes were then created after finalising the site map.
These were created on Axure RP and helped informed the
team on grid structures, layout and hierarchy of
information. Design and layout principles were considered
and applied throughout the wireframes to ensure a consistent
website interface design. Shown below are wireframes of the
Home page, Product page and the Sign-in page.
Low-Fidelity Wireframes of JAKS Apparel
Moodboard
I created a moodboard to capture a possible vibe for JAKS
Apparel. As a group, we all trialed a variety of colour
palettes until an agreement was made. The revised colour
palette used for the website is shown in the style guide.
I created a moodboard to capture a possible vibe for JAKS
Apparel. As a group, we all trialed a variety of colour
palettes until an agreement was made. The revised colour
palette used for the website is shown in the style guide.
Moodboard #1 for JAKS Apparel
Branding & Identity
When it came to the brand, the group collectively decided
to name the website, JAKS Apparel. The word, JAKS was
formed from a combination of the team's first letters of their
names. JAKS Apparel aims to provide inclusivity for all
women of many sizes, affordable prices and a
comfortable shopping experience for users.
When it came to the brand, the group collectively decided
to name the website, JAKS Apparel. The word, JAKS was
formed from a combination of the team's first letters of their
names. JAKS Apparel aims to provide inclusivity for all
women of many sizes, affordable prices and a
comfortable shopping experience for users.
Style Guide
JAKS Apparel aims to convey a feminine, and
harmonious mood. The colour palette appeals to
the female audience and complements the brand's
values well. The typefaces chosen express the
simplicity and minimal values of the brand.
JAKS Apparel aims to convey a feminine, and
harmonious mood. The colour palette appeals to
the female audience and complements the brand's
values well. The typefaces chosen express the
simplicity and minimal values of the brand.
JAKS Apparel Branding & Style Guide
____________________________________________________________________________________________________________________
07.
PROTOTYPE
Hi-Fidelity Mockups
After creating lo-fidelity wireframes of the website,
hi-fidelity mockups and prototyping were then
produced on Axure RP. The requirements were to
have a fully-functioning online website that
included all possible pages, interactive features
and be published live to the public.
The Solution
The goal was to design and develop an online
shopping website that provided users with an online
shopping experience that is both user friendly and
engaging for the user. These goals have been met through:
1. Adding search bar, menu bar and filter features
As gathered through our research of existing websites and
user needs, adding these features aids in user navigation;
promoting a user friendly and familiar experience as users
browse through JAKS Apparel.
2. Universally, recognised icons and metaphors
To improve the shopping experience for users, JAKS Apparel
uses icons and metaphors that are easily identifiable. The user
account, search and shopping bag icon helps direct users to
important tasks within an online shopping website.
3. Familiar, symmetrical grid layouts
JAKS Apparel incorporates relevant design and layout
principles for a seamless user shopping experience. The
websites uses the rule of thirds, symmetry, continuation and
common region to achieve both a visually appealing yet
functional website.
The goal was to design and develop an online
shopping website that provided users with an online
shopping experience that is both user friendly and
engaging for the user. These goals have been met through:
1. Adding search bar, menu bar and filter features
As gathered through our research of existing websites and
user needs, adding these features aids in user navigation;
promoting a user friendly and familiar experience as users
browse through JAKS Apparel.
2. Universally, recognised icons and metaphors
To improve the shopping experience for users, JAKS Apparel
uses icons and metaphors that are easily identifiable. The user
account, search and shopping bag icon helps direct users to
important tasks within an online shopping website.
3. Familiar, symmetrical grid layouts
JAKS Apparel incorporates relevant design and layout
principles for a seamless user shopping experience. The
websites uses the rule of thirds, symmetry, continuation and
common region to achieve both a visually appealing yet
functional website.
Home Page of JAKS Apparel
Product Page of JAKS Apparel
____________________________________________________________________________________________________________________
08.
TEST
Testing the Prototype
The website was tested with other students within the unit
and a heuristic evaluation was conducted afterwards.
Relevant changes were then implemented and final iterations
were made to finalise the design of JAKS Apparel.
The website was tested with other students within the unit
and a heuristic evaluation was conducted afterwards.
Relevant changes were then implemented and final iterations
were made to finalise the design of JAKS Apparel.
After the evaluations, it was made apparent that more needed
to be done in regards to user freedom in the user's cart page.
There is now more flexibility within the shopping bag. Users
can now change the quantity of the item they have added
without having to go back to the item’s page, or completely
remove the item via pressing the cross on the top right. There is
also a pencil icon which would change the layout of the cart,
revealing dropdown menus to change the colour or size of
the item within the shopping bag page.
to be done in regards to user freedom in the user's cart page.
There is now more flexibility within the shopping bag. Users
can now change the quantity of the item they have added
without having to go back to the item’s page, or completely
remove the item via pressing the cross on the top right. There is
also a pencil icon which would change the layout of the cart,
revealing dropdown menus to change the colour or size of
the item within the shopping bag page.
Final Changes to User's Cart Page
Project Takeaways
This project was insightful as it first introduced me into
web design. Working collaboratively as a team was
challenging as each person has different ideas, however
the group managed to work successfully on this 12 week
project. I also learnt the importance of placing the
needs of users at the forefront of the design. It enabled
me to inform my decision making to satisfy the needs
of JAKS Apparel's target market.
This project was insightful as it first introduced me into
web design. Working collaboratively as a team was
challenging as each person has different ideas, however
the group managed to work successfully on this 12 week
project. I also learnt the importance of placing the
needs of users at the forefront of the design. It enabled
me to inform my decision making to satisfy the needs
of JAKS Apparel's target market.
_____________________________________________________________________
View the prototype
_____________________________________________________________________
Visualisations
