UX&UI
On going
Jul 31 2018

Ethiopian Sport Federation in North America

Summary

Every summer Ethiopians gather around for one full week to celebrate unity and culture while enjoying a soccer tournament along with other cultural activities. This event is organized by the Ethiopian Sports Federation in North America (ESFNA), a non-profit organization dedicated to promoting the rich Ethiopian culture and heritage as well as building a positive environment within Ethiopian American communities in North America. It attracts over 40,000 attendees from all around the U.S. and the world. I examine users’ experiences with the current ESFNA website and provide a solution to make attendees’ life at the event and beyond a little more enjoyable.

Photo Credit - Jordan Mersha

Problem Statement

ESFNA's website is an essential part of the organization where interactions with attendees and vendors take place. Most attendees coming from different parts of the U.S. and the world, an emphasis is put on the website to communicate information as effectively as possible. Yet it is hypnotized through many events that the website usability and poor content management are stirring those interactions, which leaves participants frustrated and dissatisfied. Ultimately, this hurts the efforts of the non-profit organization in adding value to the community.

Role and challenge

My role involved both user research and visual design. Due to the event being hosted once a year, conducting user research at the event was challenging. It limited the research execution to be effective on the first run. The information I acquired from the first research wasn’t sufficient thus it resulted in the research to be ongoing for two events (once a year totaling two years).

Design Process

The stakeholders of this website are primarily event attendees, but it also touches vendors, third party organizations and ESFNA. I started my journey by conducting user research using mixed methods, primarily an interview was chosen as the core research method because of the limited time available with users. (actual available time with users was 5 days in a row for approximately 4 hours every day) This made the interview to be the most effective because I was able to walk around at the event and interview different age groups. The objective of the interview was to deeply understand users’ behaviors and pain points with the current ESFNA website. Other online research methods such as surveys, A/B testing, and user feedback would’ve greatly excluded the older age group as they might not be fluent in technology thus hindering their access to those research methods. Secondarily, the interview was backed by three usability tests on nine additional users to evaluate the current layout and content organization of the mobile website.

Out of the twenty-two people interviewed, nineteen of them claimed that they would use their mobile devices to access the current website than a desktop computer due to the convenience of mobile devices. “In 2018, 58% of site visits were from mobile devices” (PerficientDigital). Interview findings in conjunction with the PerficientDigital research report led me to design the solution primarily for mobile with an intent to expand it to a desktop.

These methods allowed me to gain a deeper understanding by combining both qualitative and quantitative information. Although users were able to get most of the information on the home page, they continued to struggle with being forced to dig deeper into the website pages to find important information such as the event address, event deals offered by third party companies in partnership with ESFNA and more discussed below. Discussions with users from the interview revealed three major pain points:

  1. Information inaccessibility
  2. Communication unreachability
  3. Event access hindrance

Thinking about the interactions since the wireframes stage helped to keep a strong workflow working day by day. In this phase, I started the first sketches where I could prioritize the features and hierarchy working on a design system with grids and proportions established. Working in this way was helpful because It helped in keeping the consistency when I moved forward to the visual design phase and also thinking about the desktop expansion design.

1. Information inaccessibility

Parallel with the usability test results, interview showed that information about the event is not easily accessible site-wide or there is a disorganization of information. Some users pointed out that navigating the website is not intuitive as the navigation bar stays on top and users have to scroll back up to move onto other pages. Other users put the tournament page as not usable at all on mobile and desktop. After examining research results, information attendees mainly seek for includes but not limited to:

  • Easy of access to different pages
  • Event stadium location
  • Playoff times and clubs standing
  • Performing Artists

Navigation

After an accurate analysis of data on inaccessibility and attendees’ behaviors, I was ready to spend some time designing the navigation system that became a piece of simple and functional architecture. I decided to spit the navigation into a primary and secondary to keep it strong and intuitively follow the new features.

Starting with the core UX improvement, the navigation component is now easily accessible from anywhere on the site. This component is fixed to the bottom of the webpage, which allows users to jump between different pages from anywhere on a given page. The revamped IA, bottom navigation, footer navigation, and interactions used make navigating the site far more efficient.

Landing

