The asks
- Design and build an easy-to-navigate and use e-commerce website for a brick-n-mortar shop and kitchen studio in historic Fredericksburg, Virginia
- Ensure users can easily order products and easily register for classes
- Showcase the locations, products, and chefs using provided photos
- Design a clean, sophisticated logo that represents both components of the business: the shop and the kitchen studio
- Reflect the company’s clean, sophisticated style
My Role
Designer and front-end developer for Rambletype
Team
Overseer: Chris Muldrow, Rambletype CEO
My Process
After learning more about the clients and their style during several virtual meetings and virtual tours of their locations, I understood their desire for a clean e-commerce site that showcased their locations and products and allowed customers to easily purchase products and register for cooking classes.
Store owners and chefs at a Whittingham event
Understanding the user
I gained an understanding of the client, their asks, and their desires during several virtual interviews and a virtual tour of their locations.
Designing the logo
I had to figure out how to convey both components of the business (the shop and the kitchen studio) in a single logo.
The client preferred a logo made up of only letters–no graphical elements. Here are some of the designs I presented to the client:
wireframing the site
The client wanted a site designed mainly around photos and images–both ones they provided and ones I curated. Here is a proposed layout.
Determining typography and colors
I presented these typography and color palette choices.
Final Site
Final thoughts
Lessons Learned
- Whittingham was one of the first site I designed, so I learned a lot about both website design and customer service. I was able to continue working on my communication skills in meetings with the clients.
- I learned valuable lessons about prioritizing the client’s needs and how to have successful meetings with clients through the mentorship of my boss.
- I watched YouTube videos to figure out how to navigate Woo-Commerce, the plug-in I used for building the e-commerce portion of the site. By the time I finished, I felt like a Woo-Commerce pro and was later able to efficiently build many other e-commerce sites.
tools used
- Woo-Commerce
- Figma
- Adobe Illustrator and Photoshop
- Divi