Deployed Responsive Landing Page
Role: User Research, Defining and Ideating, User Funnel, Design, User Tests, Development, Debugging, and Deployment.

Project Duration: 4 weeks
Deployed Responsive Landing Page
The Problem
By broadly targeting all 6 of their locations at once on their homepage, LOGE (Pronounced “lodge”) is missing an opportunity to funnel the user into a lasting impression of the value for their destination of choice.
What kind of redesign can successfully “wow!” the user of new and current locations as LOGE continues to expand?
Responsive Website Redesign
About This Project
This Project was part of a 24 week UI/UX course through the University of Oregon.

Role: As part of a team of three designers, our roles interchanged throughout the User Research, User Interface Design, and Usability Testing phases.

Project Duration: 4 weeks

The Design Process

2. DEFINE & IDEATE

User Persona  •  Problem Definition  •  User Insight Statement  •  Competitor Analysis  •  Feature Prioritization

3. DESIGN

Product Funnel  •  Paper Sketches  •  Lo-Fi Mockups  •  Style Guide

4. TEST & ITERATE

User Tests  •  User Feedback Iterations  •  Hi-Fi Prototype

5. FRONT-END

Github  •  Development  •  Testing & Debugging  •  Deployment

1. DISCOVER

User Research • User Survey • Affinity Diagram

Research

User Interviews
Our team conducted 4 user interviews, with the purpose of designing a solution to improve the user’s landing experience on the website, and encourage them to book a stay.
‍
Goal

To understand how people feel when they book accommodations online and identify the key factors that influence their decisions.
‍
Core questions
  • What does "comfort" mean to you when adventuring outdoors?
  • Who plans your camping or lodge situation when for an outdoor or recreational trip?
  • What features do you like/dislike when booking online accommodations?
  • What was your first impression of the LOGE website?
Here are some insights we picked up on during our interviews:
Survey
While conducting our interviews, we also used an anonymous survey to help narrow down their primary demographic further, and identify any additional pain points and motivators regarding the travel planning process.

Survey findings from 11 participants:
Pain Points
Motivators

Affinity Diagram

After scouring the interview dialogs for insights, we began grouping them into related clusters. The small orange stickies indicate a trend in insights, with the large orange sticky defining the overarching trend of the category.

Here's what we learned

Our user interviews and survey data revealed that transparency in accommodations, compelling imagery of the destination, a convenient location and ease of booking are among the biggest factors for deciding their stay.
Knowing the amenities offered is a must. Description on current site unclear.
It’s important to have creature comforts in the outdoors.
Trip planning is most common frustration.
Key information such as time and location were at least easy to find.
Value is often in question with the rise in hotel prices.

Definition & Ideation

User Persona
Our methodology will involve an interview process that targets the users experience in outdoor trip planning both offline and online. A google survey will also be deployed to uncover additional motivators or frustrations in the online booking experience.
Problem Definition
We have learned that users need better online transparency in the experiences they're booking, so that they can cut to what matters most: a comfortable time in nature.  

LOGE was designed to deliver a welcoming retreat for outdoor enthusiasts with ease of booking, compelling scenery, and must-have amenities.

How might we show users that LOGE is the most optimal way to enjoy an outdoor adventure with the comforts of home?
By carefully crafting a landing page that puts LOGE’s curated experiences, amenities, stunning visuals of the natural surroundings, and a wholesome vibe front and center, we can show our users how easy it can be to Live Outside and Go Explore.
Competitor Analysis
Our methodology will involve an interview process that targets the users experience in outdoor trip planning both offline and online. A google survey will also be deployed to uncover additional motivators or frustrations in the online booking experience.
  • Airbnb Plus’ touts a clean homepage design, transparency, and brand recognition, but regular Airbnb listings might crowd these out.
  • Getaway fosters unplugging and digital detox, but outdoor recreational adventure may still be out of reach for less experienced planners.
  • In the revived local hotel space, LOGE sets themselves apart by being closer in proximity to the outdoors and offering gear rentals.
  • Traditional campsite are rarely, if ever, up-to-date on information, and each experience is based on the camper’s planning savviness to the outdoors.
