Project Description

Spring Studios wanted to create a destination website with an online reservation system for booking meeting space. The site was intended to showcase the new Spring Place private membership club, introduce upcoming locations of Spring Place, and serve a resource to club members.

The Process: The client had already defined that the site experience needed to include:
  • — An acquisition section to attract new members.
  • —An online application form with functionality allowing prospective members to attached required documents, including resumes, references, and photos.
  • —A membership area, for members who already had logins and wished to managed their accounts.
  • —A room reservation workflow, for existing members who wished to book space at the New York location.

1. Competitive audit
2. Sitemap
3. Axure prototype
4. Wireframes (InDesign)


COMPETITIVE AUDIT
First, I performed a competitive audit to determine how much membership information was available on other private clubs' websites to inform our brand team's content strategy. I created a matrix logging navigational elements and site functionality of other private membership clubs, and then gained stakeholder input to rank the most common findings to determine their priority for the Spring Place site.

SITEMAP
I created a sitemap to identify approximately how many pages or screens would be needed. This was critical for defining not only the user experience, but content that the brand team needed to create for the digital experience.

Click thumbnail to view in greater detail.

USER NOT LOGGED IN USER LOGGED IN

AXURE PROTOTYPE
To assist the brand manager in understanding required steps in the website architecture, I built an Axure prototype for their feedback. This was critical for arriving at a common understanding among the team of the difference between the public-facing site and the site experience behind the login.

Click to view the Axure prototype (new window).
To enter the member area, enter any valid e-mail address and "spring" as the password.

WIREFRAMES
Desktop and mobile wireframes for the room reservation experience were created for our web development team's input prior to our art director beginning UI design. The site was being built upon a hospitality software framework (MobileSoft, implemented by IdeaWork Studios), and technological considerations that had to be addressed in wireframes were:

  • —The right to reserve space: Depending on the level of membership, the user might not have permissions to book rooms, and would be prompted to upgrade membership.
  • —Available reservations: The user may have already used the reservations permitted to them per their membership terms for the billing cycle
  • —Payment: The costs for reserving space were a la carte to membership fees, and needed to be stored to the user's account for billing through a separate system.

Booking_userflow

One of the challenges of the booking userflow was allowing the user to see the availability of several rooms across daily/hourly increments for booking.
Booking_wire3 Booking_wire1 Booking_wire2  

Project Details

Skills Needed:

UX design
Navigation

Categories:

Wireframes

Client:

Spring Place