The Challenge
How might I create an MVP website for a new business?
The recently-rennovated Mallard Hall Estate was ready for booking and needed an online touchpoint for potential clients. With just a folder of photos and some documents on the history of the estate, I would need to create the bones for their first website.
Impact
Several successes came from the launch of the businesses first digital landmark:
Rank #1
in Google search for "mallard hall" and "mallard hall estate"
50,000+
impressions from organic traffic
Catalyst
for brand new connections and leads, particularly through the contact form
After some time...
57%
increase in event inquiries
20%
decrease in bounce rate
4x
increase in form submissions through organic search
Brand Identity
Starting with logo creation, I was able to get a feel for the brand's identity.
I made choices for myself before going more high fidelity by sketching out thumbnails of potential logo directions.
First Round
Guiding words: historic, elegant, antique, classy, southern, refined
Second Round
A partial circle composition was the favorite, with cattails nodding to the pond on the property.
The Final Logo Designs
The design we landed on utilizes tapered flowing lines, which gives a soft and natural feel. To balance the rustic motifs, I used simple and clean silhouettes, breaking that up with some irregularity in the path of the outer circle. The font has a vintage feel, hinting at the history of the home.
The Research
Now that I had the beginnings of a brand identity, I could begin explorations for a website.
Broad Landscape Analysis
Mallard Hall had yet to find its niche in the rental market, so I took a look at more general and widely known competitors.
These sites provide a more objective view of properties, including room details and dozens of photos. Mallard Hall's website is an opportunity to tell a story and connect with visitors on a more personal level.
Who are the users?
After discussing with the client what kinds of people her business will attract, I compiled the main commonalities into a user persona.
With the end goal of having users contact for a booking or inquiry, the visual identity will do a lot of the work to attract the right audience, but the website design will need to be clear and informative to convert visitors.
The Structure
Based on my discoveries, I laid out a content structure with the crucial components.
Home
introduces and guides
History
tells the story
Gallery
showcases the property
Contact
converts visitors
Wireframing
These four pages would lay the foundation for the expansion of the website. The homepage would showcase the bulk of the important info in order to keep the navigation streamlined.
I decided on columns and rows to showcase the rooms and features in order to fit more details into the viewport and highlight the individuality of each piece of information.
The Design
Playing off the logo design, I incorporated elements of antiquity and elegance into the website styles.
Style Tile
I opted for a legible serif font for headings and open-sans for paragraphs to balance accessibility and style.
The MVP
Using Wix for its quick build capabilities and robust tool and resources hub, I mapped out the core navigation pages, including alt text for all images.
Home
Gallery
Contact
Research Round Two
A year after Mallard Hall's launch, it was time to gather feedback and research to improve the site.
I first took a look at three local competitors' websites (Ashourne Farms, Hermitage Farm, and Gaffney House) and one stylistic inspiration (Biltmore).
Commonalities
Strengths
Weaknesses
Though these websites have different user end goals, they implement similar navbar strategies and homempage designs to steer the path of the visitor.
A content audit of the website’s 15 pages would help me get an objective view.
To understand the current state of the website, I audited each page for content, SEO practices, and mobile responsiveness.
Key Findings
Content
- Pages lack robustness
- The homepage prioritizes quantity over quality of content
- Main navigation obscures important pages and highlights ones without key touchpoints
SEO
- Incosistencies with page titles and metadata
- Improper heading and text tagging
Accessibility
- Buttons hidden and images shifted in the mobile design
- Missing alt text on many images
- Several links open in a new window
Pages will need to be cleaned up to follow accessibility and SEO best practices. A guiding question: What are users trying to achieve by visiting the site?
Synthesize Wix analytics
~75%
of website users are from mobile devices.
→ Consider mobile first.
Google (organic)
is the second largest source of traffic.
→ Improve SEO practices.
The Redesign
Restructuring the sitemap was crucial to paving the path of the redesign.
With the research and findings in mind, I set out to redesign the website with a focus on streamlining the user experience and improving SEO practices.
Site Map Before
Site Map After
To Align with Business Goals...
Create a main CTA button in the navbar
→ Grabs attention & creates shortest path to desired outcome
Remove/relocate filler pages from navbar
→ Highlights crucial customer touchpoints
Change taxonomy to be less generic
→ Creates a story that connects with visitors
Add a page for each booking option, contained under a parent page
→ Facilitates engagement by streamlining choices
New Navbar
The navbar is an opportunity to reduce bounce rate and present quick pathways to sought after information.
New Home Page
The long scrolling homepage is reduced to its most important elements: a welcome, a prompt to learn more, links to each event type, and social proof.
New Pages and Forms
A form for each event type helps keep things organized on the receiving end while bolstering SEO and shortening the inquiry process.
Ways to get in touch
Other options for contact are provided for more general questions and inquiries.
Next Steps
The website has grown and expanded since its (and the business's) initial launch. With usability, design consistency, and SEO in mind, there are several things to be done to further the success of the website.
-
Accessibility Checks:
Assess the accessibility of each page, particularly how the history and gallery pages will be responsive to mobile -
User Testing:
Conduct usability tests to discover blockers, common touchpoints and pathways. -
More Content & Pages:
Grow the website's content to reach a wider audience.
