Upstaged Events
A responsive website for a boutique picnic and party rental company in the Bay Area
Background
Scope
Upstaged Events is a boutique party rental company in the Bay Area, founded in 2020 and recently sold and transferred ownership. The new owner, Kaylee, wants to take the current business to it’s full potential- offering event planning, coordination, event styling, and rentals.
Responsive website
UX/ UI Design, user research, user interviews, user testing
My role
Tools
I worked as the sole UX Designer with the client/ business owner. I conducted user research, user interviews, wireframes, user testing and prototyping, and final hi fidelity screens.
Figma, Miro, Canva, Photoscape
Problem
When Kaylee took over ownership, the business utilized social media- primarily Facebook and Instagram, to market the business, gain customers, and share information. The business did not have a website platform. Kaylee wants to create a website for the business to enable potential customers to learn about the business offerings, better communication, and ease of use of the business.
Goal
Upstaged Events needs a website so potential customers can find the business, easily see what the business offers, and seamlessly contact the business to reserve their event or rentals.
Understanding the Business
Research
In order to provide Kaylee with a website, I needed to first understand her business and they way she envisioned it. I then needed to understand the users that would be using her services so I can design a website that best serves both the business owner and the clients. I did a client interview, competitive analysis, and user interviews.
Client Interview
Upstaged Events is a boutique event rental company, specializing in luxury picnics and temporary bar set ups. The focus is small, boutique events and picnics.
These are some of the things she envisions:
I looked at four different platforms of companies that have event rentals. I focused on the ways the websites were organized, and the inventory section of the sites since this is something the client specifically wants.
Competitive Analysis
Key Takeaways
Accurate pictures of the items is very important.
1.
Users want to see the price of the services and items clearly shown on the website.
2.
Users want to be able to complete tasks online such as payment and would prefer to be able to do it from the website vs. having to go in person or contacting the business to get more information.
3.
How might we help people planning an event efficiently reserve event rentals to elevate their event?
Design Process
Visualizing the Solution
Site Map
The website was to include a Services page- a page of the services the business offers, primarily boutique picnic packages. The Products page includes all of the products, and rental prices so customers can create a wishlist of items they want to rent. The Gallery/Lookbook includes past events for inspiration.
Task Flows
I wanted to focus on two task flows for the design: Finding an Item to Rent, and Contact Information
Wireframes
When designing the wireframes, I connected with the client for some design choices to ensure she was part of the planning and designing process. She was presented different options for the navigation, and for some of the pages I made multiple designs for her to choose from.
I designed three landing pages for the client to choose from. Two were similar with an expanded version and a shorter version, and one included more information throughout the page, spread out. The client chose design 2 when she was presented these designs.
Exploring landing page design
I designed the rest of the lo fi screens, sketching first and then digitized them. I designed an About page, a Contact page, a Services page that showcases each of the packaged services the company offers, a Lookbook page that is a gallery of photos of past events for potential customers to looks through, and a Rentals page that includes all of the different items that customers can rent. I designed both a desktop page and mobile page for each screen.
Desktop and mobile designs
Creating the Visual Design
I used the client’s inspirational mood board, and pieces from the logo to come up with the visual design of the website. I also had the client take part in some of the design decisions.
Color Palettes
The client wanted a neutral color palette, I went off of the logo that had a mauve-rust color (#AE5F4E), and came up with a few color palettes off of that for the client to choose:
Style Tile
I put the logo and all the design elements together and had the client approve it all before moving forward with high fidelity design.
For the font, I gave the client a few options. For the header, I looked for fonts that presented a boho and modern aesthetic. For the body we explored sans serif and serif fonts, and went with Montserrat, a sans serif font with a lot of curves to tie in with the boho nature aesthetic of the business.
This is the final visual design:
Prototype and Testing
User Testing
Two task flows were tested by four participants- Finding a rental and Contacting the business.
Iterations from Testing
Change of Nomenclature
Landing Page
Item Page
The item page was the last iteration I explored. Some of the users stated they needed more clarification on pricing- if it was per item or for a set. They also felt being able to add to a wishlist would be helpful so they can see a total for the rentals they are requesting.
I first had to check if Squarespace had a wishlist feature available. Due to the client’s budget, she would be making her website from Squarespace rather than hiring a developer so there were constraints in the design. I found that Squarespace does not have a wishlist feature, so due to the constraints I could not add this.
I decided to add details on the item page that the customer must contact the business in order to send a rental request and get a quote. I also added a button to go to the contact page right on the item page so that this was clear to the customer.
Final Design
Desktop
Mobile
Final Thoughts
This was my first project working with a client and building a website for them. I learned a lot through out the process. I had to first do a deep dive into the business and the client to learn about her goals, style, and direction of the business. I really had to utilize empathy, and step into their shoes and design for them, while also making design choice for the whole user experience. I learned a lot and look forward to creating more products for the real world.