Sports website UI/UX design

Introduction

BeVolleyball is a volleyball community website developed with WordPress. We started working on the idea in April 2019 and we released the website later in the fall of 2019. We work agile from the beginning and since we are based in different countries we conduct our communication online.

My position: UI/UX designer and Front-end developer

What I worked on:

  • Mobile and desktop design;
  • Style guide (website);
  • Low-fidelity mockups;
  • User journey map and personas;
  • Information architecture;
  • Front-end development (WordPress, HTML5, CSS3).

Challenges and solution

1.Website desktop and mobile design

Problem: We needed simple and clean design for the website, because all members of the volleyball community come from many different backgrounds, so I had to come up with a minimalistic, practical and easy-to-understand design concept for desktop and mobile devices.

My goal: To deliver modern, consistent and intuitive design, which has a great usability.

My approach: After a review of the information architecture, the low-fidelity wireframes and the style guide, the creative process started. I made a design concept and the team discussed it in a meeting. I applied small changes and we all agreed on the final design for both – mobile and desktop devices. I created a prototype in WordPress, which was successfully tested by 10 users from the main user groups. Then we were ready to continue with the development of the website.

The result: I created clear and simple design wich covers all the functionalities we needed and it is easy-to-use on both – mobile and desktop devices.

2.Style guide

Problem: The project started from scratch so we needed to take a decisions about the style of the website.

My goal: To create a style guide, which will be used in the future design process and during the development of the project.

My approach: I had a meeting with the team to discuss the main color scheme, the typography and iconography. After the discussion I created a style guide, containing the interface elements, some of the blocks and how will both look on mobile devices.

The result: An XD document with all styles and the main reusable blocks.

Conclusion

Bevolleyball.net was my first project as a UI/UX designer.

I mastered Adobe XD and Figma (on a later stage), I applied my knowledge in design, prototyping and website development with WordPress.

I found out I am more passionate about design for mobile devices, responsive and adaptive design.