New Life Leatherworks
Case Study
I was connected with Michael, a college student looking to start a business making and selling leather goods online. He hired me to create a professional website that would showcase his products and simplify the customer experience of buying from him.
Deliverables
Wireframes
Branding
Hi-fi Mockups
Product Photography
Tools
Figma
Adobe Lightroom
Adobe Photoshop
problem.
Micheal has the skills to make beautiful and durable wallets, but his existing site wasn't turning visitors into buyers. That's where I come in.
goal.
I set out to build a site that shows off Michael’s work, matches his vision and brand for his business, and encourages visitors to make a purchase.
Jump to section
information architecture.
Competitive Analysis
I researched e-commerce sites for small and large businesses to see how they present their products and information, and gain inspiration. Here are some of my favorites and what I took away from them:
-
Product information page layout, image quality.
-
Shop screen layout (sort by/filters)
-
Branding, giving the site a personal feeling.
Site Map
Since part of this business's appeal is buying custom handmade items, I decided we needed 2 about pages talking about Michael's story and how he makes his products. This would help visitors form a connection with Michael and gain trust in his products. I thought this would help encourage interested visitors to make a purchase. I saw this tactic used by Mollyjogger in my competitive analysis.
Wireframes
I ran my wireframes by Michael to get his first thoughts about the design. I made multiple versions of some sections, like the Home and Product pages. I wanted Michael to have a few options to choose from. Since this business is personal to him, I wanted to make sure he is involved in creating the design direction.
photography.
Simple Setup
I was inspired by the quality of images I saw on Mahabis’ site from my competitive analysis. For an online store, high-quality images are essential to convince visitors to make a purchase. In order to create our own high-quality images, I had to get creative. I put a wallet on a sheet of printer paper, set up my lighting stands, and started shooting. You can see my setup below.
Camera + Settings: Nikon D3400 with Sigma 18-35mm F1.8 DC lens, 1/80, f/10, ISO 1600.
While shooting, I thought about what customers might want to see before they buy a product. For example, I wanted one picture of the front (closed), one of the inside (open), and one showing the mouth of the wallet. Here are 3 pre-edited pictures I took of the same wallet, showing customers everything they might want to see before buying.
A white background, but the wallets look washed out.
Adobe Lightroom
I edited the pictures in Lightroom to fix any exposure issues on the product and bring out its color and texture. This was important to make sure customers will see an accurate image of what they might buy. Before moving on, I also showed these images to Michael for him to pick which ones should be on the site.
Enhanced colors and textures
Adobe Photoshop
Then, I took those photos into Photoshop to remove the background and make any other final changes. I wanted a transparent background so the products would stand out against the background of the page. This was a technique I saw done by Mahabis and TheHorse in my competitive analysis, and thought it looked really clean and professional.
Looking good on any background!
branding.
Summary
Michael has a beautiful story behind the name of his business, and I wanted to honor that in my brand proposal. While brainstorming a brand identity, I thought about qualities that could connect with the merchandise, as well as my client’s idea of a "new life.” In the end, I tried to capture feelings of freedom, leather, and nature.
Fonts
For the font, I decided to go with Roboto Slab - Bold for the headers. Slab serif fonts give the type a strong, confident vibe. I chose Roboto - Regular as a secondary, I wanted an easy-to-read font that paired well with Roboto Slab. It's a family reunion!
Colors
I created a color palette around the dirt brown color above, which represent nature and leather. I used the accents sparingly to grab the user’s attention where I wanted it to go. This was to help direct visitors towards the shop page and encourage them to make a purchase. I avoiding using colors on the shop page, so customers wouldn’t be distracted while browsing. I wanted the products to stand out on their own.
final changes.
Hi-Fi Mockups
In this stage, I added the colors, fonts, and pictures to the wireframes to show Michael a first look at what his finished site would look like. He was very happy with a lot of the design and branding, but told me there were a few things he wanted to change:
Apples to Oranges
My client felt the color I had picked for the background was too pink, and not fitting with the brand. So, I revisited the branding and came up with some options. I incorporated these options into my final design to present to him, and we ended up using a very faint orange color for the background.
Ease Decision Paralysis
Once Michael told me how many thread and leather types he was offering for customers, I realized my design using images of each choice would be too overwhelming. I switched the design to a drop-down menu to save space and not give the user decision paralysis with too many options at once.
conclusion.
In the end, I created a design that both Michael and I are happy with. I was even able to use my hobby, photography, to create an opportunity for my client to upgrade the look of his products!
I learned to create multiple options for my client to choose from, and to consult them before making a decision for the business. This was my first step into the e-commerce world, and I learned a lot about what can make a business successful on the web.
New Life Leatherworks is live! Click here to visit the site if you're in the market for a new wallet or want to learn more about Michael's craft!