melanzana
Melanzana is an outdoor clothing company in Leadville, Colorado. They cut, sew, and sell their products out of their storefront and direct to consumer through their website exclusively, making this company a true small, local, grassroots business; "[their] commitment to locally brewed apparel puts quality, soul and authenticity before quantity".
For this project, I built Melanzana a new and modern website, using their mission and brand to drive my design decisions.
the backstory
Even before I knew I wanted to be a designer, I knew I wanted to redesign Melanzana's website. The user experience is frustrating and the visual design is stale. It sometimes allows you to buy products online, but at times, you can only buy their product in store because of limited stock. During the times when you can purchase online, you can't see a photo of the product you're purchasing in the color you've chosen. As a repeat customer of Melanzana, I know the quality of their products, and the website doesn't do a great job of portraying it. I've gotten the same feedback from friends and family over the past few years, even before conducting more formal user interviews.
Here's a screenshot of their homepage when I started this project:
User interviews
I recruited users via a survey, and found five people to interview who had used Melanzana's website in the past to either browse products or purchase a product. A few key themes emerged about the usability of the website:
Users want to be able to visit a women's or men's product page.
Users want to see photos of the products in different colors.
Users don't think the website is visually compelling.
Users love that they are supporting a local, small business.
research
In addition to user interviews, I performed a card sort to determine the information architecture of the new site design, and a competitive analysis.
Melanzana only has between 10-20 products, so the card sort yielded the same results with each participant. The existing site's main navigation options are: All Products, By Function, By Fabric, Kid's, Other Goodies. My card sort participants wanted: Men, Women, Accessories, Kids. Because the users I spoke with loved Melanzana's story as a local business, I ended up adding "About Us" as well.
The competitive analysis was tricky, since most online stores that sell outdoor gear are larger businesses than Melanzana. I ended up looking mostly to Mountain Standard for inspiration, since they are the most similar in terms of size and overall brand presence.
Personas & USer flows
Paper Sketches
After compiling my research, I started sketching on paper and coming up with different versions of my home page, product page, product detail page, and checkout process.
Before going into Sketch to wireframe, I got feedback from my classmates on what felt the most intuitive by using a paper prototype.
wireframes
After testing multiple versions and layouts of the site with a paper prototype, I built out low-fidelity wireframes in Sketch.
final: Mid-fi mockups
This project required mid-fidelity mockups as the final handoff. The screens shown represent Mountain Town Claire's user flow.
