Dianna Rae Jewelry is a family owned jewelry store locating in Lafayette, LA. They are unbeatable in custom jewelry, and I have had the privilege of working with them as a sales associate, jewelry designer, and photographer. When I was completing my certification for UX/UI design, I had the opportunity to choose my project of reworking the website of an established business. I chose to base my project on Dianna Rae! These ideas and designs were used solely for my course and were not implemented by the business.
WHERE IT STARTED
The original Dianna Rae web design did not have a nice layout for mobile breakpoints. Information and photos were stacked, causing the user to scroll for a long time to find information. There is no search option, and products are set to have hover states without displaying information for a mobile screen.
WIREFRAMES
To start redesigning, I began ideating user flows and sketching low fidelity wire frames. After refining the design ideas, the wire frames were upgrading to mid fidelity, and finally, high fidelity.
After creating the wireframes, it was time to start thinking about the overall design and visuals for the app. The brand already had existing logos & colors, all that was needed was a bit of refreshing.
MOODBOARDING
To form a cohesive look, I created a mood board to hone in the style preferences for the app.
STYLE GUIDE
Once the style was decided on, a style guide was the next step. Color palettes, logo usage, typography, imagery, and icons were laid out with do's and dont's to help developers or future designers.
ANIMATIONS
To polish up the design, some animations were added in. The Hamburger icon folds into the "close" icon while the menu slides in. This provides a polished and more entertaining experience.
FINAL PROTOTYPE
