SPRING 2024
FRAGRANTICA REDESIGN
WORK TYPE solo
CONTEXT csci1300, brown university
TIME 16 hours
live mockup can be found at
/cs1300-responsive-redesign
/cs1300-responsive-redesign
> PROJECT BRIEF
> WEBSITE CHOICE & ANALYSIS
> WIREFRAMES & STYLE GUIDE
> HIGH-FIDELITY PROTOTYPE
> MOBILE MOCKUP
PROJECT BRIEF
This project seeks to redesign a simple website by first analyzing and identifying flaws in an existing interface. Low-fidelity and high-fidelity prototypes were created for various screen sizes, and a responsive website built based on those prototypes.
WEBSITE CHOICE & ANALYSIS
live original site can be found at
fragrantica.com
fragrantica is a bit like wikipedia for fragrances, and it gets very relatively high traffic for a website that has an incredibly cluttered and dated user interface, as it houses a unique, large database of perfume and fragrance products.
a learnability, efficiency, memorability framework was used to assess the website for flaws to be addressed in a redesign.
fragrantica.com
fragrantica is a bit like wikipedia for fragrances, and it gets very relatively high traffic for a website that has an incredibly cluttered and dated user interface, as it houses a unique, large database of perfume and fragrance products.
a learnability, efficiency, memorability framework was used to assess the website for flaws to be addressed in a redesign.
Learnability
while the page is quite cluttered, most basic tasks are clearly marked, as long as one is able to find the section on the page where the task is done.
while the page is quite cluttered, most basic tasks are clearly marked, as long as one is able to find the section on the page where the task is done.
Efficiency
the interface is rather low efficiency, as the clutter increases the time to find the actionable section. the layout of the interface is sequential and therefore each section is not particularly memorable, meaning that actions must be confirmed visually instead of being assisted by various spatial cues.
the interface is rather low efficiency, as the clutter increases the time to find the actionable section. the layout of the interface is sequential and therefore each section is not particularly memorable, meaning that actions must be confirmed visually instead of being assisted by various spatial cues.
Memorability
as mentioned above, the interface has memorable portions but the sequential layout affects the ability to complete the same task multiple times without additional search effort.
as mentioned above, the interface has memorable portions but the sequential layout affects the ability to complete the same task multiple times without additional search effort.
WIREFRAMES & STYLE GUIDE
from the assessment, the basic wireframes seek to show the top of the page and identify the critical sections of information, which are organized higher up on the page.
elements are given more space to breathe while still retaining a high-density, glancable page.
the style guide expands on a neutral palette while retaining fragrantica's signature red. this allows for the colors of individual perfumes to stand out on a page, while not clashing with the website theme.
HIGH-FIDELITY PROTOTYPE
the high-fidelity prototype brings together the wireframes and the new style guide, providing a clean, but still extremely informative browsing experience for fragrance enthusiasts.
MOBILE MOCKUP
