RNB Slice - revised (1).png

RENDEZVOUS NORTH BEACH

Responsive web design for Rendezvous North Beach

Rendezvous North Beach.png

RENDEZVOUS
NORTH BEACH

 
 
 

PROJECT OVERVIEW

A responsive web design for an independent retail business, exploring potential retail avenues beyond traditional e-commerce.

 
 

PROJECT SCOPE

Rendezvous North Beach, a San Francisco based vintage and modern resale clothing boutique, is searching for the best way to establish their web presence. They currently have a brick and mortar store that they would like to establish as a part of the community and an Instagram account that serves as their main digital presence and means of purchasing online.

My assignment was to create a responsive website that would act as a point of reference for the business as well as a more stable means of purchasing their items online. The client mentioned her target audience would be women, ranging from their late 20s to early 60s.

Due to the client’s limited manpower to maintain the upkeep of the website, I built the website on Squarespace. This allowed me to create a functioning website and also provide the client with analytics and a relatively easy way to update the site in the future.

 
 

ROLE

UX Designer and Content Strategist

PLATFORM

Web

DURATION

3 Weeks

TOOLS

Pen, Paper, Google Docs, Omnigraffle, Sketch, InVision

 
 

THE CHALLENGE

Our users are unclear as to what type of business Rendezvous North Beach is and how to go about purchasing items because there is no functioning website. An additional challenge is that the owner and stakeholder does not currently have the manpower to maintain an online shop.

THE SOLUTION

By creating a responsive website that highlights the items available for purchase, explains the concept of the business, and draws attention to their community based events, we believe it will lead to increased online and physical foot traffic.

 
 
 

RESEARCH

STAKEHOLDER INTERVIEW

I spoke with the client and owner to understand the needs of her business. She mentioned a few things that she wanted to emphasize on her website:

 
Stakeholder Interview.png
 
 

Clarity on her business (what they sell), how to purchase (since there is no online shop at the moment), and events that are being hosted at the physical store (wants the shop to be a part of the North Beach community). This would help inform my design decisions as to what to include on the website and while also balancing the desires of the user.

 
 

USER INTERVIEWS

I also wanted to understand the needs of our users, so I conducted a few interviews with women in their early 30s to early 40s and who have purchased from vintage and consignment stores in the past. This would help me format the structure of the website and provide insight for the client to strategize the best way to reach her customers.

 
RNB User Needs.png
 
 

CONCERNS

  • Fit and quality of items

  • Ability to return items

SEEKING

  • New inventory / items

  • Nicely styled images for inspiration

 
 

Regarding their browsing and shopping habits, the users would use both desktop and mobile devices to access a business’s website - desktop for more serious browsing and mobile for casual browsing. This reinforced the need to make the website mobile friendly.

 
 
 

COMPARATIVE ANALYSIS

When I first spoke to the client about her business, she referenced specific websites that she wanted to emulate. And as she described her business practices, they were similar to a growing number of vintage and consignment accounts on Instagram that began on the social media platform and slowly grew into full fledged businesses with brick and mortar stores and more traditional online shops.

 
Mille - online shop cited by client

Mille - online shop cited by client

Initial iamthat shop Instagram account (L) and eventual online shop (R)

Initial iamthat shop Instagram account (L) and eventual online shop (R)

 
 

A few of the main sites and accounts I looked at included Mille, Doen, Jenni Kayne, Noihsaf Bazaar, Courtyard LA, and I Am That Shop. I made note of some common themes:

 
 

FEATURES

  • Detailed description of items for sale

    • Included multiple measurements of the actual garment

  • Prompt and immediate communication with the customer via comments

IMAGES

  • Highlighting items for sale

    • Scrollable images for browsing or image of category highlight

  • Many styled images on the homepage - inviting the user to discover more

 
 
 

DEVELOP

 

SITE MAP

With my preliminary research, I created a site map that I thought would best serve the user and the client. To provide the user with a clear idea of the business’s concept, encourage them to shop, and to attend community based events at the physical store.

 

Site Map - Click to enlarge

 
 
 

SKETCHES

Taking into account my research, the site map, and the constraints of Squarespace, I began to sketch some options for the client.  

 

Option 1 (chosen by client) - click to enlarge

Option 2 - click to enlarge

 
 

Although the client did not have the capacity or “following” to maintain an online store, I also sketched a layout that included a more traditional online shop. The Etsy and Instagram accounts (ex: I Am That Shop and Courtyard LA, respectively) that began selling through alternate mediums eventually created their own websites to host an online store. Once the client’s business is more established, she may find an online shop to be beneficial.

So while the online shop may not be immediately in place, I still wanted to provide her with the option to easily integrate and set it up if it is needed in the future.

 
 
 

WIREFRAMES

Building off of the sketches and feedback from the client, I created my initial wireframes to design more detailed screens that would address the client’s business goals and user needs.

Taking the client’s main purpose of the website (providing information about the business, guidelines on how to shop, and promoting events), I designed the homepage to highlight these three actions.  I also included a scrollable Instagram feed to promote new merchandise and the client’s often times styled images (for the user).

 

Low fidelity wireframes - click image to enlarge

 
 
 

VISUAL DESIGN

Based on the websites that the client had cited as “aspirational,” I created a moodboard with color palettes and various font combinations to choose from. She had described the style of her merchandise as a mix of modern and classic vintage - and I wanted the fonts to represent that combination. Ultimately we chose a serif font, Kepler Std (something more classic, feminine) to go with a sans serif font, Futura (more modern).

She also mentioned being drawn to more neutral colors. Taking that information and the imagery from the sites that were referenced, I looked for more delicate, feminine, and tranquil images. From there, I pulled colors from the images to create a soft but neutral color palette.

 

Moodboard (L) and Style Guide (R)

Homepage - highlighting the merchandise, how to shop, what sort of merchandise they sell, and events.

About (L) and Shop (R) with instructions on how to shop

Visit (L) and Events (R) with date, time, location, and details

Lookbooks - providing the user with styled images for inspiration.

 
 
 

REFLECTIONS

 

RESULTS

By the end of the 3 weeks, I was able to submit a solid foundation of the website to the client so that she will know what her website will look like and what to include on it.

 
 

NEXT STEPS

Currently, the high fidelity mockups only include placeholder images and text - I plan on creating an inventory list so that the client is aware of what content she will need to create, upload, and update.

Additionally, from my competitive research, I have found that vintage and consignment accounts that initially started from social media accounts eventually created their own websites / online shops (after they had built up enough of a following). Because of this, I also intend on creating additional wireframes to show an alternative website that can integrate an online shop without disrupting the overall structure of the website.