![phone mocks](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/phone-mocks.png?resize=1080%2C1056&ssl=1)
Sidney
Garber
The Project:
Create a homepage that draws the customer in and shows off the product.
Solve This:
- Make the jewelry the most prominent item viewable.
- Too many clicks to see all the different styles of each piece. Make choosing the right piece easy.
- Make the purchasing options easier to understand (at this price point, people prefer to call)
How I solved it:
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/1-1.png?resize=150%2C150&ssl=1)
I used high-res images of jewelry combined with styled images in a back and forth repetition down the page to draw the eye through the entire offering of merchandise.
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/2-1.png?resize=150%2C150&ssl=1)
By adding buttons along the path you are able to quickly and easily find what you are looking for.
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/3-1.png?resize=150%2C150&ssl=1)
Soft round edges help the eye to continue moving along and make the page feel less divided.
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/4-1.png?resize=150%2C150&ssl=1)
Inside a selected item I reworked the layout and adjusted sizes to create a more seamless experience. As the user scrolls down the page, other options will appear, as well as a styled image for reference.
![](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/5-1.png?resize=150%2C150&ssl=1)
The user has the customary option to click between each item type while shopping, which has also been reworked to be easier to see all at once.
![main page wire](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/main-page-wire.png?resize=1080%2C3247&ssl=1)
![product wire](https://i0.wp.com/kristymapp.com/wp-content/uploads/2021/11/product-wire.png?resize=1080%2C915&ssl=1)
Software & Technique
Adobe Photoshop
Adobe XD
Composition
Balance
Repetition
Whitespace
Alignment
Rule of Thirds