Internship project: Responsive Wordpress site for a Golf Club

Designing the experience this Golf Club offers through a website aligned to their brand.

Team

1 designer, the client’s representative and the IT’s area developer of the club

Role

UX/UI Designer

Duration

4 months

phone and laptop floating
phone and laptop floating
phone and laptop floating

Stage 1. Problem Statement

The golf club has a very strict and outdated corporate identity, but they saw that they needed to modernize their processes and that required the club to have its own website. Las Lomas has a website but the club is briefly mentioned, however they wanted to open the doors to new members and become more known among the competition.

Stage 2. Objectives & goals

Creating a responsive website within their design guidelines, offering opportunities to modernize their processes without sacrificing the identity and making them more attractive than other clubs.

Stage 3. Design Execution

  • Prototyping: Utilized advanced features in Figma to create a prototype that enabled realistic user interactions. Conducted live demonstrations of the prototype for the client, providing a tangible sense of the site's look and feel, functionality, and showing the client how the brand identity was kept, but with a modern twist.

  • Web Design: Designed a visually appealing interface using Elementor Builder in Wordpress, working with their existing color palette to promote exclusivity and elegance, as well as typography that improves readability across devices. Incorporated feedback from the client to refine the UI, ensuring that it not only looked appealing, but also aligned with the club's goals.

Stage 1. Problem Statement

The golf club has a very strict and outdated corporate identity, but they saw that they needed to modernize their processes and that required the club to have its own website. Las Lomas has a website but the club is briefly mentioned, however they wanted to open the doors to new members and become more known among the competition.

Stage 2. Objectives & goals

Creating a responsive website within their design guidelines, offering opportunities to modernize their processes without sacrificing the identity and making them more attractive than other clubs.

Stage 3. Design Execution

  • Prototyping: Utilized advanced features in Figma to create a prototype that enabled realistic user interactions. Conducted live demonstrations of the prototype for the client, providing a tangible sense of the site's look and feel, functionality, and showing the client how the brand identity was kept, but with a modern twist.

  • Web Design: Designed a visually appealing interface using Elementor Builder in Wordpress, working with their existing color palette to promote exclusivity and elegance, as well as typography that improves readability across devices. Incorporated feedback from the client to refine the UI, ensuring that it not only looked appealing, but also aligned with the club's goals.

UI design
UI design
UI design
full page prototype
full page prototype
full page prototype
problem statement question
problem statement question
problem statement question
laptop floating
laptop floating
laptop floating
phone floating and prototype design on background
phone floating and prototype design on background
phone floating and prototype design on background
two phones one tilted posing on the other with the design on screen
two phones one tilted posing on the other with the design on screen
two phones one tilted posing on the other with the design on screen
Desktop with the design on the screen
Desktop with the design on the screen
Desktop with the design on the screen

Stage 4. Iterations

When the prototype was presented to the client, he loved it, although in the process of designing the site in Wordpress, the client would send corrections, since the board of the club had the final say. The person in charge of this project was not a member of the board, but the area manager of PR. The corrections were made directly in the Wordpress site instead of the prototype. The developer in charge of the club's IT department and I worked together because he wanted to understand how to manage the website once the project was finished, so he gave me his notes and corrections at every meeting.

desktop with design
desktop with design
desktop with design
3 screens floating
3 screens floating
3 screens floating
Desktop with club's website on
Desktop with club's website on
Desktop with club's website on
Desktop with club's website on
Desktop with club's website on
Desktop with club's website on

Stage 4. Iterations

From all of the feedback gathered the changes were as follows:
  • Making the navigation section sticky

  • Changing the arrangement from the information in almost every page, the Home page would be like a landing page informing of the restaurants and services the Club offers

  • Having a section in the Amenities page explaining what each restaurant offers, and emphasizing the golf course in another section, since its the main activity in the club

  • On the About Us page, the history of the club was changed and the values needed to be added

brand's identity
brand's identity
brand's identity
brand's typography
brand's typography
brand's typography

Stage 5. Final Presentation

All the corrections pointed out by the client's representative were made and the finished Wordpress site was presented. The IT area manager was also in the presentation and wanted to know how the design was managed, all their questions were answered and they were very satisfied with the final product.

one phone resting on another phone floating
one phone resting on another phone floating
one phone resting on another phone floating
2 phones floating
2 phones floating
2 phones floating
phone floating and wordpress page on background
phone floating and wordpress page on background
phone floating and wordpress page on background

Reflections

This project was the first time in my life that I approached the Wordpress Builder and the Elementor Builder. I learned so much about the importance of knowing your users because the client had a very defined profile of the members of the club. This ed me a lot of time trying to define the style we were going for.

This project in special helped to gain more confidence regarding my abilities and how I perceive myself as a professional. Since I dove in straight into the project without knowing anything about Wordpress and even being the second time I worked with Figma, I tried my best to provide the client with a website up to their expectations, because I had a commitment with them.

What I learned from this project

  • The client does not always know what he wants, many times the client told me the abstract ideas he had and based on the concepts I worked to develop the designs. Working with the client we achieved the result of the website and the client was very satisfied.

  • Customer service is a must, there were times when there were missing images or information that the client had to provide but being so busy it could take a long time. Making the client feel comfortable by not demanding but understanding the conflict in his time schedule, generated trust and better communication.

  • Respect, communication and patience are key, this project taught me how to manage those situations where the client is tense or stressed and how to maintain the peace, with good communication everything worked out in the best way. I also learned that if the client doesn't answer and you have been looking for him for a long time you will need a lot of patience and keep communicating respectfully.

Skills I learned

Take a look at the final website

Reflections

This project was the first time in my life that I approached the Wordpress Builder and the Elementor Builder. I learned so much about the importance of knowing your users because the client had a very defined profile of the members of the club. This ed me a lot of time trying to define the style we were going for.

This project in special helped to gain more confidence regarding my abilities and how I perceive myself as a professional. Since I dove in straight into the project without knowing anything about Wordpress and even being the second time I worked with Figma, I tried my best to provide the client with a website up to their expectations, because I had a commitment with them.

What I learned from this project

  • The client does not always know what he wants, many times the client told me the abstract ideas he had and based on the concepts I worked to develop the designs. Working with the client we achieved the result of the website and the client was very satisfied.

  • Customer service is a must, there were times when there were missing images or information that the client had to provide but being so busy it could take a long time. Making the client feel comfortable by not demanding but understanding the conflict in his time schedule, generated trust and better communication.

  • Respect, communication and patience are key, this project taught me how to manage those situations where the client is tense or stressed and how to maintain the peace, with good communication everything worked out in the best way. I also learned that if the client doesn't answer and you have been looking for him for a long time you will need a lot of patience and keep communicating respectfully.

Skills I learned

Take a look at the final website

Other projects

Copyright 2024 by Ana Sofia Mancilla B.

Copyright 2024 by Ana Sofia Mancilla B.

Copyright 2024 by Ana Sofia Mancilla B.