Improving discoverability and mobile performance with visual navigation and responsive design for Ray's indoor bike park

Improving information
scent and mobile performance
with visual navigation and
responsive design for Ray's
indoor bike park

View of a woman sitting at a desk with two iMacs. One with the Ray's website on screen.

Date Completed

February, 2018

Overview

I set out to completely overhaul Ray's site and produce a solution that delivers one-hand operable mobile performance while expressing the style of the business and brand. These changes made basic information more accessible and allowed the ray's staff to update perishable information and expand the products they offer in their online store.

I acted as a UX team of one for this project while consulting with other Webflow developers through online forums.

View Prototype
Screenshots of the revised site for Ray's

Process

learn

To better understand Ray's
as a business and a brand, I
purchased a season pass and started riding the at the park on a regular basis

Discussions with Ray's staff allowed me to gain a better understanding of the business and the different ways it serves the biking community.

Visitors to the park who also rent bikes are the most profitable opportunity for Ray's. This makes special events hosted by Ray's profitable endeavors. It also means that new visitors are equally important as many will not have a bike suited for much of the park's terrain.

Business goals

  1. Improve search ranking to drive additional new visitors to the park who are likely to also rent bikes.
  2. Rely less on Facebook and instagram for advertising and documenting special events.
  3. Improve the online store to allow for the sale of all of the products offered by the shop at the park.
  4. Resolve the technical and financial problems surrounding the updating of information on the Ray's website.
Image of a Ray's patron enjoying the park
understand

Having identified business
goals for the rays site I
headed to the park to talk
to Ray's riders

Patrica

Image of women speaking to the attendee's of woman's day at Ray's

"With the stress of life these days, Ray's was a breath of fresh air. I found a freedom and a connection to people that helped me see what was important. The women's weekend offered myself and many others a connection to the joy of riding, and the joy of just being me. The friendships I gained this weekend will probably last a life-time and that is a great thing!

Takeways

  1. A facebook page was created for the event which was great! Ray's could really use a forum on their site to keep people connected and combing back to the site.
  2. I think Ray's should make more of experiences like mine. Maybe a section of the site — Ray's stories?
  3. My sister is a Girl Scouts troop leader. She thinks the park could be something that they do as a skills building endeavor. They do this for other sports but not cycling of this type.

The McCallan's

The McCallan' family with their bikes in fron of Ray's

Ray's is a true gem when your tween is an adrenaline junkie. This place is huge!  And cool looking. Murals, fireplaces, TVs. There are rooms with different difficulties so everyone is challenged. People travel from all over the US to ride here. We ran into a dad with his 2 young sons that drove 6 hours to ride the weekend, and saw license plates from all over.

Takeways

  1. We traveled from out of state and would have liked to see more information on the Ray's site about other attractions. We found East rim trail online and id some riding there the following day.
  2. It would be great if Ray's partnered with a lodging provider were our family would be likely to meet others visiting the park.
  3. We were not confident about the information on the Ray's site being accurate and up to date and called to talk to someone while planning the trip.

Nathan

Image of Nathan and his friend on top of a ram at ray's

We went here for an event with the Wounded Warrior Project. The facility is amazing and the staff did a great job giving us some pointers for beginners to the space and sport. They took a mob of inexperienced noobs and had us all over the place after 8 hours spread across two days. The transformation was priceless and the staffs input made that possible. Can't wait to go back.

Takeways

  1. Ray's is hard to find. GPS got us to the factory which covers a city block, but we had to call to find the entrance. There are no signs and no map online to get patrons from where GPS ends and the entrance.
  2. There is no section of the website that upsells Ray's as a venue for events and corporate programming.
  3. I would have loved to purchase a hoodie or t-shirt memorializing the event.
define

To support Ray's patrons with easy access to basic information I developed a sitemap for a one page cards based solution perfect for mobile users

There were two fundamental considerations for supporting the Ray's marketing team and patrons.

  1. The site structure needed to allow for adding the content patrons asked for in interviews without adding navigation categories that would be new to users familiar with the site.
  2. The way the site would be constructed needed to allow for adding new content in an efficient way, and as much as possible allowing these changes to be made by Ray's staff using the Webflow editor.

To develop navigation with an instantly understandable gulf of evaluation I defined rules for best practices

  • Prioritize consistency
  • Design clear interactions
  • Avoid deep navigation
  • Design for responsive compatibility

