Sparkle: E-Commerce User Interface

Tools: Figma + Photoshop

Role: Designer + Photographer + Editor + Copywriter

Sparkle is a fictional jewelry store.

This project ensures an user-friendly online shopping experience for jewelry enthusiasts. With straightforward responsive navigation, users can explore the collection, pick their favorites, and enjoy a simple checkout process. It’s a practical showcase of functional design, making buying and selling online a breeze.

Check the Sparkle E-commerce development process here.

Target Audience

  • People over 18 who prefer online shopping and are open to invest in quality jewelry
  • People who effortlessly mix accessories into their everyday and work outfits
  • Couples and newlyweds
  • Gift buyers

Concept

The Sparkle concept is about celebrating the beauty of simplicity and elegance. Making it a versatile brand with jewelry suitable for both everyday wear and special occasions.

The main color palette of brown and white (earthy tones) sets the tone for a clean and inviting atmosphere, evoking a sense of warmth, authenticity and gracefulness.

Photography and Edition

All the jewelry was old and numerous stains, scratches, and engraved marks. Armed with just a light ring, a cell phone, and a simple white night table serving as a backdrop, I embarked on a mission to elevate the visual appeal of each piece.

To achieve a polished and professional appearance, I meticulously utilized Photoshop tools like the smudge and clone stamp to eliminate all original imperfections. Moreover, I replaced the original backgrounds in each photo with a clean white backdrop. This not only enhanced the visibility of the products but also contributed to a cohesive and refined overall look.

Finally, since it was a substantial number of pieces, I employed actions and batching techniques, making the post-production process faster.

Features

  • Landing page: Best Sellers, New Arrivals, Blog and Newsletter
  • Shop page
  • Single product page
  • Cart
  • Checkout

Low Fidelity Wireframes

High Fidelity Wireframes

Mockups

Image by Vectonauta on Freepik