I like, I wish, what if?
The best current market trends were combined with a wishlist of features that reflected our users’ needs as well as some that could immediately improve the current site.
Feature Prioritization Matrix
Once voting was complete, only the most impactful features with the highest technical and fiscal feasibility would make the cut. A couple examples of “wins” were placing emphasis on LOGE’s mission to make the outdoors accessible with gear rentals, as well as stunning imagery and earthy colors to evoke adventure.
User Product Funnel
Opting for a landing page that focused on one unique LOGE location at a time would make it easier for the user to understand the true value of a stay at each specific location, and encourage conversion to choose LOGE over their competitors. The funnel below outlines how this would look for their Westport location it is a known surfing hotspot.

Design

Sketches

We wanted something modern, that would meet such needs as having important information front and center, giving users a preview of the market with thoughtfully placed image sections, while still drawing attention to their newsletter and donating with CTA buttons.

We took each other's strongest ideas to emerge with a consensus for our homepage's layout.

Digital Wireframes

Our idea – clean, unified & user centric.

Desktop

  • No primary navigation for simplicity
  • Fixed "Book Now" CTA button exerts hierarchy
  • Layout encourages immersive imagery
  • Value Propositions funnel user to CTA section

Mobile

  • Content cards scaled for mobile grid
  • Font styles for small screens (WCAG)
  • Instagram Testimonials bare social proof
  • Image dimensions adjusted for mobile

Style Guide

LOGE effortlessly facilitates access to the outdoors and Westport's unique surf scene for both novice and experienced explorers. By blending cool earthy tones with festive colors inspired by traditional surf culture, and incorporating authentic imagery of the cold northern beaches, LOGE can visually convey the experience to users.

This allows potential guests to fully immerse themselves in the vibrant surf culture and fosters their enthusiasm to book a stay with LOGE.

Testing & Iterating

User Tests & Feedback

Upon styling our page, and integrating interactions, we began testing our design with users to gauge our efforts in improving the user experience thus far.

We iterated on our design based off of the feedback collected from our user tests, and then presented it to our stakeholder for review and final thoughts. Below are some of our key findings, and iterations based on our process.
We kick off our feedback with tidying up the value propositions so that they’re more concise and easier to digest as the user scrolls. It’s imperative to continue to funnel the user towards our CTA’s as they browse and compare their lodging options.
We prioritized the convenience of “beach & bath towels” over “eco-friendly toiletries” since we included a section that dedicates their commitment to sustainability.
Other major feedback pointed to the opportunity to include LOGE’s address and contact information in the footer which is a familiar spot for most users.

High Fidelity Prototypes

Our design, infused with authentic imagery and carefully refined based on the feedback we received.

Desktop

  • "Book Now" CTA now fixed surfboard button
  • Updated headlines and amenity icons based on user feedback
  • Testimonials with authentic imagery from instagram for social proof.
Prototype

Mobile

  • Fixed CTA now works on mobile
  • Imagery and cards responsive for mobile
  • Hero text and image aligned for best contrast
Prototype

Front-End Development

To kickstart the front-end development process, we collected comps and assets. Next, we set up a GitHub repository for hosting the website and tracking changes at each stage. Using HTML5, CSS3, JavaScript ES6, and Bootstrap 5 in the VS Code IDE, we gradually built a complete landing page, ensuring every step was recorded and implemented.
GitHub Pages Repository

Deployment & Live MVP

To publish the repository as a live page, a link to GitHub Pages was created. Click on or snap the QR code bellow to see it for yourself! At this time the landing page is responsive for desktop resolutions – Tablet and mobile resolutions are in the works!

Looking Ahead

Impact

Designing a landing page for LOGE Hotels presented us with an opportunity to showcase everything LOGE Westport has to offer while also guiding users through a seamless funnel experience that encourages them to book a stay. With a landing page approach and the right SEO in place, any user can dive into an immersive preview of each of their locations.

Future Development

Our team intends to refine our MVP by iterating through our process for mobile responsiveness of the live site. A final MPV may be presented to LOGE along with gathering any feedback from their team as well.

Other Projects

Hollywood Farmers Market

Responsive Website Redesign

Bridging the gap between residents, market stakeholders, and local venders for a  website redesign that represents the entire community!

Washington DOL

Responsive Website Redesign

Diving into the agency’s site heuristics and information architecture for a redesign that welcomes all Washingtonians.
Resumé
info@josuebravo.design
Copyright © 2023  Josue Bravo