Findings from interviews

Ray's patrons

  1. Improved directions from where maps applications end at the perimeter of the factory to the entrance of Ray's.
  2. Implement a Ray's forum where events patrons can have more evolved conversations and stay connected.
  3. Organize additional content for out of state patrons.
  4. It would be great if Ray's partnered with a lodging provider were our family would be likely to meet others visiting the park.

Ray's staff

  1. Support Ray's marketing team with a solution allowing them to add content to the site.
  2. Ensure that the link to the online form for waivers is easy to find.
  3. Develop a flexible solution for updating The calendar and events.
  4. Implement a Ray's forum to capture more SEO valuable content and improve organic search results.
  5. Organize additional content for out of state patrons.

HTML and CSS strategy for
content updates

CSS Grid

By using a single css grid for the landing page new content can be added after launch without adding additional styles or changes to the overall site structure. These changes are relatively efficient only requiring the adding of additional rows and shifting cards down from row to row.

Image of the grid used for the Ray's site
Image of the grid settings for the Ray's site

Visual navigation

Cards and drawers

  1. Prioritize consistency: By paring cards with drawers users know what to expect from each interaction on the site.‍
  2. Design clear interactions: Cards with drop shadows and cursor change provide are a clear indicators of an interactive component linking to category content.
  3. Avoid deep navigation: A shallow structure is maintained by the pairing of cards as drawers for all basic information. This leaves fewer items in primary navigation reducing complexity.
  4. Cards based navigation maintains consistency across all breakpoints changing only the wrapping of rows into a top down stack for mobile.
Image of the drop shadows for the cards of the revised site
Image of the drawer open
Arduino landing page sitemap
ideate

With the sitemap and strategy defined I began laying out content in desktop, tablet, and mobile breakpoints

I prioritized content based on what would define what the park is, where it is, how to contact the park, and draw in those new to the site. Above the fold from left to right I placed: map and phone links, a gallery, the about ray's content, and video of a pro rider navigating the park, and park hours.

Info graphic showing the planned responsive structure of the revised ray's site
  1. Logo panel containing, map and phone links with large hotspots.
  2. Gallery panel created in a way that can be updated from instagram by the Ray's marketing team.
  3. About panel containing the origin story and key information for visitors.
  4. Pro rider video demonstrating the best of the park's obstacles.
  5. Ray' hours and calendar of hours and events for the season.
  6. Before you visit checklist panel, including link for liability waiver.
  7. Google street-view of the profile room.
  8. Ray's price list for visits, passes and rentals.
  9. Ray's course map explanation.
  10. Ray's course map by itself in a light-box.
  11. About rental bikes panel.
  12. Art panel (decorative)
  13. Ray's most popular rental bike.
  14. Ray's 29"rental
  15. Ray's 20" rental
  16. Ray's 12" rental
  17. Ray's bike shop link.
  18. Ray's sponsors.
  19. Footer
prototype

With content, labeling, taxonomy and responsive breakpoints defined I moved on to define a client first front-end development strategy and production in Webflow

To allow Ray's marketing team to update the most frequently changing content on their site I chose iframe embeds for the gallery and calendar allowing easy updates from a gallery account login and google calendar.

All other site content rarely if ever changes, allowing for it's development within the mobile app pattern of fly-out panels. While these panels are not editable from the Webflow editor, the entire online store can be. This allows Ray's to increase the profitability of the bike shop with a minimal investment in learning to make updates with the webflow editor.

image of the revised Ray's site
Image of the dom order and structure of the revosed ray's site
Screen grab of the bike shop page

Reflections & takeaways

The design and development process for Ray's is a great example of the importance of understanding the constraints of the development platform, SEO and accessibility. My solution prioritizes the intuitive efficient delivery of the information patrons access to plan a visit to the park.

Placing the sites information in fly-out panels rather than individual pages means the content is all loaded upon arrival. This means the time between selection of a navigation option and viewing is decided by easing curves rather than the speed of a connection and page content.

The trade off of this solution is that it does not comply with accessibility standards and the editing of the content of panels is only possible in the Webflow designer.

These are examples of how a solution developed in a prototyping tool like Invision leaves the constraints of development out of the process and lead to a complete revision upon meeting with developers.

In this case I prioritized mobile first and speed over accessibility compliance and client only editing of all site information.