uxdesign
overview
summary
Dellaria Salons has multiple locations in the Boston metro area. This mid-fidelity prototype built using Axure redesigns their website and adds all-new e-commerce functionality for their lines of hair products.
The wireframe demonstrates a complete shopping user flow and reprioritization of content. A product inventory and site audit were done to establish an intuitive page structure and information architecture plan.
-
time - 11 days
-
tools - pen, paper, Axure, Google Forms, Excel
process
-
product inventory & content audit (Excel)
-
user research (screen, interview, survey)
-
heuristic evaluation & competitive analysis
-
card sort / information architecture
-
site map (Excel)
-
wireframe (Axure)
-
usability testing & design iterations
research
Dellaria Visit
& Website Study
decorated for the holidays, signs for gift cards
specialty products organized by brand on display shelves
high-end products not normally sold at major retailers
Screener & Card Sort
must have curly hair products in separate category
hair Gel… where does it go? .....change ‘Spray & Mousse’ to ‘Fix & Hold’
Interview & Surveys
bundle purchase of services with product discount.
change ‘By Type’ and ‘By Line’ to ‘By Use’ and ‘By Brand’
ability to search by top selling, price, new & all natural
Competitive Analysis
image-heavy design that is stylish
GIFT CARDS & ONLINE BOOKING
home page must list locations info and social media badges
define
site map
Radio button filters are used to refine searches. Research shows desired categories are:
-
price
-
top selling
-
new
-
all naural
information architecture
The ability to search 'by brand' is important to these lines of products. Card sorting showed these 'by use' categories also desirable:
-
care
-
color
-
style
-
treat
-
tools
The inventory spreadsheet below is sortable by any column and ready to hand to a developer!
deliver
usability tests & iterations
-
easier to read typography on product page
-
‘same as shipping’ checked hides 'billing info'
-
remove two ‘go back’ links on detail pages
-
change auto image carousel to clickthrough
-
smaller footer font for salon addresses
-
product and shipping costs consistent
-
fix toggle on ‘like’ heart icon not working
-
hide checkout until ‘add to bag’ clicked
-
dropdown nav - fix flicker on mouse in/out
-
second nav panel dropdown misaligned
-
‘go back’ not working on product detail
user flow = find & buy a top-selling hair pomade
