local business redesign

for this assignment, we were tasked with redesigning the desktop and mobile website for a local business in our hometown. I chose a local coffee shop in my hometwon Roxbury, New Jersey called Beanbury. Beanbury is one of the only locally owned speaclity coffee shops in the immediate area. I've met up with friends there often and was very interested in recreating a website that better fits their business.

after deciding on my local business, I created a project brief, a visual moodboard, and a research board to reference when creating my first designs. I gathered a majority of visual research through the business's social media. Beanbury already had excellent photography seen on their instagram and facebook and I wanted to utilize and showcase it on their website.

moodboards and research boards:

I spent time thinking about what exactly I wanted to change about Beanbury's existing website and what I wanted to add. I also thought about who the target user was and the user flow of my new design. At first, their website was lacking an about page, an online shop, and provided little to no information to view or look through. No photos of the phsyical location and no way to emotionally connect with the owners and what they're all about. About a week into this project, they redesigned their website. While they added an about page and more photography of their location and menu, I still felt a redesign was necessary.

Beanbury sells merchandise in store and through their social media but not on their website. I know they'd gain a ton more revenue if there was some way for customers to easily purchase their products through a virtual shop. This shop would also allow them to expand their products as well. Besides merch, I wanted to include an events page as analogous coffee shops in the area were hosting events to bring people in. In general, their website lacked a clear aesthetic, something I really wanted to establish as their website didn't match their location's vibe at all.

I decided to focus on the shop aspect the most by creating a shop and cart page allowing customers to purchase hoodies t-shirts, mugs, and coffee delievered right to their door. I first started by creating wireframes of my home and two inner pages. The menu and shop. I also created a basic sitemap to describe the new layout of the webpages.

sitemap:

wireframes:

After wireframes, I created my first designs of my pages in their desktop form. I created designs in two directions for their home, menu, and shop pages.

I liked the colors and font choices of my first direction and borrowed the hand drawn plant imagery from my second direction. All plant imagery was drawn by myself in illustrator. These plants were seen on their in store menu and I thought it would be good to establish them throughout the website's aesthetic as they're only seen on their menu in the website. This helped add character and uniqueness to their website yet still maintained the clean look I was going for. After choosing my direction, I edited the home, menu, and shop pages and designed the about and cart pages to match.

for the shop page, I created some mockups for some items to maintain the same aesthetic as their photographed merchandise. I added coffee bean bag mockups and a gift card mockup.

final desktop designs:

final mobile designs:

when creating my final presentation, I added a persona, narrative, and objective to describe the end goals and purposes of my redesigns. I revised my design brief, sitemap, digitized the wireframes for each page, and recreated my moodboard to better fit the final designs.

final presentation:

video example of user flow desktop:

video example of user flow mobile: