A Classic Experience: The process in creating a better User Experience
How a summer job became the inspiration for a better User Centered Experience.
The year is 2007. During the summer of that year, I worked at a local skating rink in Utah called Classic Fun Center. Apart from skating, this place is well known for its recreational activities. It is one of the most popular attractions that allows families to have a good time.
To keep up with technology, the company decided to create a website to keep and attract new customers. It underwent maintenance from time to time. This is their current website:
I love this place due to my history working there, but as a designer, I noticed that the site could be improved. So, it got me thinking…
What if I could help and provide a better User Experience for this site?
The challenge
Redesign their website to improve the experience and increase profitability for the site.
Solution
Re-structured the information architecture and redesigned a new experience based on validated research.
My Role
I took the role as a product designer. My responsibility was to lead the experience from research to final results.
The plan
Research the site, its competitors and tailor the needs of the company based on user response. Once finalized, present my work to the owner of the company.
The Process
“We need to understand the situation before designing for our users...”
My initial approach was to create a list of assumptions based on my experience as a former employee. Here are some of those assumptions I came up with:
- It’s a friendly skating environment for kids and adults.
- Customer complaints are due to misinformation on the company policies on the site.
- Parents love to save money. Coupons are incentives that bring customers back.
To understand the challenges and assumptions from the users, I conducted on-site interviews.
User Research:
With approval from the staff, I interviewed customers to understand their current experience. I found out that people love deals and accurate site information. Some responses included:
I asked my interviewees to test the current site and observed the following:
- When clicking on the homepage logo, it does not take them back to the homepage.
- Users were unable to find the location and contact information on the site.
- They had to go through some loops to view future events.
“Pay attention to what users do, not what they say” — Jakob Nielson.
To have a broader scope on the user experience, I prepared an online survey to find common users’ patterns. Here are the results:
Also from my interviews, I found 2 important insights:
- Users like to buy bundles/combos to save money.
- Parents are always on the go and would prefer a mobile version.
Upon looking at the site on my phone, I understood the pain of the users:
This was insightful because it made me empathize more with our users.
Understanding their experience was critical to design a better experience for them. People love this place and it was my responsibility to deliver great results.
Based on my research, I’ve created the following persona:
The persona helped me understand my target audience. With this, I created a user journey to visualize the future experience for the user.
While visiting the physical location, I noticed there was a long line for buying passes. What if I could also ease this process using the website?
The current problem is that there is no option to buy activity passes online, so I designed it. This experience will be one of the biggest selling points to attract new users into the site.
I noticed that the current site has the option to shop for equipment and season passes. For the scope of this problem, I will focus on the general experience of the user based on my research.
To maximize the experience, I simplified the information and organization of the site. So I reorganized the site removing repetitive and confusing elements via card sorting:
This conducts me to restructure the site and create a story map that addressed the needs of my persona.
Pen and Paper
After reiterating ideas, I transformed them into desktop designs:
I wanted to have a site that provided clear communication. Allowing users to visit the site, engage in events and provide the best deals to buy online and save money.
A calendar function showing future activities and upcoming events were also added.
To make sure that this experience was transferable to mobile, I sketched a mobile version as well.
I moved forward with the desktop version and began to wireframe and prototype my results. Leading me to transform my solution into digital results:
I wanted to be sure that the site resonates with my persona, so I tested my wireframes. After receiving feedback, I realized that I was wrong.
The activities section was originally on the home page. After receiving feedback, I found out that this approach did not resonate well with the users. So I created a designated section for activities.
My initial idea was having a shopping cart visible at all times, enabling the user to add products. Due to testing found out that this feature is only used when buying activities and needed to change. To solve this issue, I implemented a simple check out form in the activities tab.
After reiterating ideas based on feedback, I moved into my High Fidelity Design.
I reorganized the navigation bar to ease the experience of my users. My navigation evolved from 3 functions to 5. I also added the contact information to provide direct access to employees if needed.
I also redesigned the newsletter. In the beginning, it appeared at the bottom of the site. This function was to engage users to sign up, receive coupons and events and motivate them to return. While testing this function, I noticed that this option hid from their view. To solve this issue, I moved this function to the “Deals” section and saw improved results.
For the activities section, I added icons that represent each activity. Here is a snippet of my A/B testing to determine my visual representation. I found out users prefer spaced out labeled icons.
Once the user clicks the buy activities call to action, the site will direct them to a simple check out screen.
After fine-tuning my visuals, I was ready to deliver my “final results”:
Or so I thought…
Before delivering my final results to the owner, I went back to test my results. Here are the reactions I got:
- Users loved seeing the hours of operations in the navigation bar.
- The “Deals” tab gained a lot of attention.
- Navigation did not cause difficulties for the users.
- Users could find upcoming events information.
- Users enjoyed the simple and clean look of the checkout form.
Extra feedback also indicated that there were no links to social media. Businesses nowadays use social media to engage and bring new customers. Based on this, I provided and delivered my final result:
Conclusion
It was a great experience to have the opportunity to work on this project. It combined my passion and history into one. It allowed me to revisit a place that is dear to my heart and provide a solution for this challenge.
What I Learned
- Understand your product. Spent a dedicated amount of time to understand your product. The deeper I dig, the more I came to understand how my product works.
- See beyond the surface. There is so much that one can learn by observing. I was able to identify and put in place a solution for the long line of purchasing tickets in-person. I wouldn’t have noticed it by looking at their current website.
What I Could Have Done Better
- Setting developers’ constrains. Since I was presenting this personal project to the owner of this business for potential use. It did not have developers’ involvement. Due to this nature, I was unable to provide limitations or constraints.
- Fix the holes. Due to the scope of the problem I was unable to address the current shopping experience of the site. If had more time, I would have spent more time redesigning and implemented the screens from the rest of the site. These were the steps I took to provide a better user experience: A Classic Fun Center Experience.
Hope you enjoyed my journey! Thanks for reading!
