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