We are switching the branding of our company away from discounts and promotions to emphasize art and games. We offer an experience, an opportunity to break from reality and go to worlds you could only dream of before. This mantra was used when creating anything from ads, to documents, to redesigning the website to make sure that the brand was unified and consistent.
The first iteration of the prototype can be seen below. It has since had many changes including making sure the contrast between the background and text meets accessibility standards.
Main Landing page.
The first thing people land on is the landing page. It’s an introduction to the brand and what you do. First impressions matter. Because it has to serve the whole company it has to be agnostic to the whole organization. The original picture was good but the illustration of the man reaching out into a portal as a manta ray swims out is the best portrayal of what we offer.
To save the user’s time, when launched the site will now ask if you accept geolocation. If the user says yes, instead of taking them to the homepage, the site will calculate your nearest location and will direct you straight to the location page. Which will have information specific to their location. The user’s browser will then save this information for the subsequent 4 hours and should the user go back to the site within that timeframe it will direct them to the relevant location page.
Remove the search. Although popular in many eCommerce platforms our search button simply wasn’t used. This makes sense because unlike a retailer who sells hundreds to thousands of products we sell an experience. People may be looking for a birthday party, a lesson, or a date and their experiences may be wildly different. But at the end of the day, we sell VR an hour and a station at a time.
Expand the hamburger menu. Touch targets should be at least 44 pixels by 44 pixels. I expanded the menu and centered it with the logo. Reducing the screen real estate while improving functionality.
Reworking the dropdown menu. As with the hamburger menu, the drop-down targets were too small to be accessible, this was because when fully expanded, the menu items spilled past the screen. To combat this I made the menu larger with a new interaction where when a dropdown was expanded, the item that was clicked would be moved to the top. Touching outside the menu would close it. And borrows aspects of Google’s material design in the form of using cards to show what is in focus while adding a layer of depth between the background and the foreground.
To further the brand image and to fit the font, a retro 80’s style gradient was added to the menu. While care was taken to make sure it was still clean and clear.
A lot of thought was put into the location pages. They have to be consistent with each other and serve very similar information: everything a customer would need or want to know about their local Ctrl V. They also simultaneously need to be dynamic enough the franchisee would be able to update any information they would find relevant and would be able to advertise any campaigns or initiatives they have at a local level.
Page personalization is important for the franchisee to run their business, but the current method of maintaining 20+ separate pages wouldn’t scale with the rate at which we were gaining franchisees. Especially since headcount was to remain the same for the foreseeable future.
This was originally designed in a collapsible list so that the information could easily be scrolled through and selected. They also closed on tap which was incredibly annoying when you were trying to open something within the dropdown or when you were simply trying to scroll. This was the single interaction that was responsible for the most amount of users leaving our mobile site once they were already browsing. In addition to this, a lot of the information that was contained was superfluous.
The solution was to break all of the information out of the dropdown and critically analyze what was necessary and what was filler. It was then thoughtfully laid out while the rest of the information was discarded.
Location details and schedule
Where and when? Important questions that ideally you shouldn’t have to think about. They should be so easy to find that you don’t spend much time thinking about them except for how it fits into your life.
Like everything else, it was taken out of the dropdown. The font was made bigger and all of the contact information was put together. The address now automatically takes the user to google maps when clicked and the postal code was removed because it isn’t necessary. (If a customer really wanted to mail something that information is easily googled)
As you can see the fist iteration didn’t have enough contrast against the background on certain spots. This was an issue on a few screens that needed to be addressed before the rollout.
The million-dollar question; How much? Information that needs to be clear and transparent.
This section was one of the biggest offenders in terms of super
Everything is now on one screen with suggestions and clues for where to find more information, the second box is cut off to show content “spilling over”
Birthdays and Events
The event pages allow a user to quickly get an idea of what kind of events are typically held at Ctrl V and how we cater the experience for them. It is useful for giving them ideas of how a VR experience can best fit in their life and allows us to talk to our different market segments.
The birthday and events pages had a few simple but effective changes. Before a photo had to be clicked to reveal what the specific event was about, and then clicked again to be taken to a separate page. Now the information is visible upon the first glance and when clicked, it will expand with a description of the event, along with videos and pictures of what the customer can expect.
This has allowed for the faster consumption of information, lower bounce rates, and more cohesive experience.
Similar to Netflix or Spotify, quality content is what drives our business. We provide the space and curate the experience for the user to consume this content. We found that part of this experience for some people is the ability to screen which games they want to try from home so they can jump in already knowing what they want to try.
The games were expanded to include the trailer, description, screenshots, and stats about the game in an easily accessible space, instead of buried away. Users can cycle through the featured games (chosen by popularity, novelty or season) and can access the full current library below.