Sekkelsten Hestesenter

This project involved researching a chosen topic. As I am going to start my own stable I need a website for this. I wanted to use this opportunity to both do something that benefitted me and to learn more about UX research

Year 2024‍

Duration 4 weeks

Role Sole UX/UI designer

Tools used Figma, Miro, Jira, Maze, TypeForm, pen and paper

FIGMA

HI-FI PROTOTYPE

Brief

In choosing the topic for my in-depth project, I have decided to use this time to delve into the holistic design of a website for a service that will benefit me even though I am already working as a designer. Therefore, I have chosen to develop a website for my own stable business to ensure a good user experience not only in the stable but also on the website, thereby attracting more and more satisfied customers. This choice is to ensure that the website is not just a static information medium but a dynamic platform that effectively communicates with existing and potential customers. Part of the reason for this is that I want to work more with UX research and actually use this project for something I need myself. I also want to test out Maze and learn more about user testing.

I started the project by creating a small survey to get an understanding of users' needs regarding stable websites and what they actually use them for.

How are websites for stabled used today?

where do you find horserelated ads today?

Survey, how easy is it to find relevant horses for sale?

Users do not use the websites often, and the most important for them is good information about the stable and its services.

Key insights

9 out of 9 respondents want online booking for arena rental.
Only 3 out of 9 respondents frequently use the website of the stable they are currently at.
A majority of respondents believe that it is not relevant for them to use the websites of the stables they are at.
Comprehensive information that is user-friendly to navigate is important.
It is important to keep the website updated and relevant.
One often uses Facebook or Instagram for information about current news and events at their stable

Empathy map to empahise

I did an empathy map from my findings in the survey. I wanted to analyze and gather my findings. At the same time, I desired a deeper understanding of my users.

Personas and user journeys to futher understand users

The development of personas and user journeys was the next step to gather data and use it as a basis for fostering empathy in future design choices,

How Might We - statements

How Might We" (HMW) statements are a tool used to reframe challenges or problems into opportunities for creative solutions. By posing questions starting with "How might we...", these statements encourage brainstorming and innovative thinking, fostering a collaborative environment where team members can explore various ideas and approaches. HMW statements help focus efforts, stimulate creativity, and shift mindset from viewing problems as obstacles to seeing them as opportunities for growth and innovation.

How might we encourage more potential customers to reach out via the website?

How might we ensure that customers receive the information they need on the website?

How might we facilitate arena rental through the website?

Competition analysis

I conducted a competitor analysis where I found positive elements and development potential in existing websites for other stables in the area. This was also to map out mental models with regard to Jakob's Law in UX. While looking at opportunities to improve the established elements, how can I incorporate the important elements, but perhaps present them in a slightly more engaging and understandable way.

POV - Statements

A Point of View (POV) statement is a meaningful and action-oriented problem statement that allows you to generate ideas with a clear focus. A POV statement involves reframing a design challenge into an action-oriented problem statement. You formulate a perspective by combining your knowledge of the user you are designing for, their needs, and the insights you have gained from previous research during the empathizing phase.

Customers require comprehensive information as they prioritize understanding pricing structures and the range of services offered by the stable.

Potential customers need an easy way to contact owners, as it should be low-barrier and straightforward to reach out to the stable.

Customers require a means to view upcoming events or activities as they need updated information on what is happening at the stable.

Brainstorming based on the defining phase

Brainstorming is great for freely generating ideas. Here, I'm basing it on HMW and POV statements from the defining phase.

Screenshot of "Hvordan kan vi sikre at kundene får den informasjonen de trenger"

Affinity map

To sort ideas and look for opportunities to combine them, I quickly made an affinity map of the ideas.

Requirements for an MVP

Homepage with important information
Contact button
Map
Calendar
List of services and prices. Bundles?
Possibility to rent the riding arena online. Different options?

Lofi

I sketched out a Lo-Fi prototype based on the requirements as well as the insights from the research. I kept it very simple and tested it manually on one test participant. Ideally, I wanted to test it with 5, but time and availability constraints prevented that from happening.

Hi-fi

