Process
Step 01
Create wireframes collaboratively to illustrate page layouts.
![Wireframe for home page](img/perfume-company/home.png)
![Wireframe for contact page](img/perfume-company/contact.png)
![Wireframe for checkout page](img/perfume-company/checkout.png)
Step 02
Prepare a style guide to define a set of visual elements on the site.
![Website Color Swatches](img/perfume-company/colors.png)
![Typography](img/perfume-company/typography.png)
![Call-to-action Buttons](img/perfume-company/CTA.gif)
Step 03
Refine UX and visuals based on user feedback.
What did users say?
"I want to know the price when I'm browsing the products without clicking to see the details."
What did we do?
![Screenshot of product listing without prices](img/perfume-company/no-price.png)
![Screenshot of product listing with prices](img/perfume-company/with-price.png)
Step 04
Implement it with coding and update prior style guide.