e-commerce branding & website building
I was the UI and graphic designer responsible for creating a responsive e-commerce website that complements Modern Mettle's minimalist jewelry line and enables users to find and select items quickly. My role was to design the layout from concept to launch.
Role:
UI Designer: User Flows • User Testing • Mobile-First Design • Wireframing • Prototyping
Graphic Designer: Branding • Product Photography
Status:
Launched in 2018; on hiatus for 2021
Tools:
Figma, Sketch, Illustrator, Photoshop, Wordpress, WooCommerce
Branding, Logo & Linesheet
I began the design process by designing a logo, branding guide and linesheet.
This jewelry line is modern, minimalist, and uses a lot of blue gemstones, so I used a modern typeface with geometric accents and a seafoam blue and bright pink color scheme.
The filled-in shapes in the O, D, and R mimic the shape of their popular stacking ring and bar ring.
Userflows & Wireframing
I mapped out user flows and sketched low-fidelity wireframes with pen and paper. By using sketches, I was able to quickly reconfigure the layout until I came up with a design that enabled users to complete the user flows.
User Testing
I conducted user tests and asked users to add two items to the shopping cart and observed them while they clicked around in the prototype and talked through their thought processes. During the testing phase, I noticed that the users had a difficult time increasing the quantity because the buttons and margins were too small. I increased the size and margins of the quantity buttons and used a larger font for the price.
Wireframes for Responsive Web Design
The website has a minimal UI, with square thumbnails to feature each item. Clicking the thumbnail image opens a product page with a full description and customization options. The checkout page features secure and fully integrated credit card and PayPal payment options.
Takeaways
This process was a good exercise in creating visual distinction between content using only font size and a greyscale color scheme. Because the products are so minimal, I didn’t want to use color to distract from the product photos, and had to focus instead on emphasizing important information by relying on font and placement.
I used comparative research to see how other companies approach e-commerce sites. Many of them have a large number of products and use their landing page to showcase their goods in a look-book style organized in a variable grid design. I felt that this was too complex for this small product line, and that my users would want to see available items in individual photos organized clearly on the homepage. My test users enjoyed the simple square photo grid and felt that it was easy to read and navigate.