Based on the Lo-Fi prototype and the test results, I iterated towards a hi-fi prototype that I intended to test using Maze. This was also my first time using Maze, which turned out to be a valuable learning experience.

Testing it with Maze

Maze is a UX research platform designed to make it easy for designers and product teams to conduct tests and gather insights from users. By providing tools for prototyping, user testing, and data analysis, Maze enables designers to account for design decisions. The platform supports an iterative design process, where user feedback can be continuously collected and analyzed, and it also generates reports for designers. This was my first time using Maze, and I quickly discovered the advantages and disadvantages compared to manual testing.

Positive quotes

"The website provides useful information about the stable, your team, and the services you offer. It's clear, explanatory, and easy to navigate."

"Very nice website! Clear and pleasant to look at. Intuitive where to go to find information. Liked the color scheme and the various geometric shapes being used."

Based on the user test feedback, here's a summary of desired iterations and developments:

Look into opportunities to make more of the cards on the stable page; users click on them and want to contact in this manner, along with challenges regarding where to reach out.
Booking should indicate availability in the riding arena. Could we use an external booking service to make this easier?
Include news on the site. Could we connect it with Instagram?
One challenge is how to present enough information early on the riding arena rental page while also showcasing our offerings.
We should add references or reviews to the site.
Take a closer look at the information architecture. Could we conduct a card sorting exercise? Test the structure, as several users dropped off on certain modules.
Arbeide videre med innholdsdesignet og informasjon som deles på nettsiden.

Changes done after testing

A wish for refrences or ratings from other costumers

Before

After

A challenge is how we can provide enough information early on the riding arena rental page while also showcasing our offers.

Before

After

Explore opportunities to improve the livery page; users are clicking on the cards and want to get in touch this way. Additionally, address the challenges regarding where they should contact us.

Before

After

Visual profile

I began to develop a designsystem for the website.

Functions

Landing page

When you first arrive at the website, you're greeted by a homepage that contains most of the site's features. From here, you can navigate to most areas of the site. There's also a main menu at the top of the website that takes you to the most important subpages, as well as options to contact right away. Having everything in one place makes the information easily accessible. Additionally, there are references to attract new customers, as well as several pictures of the stable and an overview of the stable's services and prices early on. These were important points from surveys and research conducted during development.

Services

Under 'Services,' there's an overview of the stable's services. Here, you can click through to read more about the various services. Having an overview of services was the most important point in the survey.

Livery and horses for training

Key services such as livery and horse training have package solutions for a clear overview of what each service includes, along with lists of additional services. Card/package solutions make it easier to understand the differences between the various price levels. Under horse training, there's also information about the riders who will be training the horses.

Arena subscription

During the surveys, it became clear that users want to be able to book indoor arena hours online. Therefore, I created a service where users could book various options: one-time rental, subscription, or punch card, based on feedback from user tests. This allows users to choose the solution that best suits them. From here, users are taken to the checkout, and it was important that they have the option to pay with Vipps.

About Us and Calendar

There's an 'About Us' page containing the most important information about us and the stable, along with a map to the location and address. This was an important point in the survey.

A desire from user surveys and testing indicated a need to know what's happening at the stable. Therefore, a calendar showing indoor arena times and an overview of upcoming events is useful. The idea here is that the calendar is a shared embedded calendar among boarders where everyone can input when they want to book the indoor arena, for example. It was also important for users that this information was kept up to date.

Contact form

It was very important for users to have multiple ways to contact us. Some wanted a form, some preferred email, and others preferred mobile. Therefore, a separate 'Contact Us' page was created with relevant information.

Prototypes

Future developement

Take a closer look at the information architecture. Could we conduct a card sorting exercise? Test the structure, as several users dropped off on certain modules.
Continue working on content design and the information shared on the website.
Develop a design system. Further explore components for desktop and mobile.
Build the website in Webflow.
Test and develop the indoor arena subscription services, further examine the purchasing process and its details. Could we have used an external service?
Try out Maze again with new knowledge about the testing method. See if we can use card sorting methods there.
See if we can remove some modules or if there might be superficial information on the site.

Go to next project