The Toasted Marshmallow
A solo design sprint for a cozy cabin website.
Overview
About two years ago, I was contacted to create a logo for the Toasted Marshmallow cabin in Blueridge, GA. Two months ago, I was asked to create a website for the very same cabin in the new year, starting January 2021. And then a week before Christmas, the owners asked if I could have it done by Dec 30, 2020. Yikes.
But the clients are very nice and I have done work for them before. We sat down and outlined the MVP. ( Minimal viable product. I love using design anagrams!) From there, I structured this entire project like a design sprint and delivered a cozy website for a cozy cabin.
Problem Statement
Travelers want to take a trip somewhere beautiful, have the option to explore new places, and most want to bring their amazing dogs with them. How can we convince them that the Toasted Marshmallow will more than satisfy that wander lust?
Users and Audience
Travelers with a love for the outdoors, beer, and great views. Would like to appeal to ‘bouchie’ bloggers and instagram accounts to get more exposure for the brand.
Roles and responsibilities
I was the sole researcher, designer, and web-builder on this project.
Scope and Constraints
The time limit was one week, and due to COVID and the limited audience, it was difficult to find user’s to interview.
Tools Used
Adobe XD, PSD, AI, Wix
Schedule and plan for the design sprint.
Process
The first sit down happened the night before the sprint began, when myself and the clients sat down to determine an MVP. The main reason they wanted a site was for people to know things, for the user’s to be drawn in, and book a stay.
It should have great photos of the truly amazing surroundings, highlight their amenities, and show them what is nearby to enjoy. Everything else, the bells and whistles, could be addressed after the New Year. I also asked my clients to define their target audience and created a proto-person:
Notes from MVP meeting..
Proto-persona or target audience.
Day 1:
Branding & Research
The Toasted Marshmallow already had a very strong brand and presence on social media, so we had a solid base to go off of. We sat down to hammer out the details like colors and fonts and determined the photos we should use.
It should be noted that there will be a difference in social media photos and the website photos, as their social media is highly saturated, and we want to convey a more realistic view of the cabin via the website.
Poll and survey results.
Guerilla testing notes.
Towards the end of the day, with my long-suffering roommates, who have helped with so much research in the last few months, agreed to do a quick card sorting activity with meI used the categories and terms the clients requested.
Card sorting results.
Style tile.
When starting the research, I posted a few polls, via Instagram and Facebook, for quantitative data. There was also some guerilla testing done, socially distanced of course. The sessions were very quick, only 3-5 minutes long and consisted of asking what people look for when searching for a cabin getaway. Some insights include:
• People are very drawn in by the aesthetic of the cabin, and then the amenities.
• Several indicated that they wanted to know the local breweries and wineries and that it was a big part of choosing
where to go.
• The research also validated our approach to the photos, as they enjoyed instagram, but wanted more realistic
photos on the website.
DAY 2:
Define
I hunkered down with some coffee and began organizing and analyzing all my data. The first thing that came together was the user persona, based on the client’s defined audience and the data, which shows that women were mostly the ones who were blogging and posting, and so in many couples, they were the ones searching for places to stay, and confirming with their partners.
Then I combined all the data from the various polls, surveys, and guerilla testing to make an affinity map, which helped to make this feature prioritization chart. I was able to define what the user needs to see first, and what is less important.
User Persona
Affinity Map
Problem Statement:
" Travelers want to take a trip somewhere beautiful, have the option to explore new places, and most want to bring their amazing dogs with them. How can we convince them that the Toasted Marshmallow will more than satisfy that wander lust? "
Ideation
When we began discussing this site, the clients sent me some sites they enjoyed, and some notes about what they liked about them. I took it upon myself to take a closer look and conduct some quick heuristic analysis (apologies for the horrible handwriting, but it makes sense to me, and this was a sprint.
Heuristic evaluation notes.
And here we arrive to my favorite thing; sketching. It’s one of the most helpful brainstorming tools for my artistic soul, and it resulted in one idea that the clients, users, and myself really enjoyed.
Sketches for the wire frames.
The horizontal book now banner, that added some color to the site, allowed the user to book their stay on every page, and was unique to the Toasted Marshmallow. It was also aggressively easy to spot.
The Booking banner at the top of each page, under the navigation. Normal vs. Hover.
The last thing for today was to create the Site map, which would tell me the amount of pages I would be wireframing and testing tomorrow.
I drew from the card sorting activity, and using the results of the data showing that women were more likely to search, find, and choose the cabin, used a majority of the ideas that came from the ladies cardsorting.
Site Map
DAY 3:
Wireframing & Testing
Using the sketches from the day before, I built a low-fi prototype for a testing plan put to together to determine if the site will be easy to navigate, and user's will be able to get around the site using the verb-age the clients had chosen.
I came away with some great insights about how to structure the page and make adjustments. Some insights included:
“ I want to see pictures first, when I click on CABIN, so I can see the inside of the place. All of the text can be below it.’'
“ Seeing the blogs and stuff is cool, but I’m more interested in the beer and food, and how close it is.”
Lo-fi wireframes used for testing.
DAY 4:
Hi - Fi Wireframes
Fresh and well-rested, it was time to finalized the look of the website. Using the style tile from what seemed like ages ago, I applied it to the lo-fi wireframes and came away with some hi-fi images that I sent to the client. I consider myself lucky that the clients responded quickly, and approved the first round. I could move ahead and begin to build the website.
Hi-fi wireframes.
We used Wix to build the site, as I find their editor is more designer-friendly and customizable, as is their responsive design, which is a huge factor in designing a site. After some clerical work and account management, the build began.
DAY 5:
Responsive design for mobile.
Laptop with homepage.
It took the entire day, and I learned A LOT. Wix continued to help, as their help center was on point. I was doing a few things I had never done before, and some massive research while building the site.
-
The clients wanted a calendar that would show availability for the cabin, which required it to draw from all their booking sites; Air BNB, Trip Advisor, and VRBO.
-
ISSUE: without having a hotel/business account, Eix only allows two calendars imported to their availability calendar.
-
ISSUE: The calendar was not very customizable under their current plan.
-
OUTCOME: Based on data from the previous years, it was determined that Trip Advisor was not needed on the calendar, as only one reservation was booked in the last two years.
-
- Integrated Google reviews were a MUST for the client, as they had positive reviews already and wanted it to stay up to date. I was able to use Elfsight to create a Google review widget, and embed it in the Wix website. The result was extremely successful.
-
Unfortunately, due to COVID and other factors, the list of places nearby was extremely outdate, so it took time to research and find new business in the area.
-
The clients contacted me at the last minute, and provided a list of the new blogs and features they were in, which required a large amount of photo gathering and editing.
The added components and increased content on the Explore page took its toll, and I was unable to complete testing before finishing it for the clients. Still, the site was done and the Sprint was over. After editing a few things in Wix’ mobile editor, the site was done. For now...
CONCLUSION :
This wasn't my first time working with a tight deadline, but it was my first time doing this type of project in such a short time, by myself.
I would be curious to see the outcome if I had one more designer or researcher working with me, but over all, I am very proud of my work here. The clients are extremely happy with it, and have some ideas for things to add in the new year, like their Toasty Perks program, and some map widgets for direction purposes.
It was great to be a part of this project, from the creation of the logo, to the growth of their brand.
Check out the site below, and consider booking an amazing trip for yourself!
