HYLTE EQUESTRIAN ASSOCIATION

In collaboration with Hylte equestrian association, we created a new website. The final product aims to facilitate the maintenance of the website and for the distribution of information.

This is a Design Studio project. These projects are carried out in design teams for real clients through class at The univeristy of Halmstad.

landing picture case

Role:

Visual design manager

Client

Hylte equestrian association

Time range

5 weeks

Design team

5 people

Assignment description

This project is based on a submitted brief from Hylte equestrian association. The website of Hylte equestrian association was described as neglected, difficult to maintain, perceived as unprofessional, and unattractive with difficulties for users to find information. The concept that has been developed during this project has therefore focused on facilitating the maintenance of the website and the distribution of information.

Problem identification

During the problem identification phase, the focus was on gaining knowledge to get a better understanding of non-profit organizations, but also the problem area. The problem identification phase contains the following:

  • Understanding
  • Research
  • Define

Understanding

Insights in working with non-profit

When trying to get a better understanding of the problem area we wanted to learn more about the client, the current website, and the structure of non-profit associations. The brief described the current website as hard to maintain, messy and unattractive. We wanted to get a better understanding of why it was experienced this way. By doing desktop research and interviews with the board of the equestrian association it came to our knowledge that multiple factors are needed to be taken into consideration when working with a non-profit association:

  • regulations concerning financiation
  • non-profit -> people have other main activities in their lives
  • everything is dependent on people's will to spend their free time on the association

These factors were also described as the main reasons why the website was delayed, they simply didn't have the time for structuring the information, and it just got layered. These insights resulted in some requirements for the concept:

  • maintaining the website should not require too much effort
  • the information needs to be easy to access
  • the client has to keep the old website for financial causes

Research

Problemspace

The interviews with the board showed that the actual problem with the neglect and maintenance of the website was grounded in the information structure of the website. To concretize the problem space contributed to the prototype being more efficient and useful in practice and not only in theory.

Data collection

The focus of the data collection was to get the members' view on the described problem statement, and not only the board's view as they were a part of the target group. The main channel for information distribution within the association was facebook. The design team chose to create an online survey and published it in the Facebook group. The survey showed that the majority of the members didn't use the website for finding information, but only the Facebook group as the website was described as messy and hard to navigate through. The content of the information was also described as irrelevant.

Define

This part of the process helped us to define the problem and narrow down the project. By doing a cognitive walkthrough and to create a sitemap over the website and to reiterate it.

A cognitive walkthrough

During this time, the team chose to do a walkthrough of the old website to test the information structure that was described as messy by the survey. The walkthrough helped us map the whole information structure of the website, and we found that the website contained so much information that we had to present this to the board.

A sitemap

To present the findings of the cognitive walkthrough we decided to use a sitemap as a tool.

picture of sitemap

The sitemap was presented for the board and while showing the sitemap the clients didn't recognize the information, as the information was published before their time in the association. The website contained information that went several years back which the members in the board didn't know of.

closeup sitemap

Iterative design

When the design team had the required knowledge, we conducted iterative design, this part of the project contains the following:

  • Ideate
  • Prototyping and evaluating

Ideate

Structuring the information

In an agreement with the client the main focus for the project became to sort the information and work on the information structure for a new website. This because of fact that the board didn't know which information the website contained and that there were so many layers of information that the users couldn't find relevant information.

new sitemap

The new sitemap

To change or not to change

After doing the walkthrough we looked into the possibilities of redesigning the website in the current framework. We concluded that the wishes of the board and the members of the association in terms of the esthetics of the webpage wouldn't be possible. A major challenge for the design team was that the framework only allowed control over the information structure and not over the layout or other visual elements. We had to reflect on alternative strategies that would fit the client's needs. Therefore we worked on two concepts, one for redesigning the website within the current framework, and one for a website outside of the current framework.

It's not always one way or another

To communicate the possibilities for the website's layout we used lo-fi sketches, one with the current framework in mind and one without it.

sketches

Sketch for the current framework

sketches

Sketch outside the framework

The board wished for us to keep the focus of a website outside the current framework. We decided to go outside of the box and create a separate website apart from the old one, but to integrate some parts to the new page so that they could keep the requirements for the financiations. We also looked into alternative frameworks for the association and presented them to the board.

Graphic manual

For the graphic manual we defined the typography of the webpage, the usage of colors and regulations for how the logotype should be used in different media and prints. We then based the wireframing off the graphic manual, this to ensure the correct usage of the different parts.

Prototyping and evaluating

Low-fidelty prototype

From the sketches, the design team created a low-fidelity prototype to evaluate the information structure and the processed navigation.

Evaluation of the prototype

The first evaluation of the concept was done through usability testing with a member of the association. The focus of this evaluation was on information structure and navigation. The evaluation showed that structure was clear concerning the presented tasks such as finding specific information for a contest.

High-fidelity prototype

The design team iterated the low-fidelity prototype from the first evaluation. We decided to include visual elements such as images, fonts, and content in the prototype.

high fidelity wireframes

Evaluation of the high-fidelity prototype

The evaluation of this prototype was done through usability testing with a member of the association. The evaluation showed that the user could complete the tasks without difficulties and that the interface was experienced as simple.

Conceptualization

After the evaluations, the design team created a new sitemap, graphic manual, and framework for the future website. Together with the evaluated prototype, we presented the solution to the customers.

Solution

This project is based on a submitted brief from Hylte equestrian association. The website of Hylte equestrian association was described as neglected, difficult to maintain, perceived as unprofessional, and unattractive with difficulties for users to find information. The concept that has been developed during this project has therefore focused on facilitating the maintenance of the website and the distribution of information.

Along with the prototype, new sitemap, and framework for future development of the website we created a graphic manual. This is to help the association communicate its brand and usage of fonts, logotype, and colors in different media.

My contributions

This project was done during a designstudio and I got assigned the role as a visual design manager. One of my main tasks was to map the information structure of the old website. I did this by creating a sitemap and iterating the navigation and structure of the information. This with the goal of making the information more accessible to the members of the association and to facilitate the maintenance of the website for the board. Another main responsibility was to create a structure in the design team while designing visual elements. This to promote communication within the team during ideation. Apart from this I also worked with research, data collection, prototyping and evaluating.

Takeaways

Communication is key

One thing that I will take with me from this project is that communication is key. There are so many possibilities for the communication of ideas, take sketches as an example. It's important for me as a designer within UX and UI to have the front-end development in the back of my head when trying to communicate the design solution to the developers or to have knowledge about non-profit organizations when talking to the board in the association.

Constraints doesn't always constrain you

During the research, we encountered insights that came with constraints for the concept, something that felt like a challenge. This project showed me that the constraints are equal to new possibilities. Each design process is shaped by conditions in the specific design situation. I think that during this project, it became clear to me that constraints are a part of the specific design situation and that they can promote the iterative design work rather than hold it back.

to top

>