When designing the home page the main question I had was, how can I present useful and meaningful information? This meant analyzing the information that users valued the most and presenting them in the order valued. The layout and continuity to other sections of the site enhances the user experience by allowing users to :

  • Get directions to the stadium by launching local maps application
  • See artists scheduled
  • Access offered deals
  • Access news
  • Get directed to the ticket page and more

Tournament

“The soccer tournament is a prominent part of the event intended to bring us together. And currently, the way we keep track of team scores and standings is mostly with word of mouth.”

(Eyob Tadesse, Engineer)

This page was challenging to visually represent as it obtains information about the tournament such as teams, playoff times, dates, club standings and changing soccer data. To make this information digestible, I designed this page by dividing and categorizing the given information. The page is divided into two top-level tabs, “schedule” and “standings” as shown above. Schedule is then classified by dates, where each date contains the games scheduled along with each game details. Because there are two divisions within the teams and each division has different groups of teams, I classified the “Standings” tab by groups of teams ranging from A-D.

Now, users can seamlessly switch between schedule and standings. This allows attendees to get informed about the tournament promptly and happily support their team with full confidence.

2. Communication unreachability

The higher aged group that participated in the interview highly emphasized the lack of a central place for communication. Attendees are not able to access news about what the organization is doing on a particular issue. The current website manages news in the middle of the home page, which didn’t look like a news section for lots of users from the usability testings. This is mainly caused by how information is organized on the website and also due to the website being forced into an already existing template. In addition, there’s no catalog of news to be found on the site from previous years. This issue creates miscommunication and does not make information transparent. Thus, it leads to users being frustrated about how the non-profit organization is functioning and ultimately weakens the relationship between ESFNA and its users.

News

This is the source of information for attendees, vendors and third-party partners, thus it begged for a solution. When creating this new “News” page the goal was to have a centralized place on the site where all communication between ESFNA and its users takes place. Selected and prominent news can also be found on the home page which allows users to get directed to the “News” page via the “View all news” button. Overall this new page highly minimizes the communication issues mentioned above and helps ESFNA to communicate in a transparent way with the community.

3. Event access hindrance

There is an entrance fee to access the event and attendees can buy tickets daily or get a season pass for the whole week. The methods used to collect the fees are through ticket booths at the event stadium gate and using a third-party online ticket website. From a one-hour observation at the stadium, 97% of attendees bought tickets at the ticket booth. The research indicated that this was the most commonly shared pain point. Attendees discussed the annoyance of standing in an extremely long line in oftentimes plus 90-degree weather. When asked about the online ticket option, 16 interviewees stated that they couldn’t either find the ticket page or if they did because a third-party was involved, they felt the webpage wasn’t secure enough to give out their payment information.

Tickets

To address the most common pain point, I’ve designed a new “Ticket” page which will allow attendees to purchase tickets right on the ESFNA website. In addition to eliminating the long lines at the stadium gate, ESFNA will likely see an increase in revenue by integrating the ticket system right on its own website and eliminating costs for third-party ticket shares. ESFNA’s own nightlife tickets can be offered on this page as well. This is also a business opportunity that allows ESFNA to offer third-party event nightlife tickets. The checkout process has been simplified so that users can purchase the tickets faster and get to the event satisfied.

Bazaar

After experiencing the events I came up with one important idea that had an effect on all stakeholders. The idea was to have a central place on the website for all sales goods related. With more than 40 thousand people at the event, finding a specific booth to buy goods from is highly challenging. Often times only getting to the shops in clear sight. This idea did not come from the interview, but I brought it up at the interview to get validation from users and 90% of users supported it.

This allows attendees to find shops of interest ahead of time by informing them of the shops’ booth numbers along with the shops’ details. This also helps vendors/ businesses by allowing them to have exposure to the community. Using my own experiences and research, I categorized this now called the “Bazaar” page into 3 main groups: food items, merchandise, and music. All goods sold at the event fall under these main groups thus it encompasses all businesses and vendors.

Learnings

I learned so much in completing this project but most importantly I learned that bringing peoples’ ideas together for one collective cause under the same user experience is extremely challenging. It requires research to be done periodically to maintain the current product but also to address new UX issues that might come up.

When doing the interviews I noticed asking questions as often as needed was essential to eliminate any guesswork and support the stakeholders in understanding the design. Listening to stakeholders’ pain points and asking why so many times led to a design that is useful and delivered on its purpose.

Currently, the project is under development and will be launching in Q4 of 2020.