Website Creation & Design: Professional Putt Academy
Project Overview
Professional Putt Academy is a small business that helps locals in the Eau Claire area improve their golf skills. The impact of the website is to generate new clientele for studio lessons, but put emphasis on the company’s new feature of online lessons.
In order to achieve these effects, the design and functions need to build authenticity and trust with the target audience. Why should they choose Professional Putt Academy over any other competitor in the area?
Role:
Lead Designer
Co-Project Manager
Date:
06/2021 – 11/2021
Tools:
Adobe XD
Adobe Photoshop
Slack
Asana
Google Meet
Dropbox
Website Workshop
The project workshop is a tool utilized to gain as much knowledge from the client as possible. This knowledge is used to frame the key points of research. We also go over the pre-determined sitemap at this time.
During the website workshop, I was able to facilitate the discussion and found that:
- The target audience is individuals who want to improve their golfing skills. The age range can go from teens to middle age individuals with disposable income.
- The site must be easy to navigate. The user should be able to sign up for a lesson within a few clicks.
- The general theme should be sporty and appeal to practically any age range.
- The user does have other options (2 direct competitors in the same area). The site must stand out and make an impact on the client to prevent them from going to an alternative option.
Problem Statement:
Utilizing qualitative data gathered through the facilitation of the project workshop, I was able to diagnose the problem statement.
Professional Putting Academy was created to help those looking to improve their golf game. The goal is to find a design/functionality that draws attention to the company’s coaching experience and overall coaching style. Because there are other competitors in the same area, the design must be impactful enough to persuade the audience to choose Professional Putt Academy over other coaches.
The end goal is to educate the audience on what is offered, and provide a clean, low-friction path to sign up for a lesson.
Develop The User Perspective
After the project workshop, it is essential to nail down your user persona before going into the design process.
Combining qualitative research from the project workshop with additional quantitative research gathered from credible websites. I was able to determine that the primary target audience that would utilize this service are 14 to 40 yo. The owner of PPA noted that majority of his current clientele are parents of teengaers who are looking for additional coaching.
User Persona:
Andrew
38 YO | Financial Advisor & Father
biography:
Bradley is a proud parent to a 14 yo. His son just recently started high school and he is eager to help him achieve any goals. Golf had always been a fun sport the two would play leisurely before high school, but now the son aims to make it on the boys golf team.
GOALS:
Bradley’s main goal is to help his son make the golf team. Of course any parent wants the best for their children, so he wants to find the best coach in the area.
motivations:
Bradley’s motivations include watching his son succeed in anything he puts his mind to. He is willing to help in any way he can to insure his son achieves his goals.
Research and Design Inspiration
In order to answer the design challenge, it is essential to brainstorm ideas for layout, font, and colors.
I begin the researching phase by diving into the color scheme. What type of colors are associated with sporting/success/golf? Because colors make such a large difference in if we trust a brand, it is essential that this site utilize colors that promote success and reliability. Analyzing other sites colors and creating different matches with coolors.co led to the first draft of colors. Once the deign process begins, these colors are slightly tweaked in tints and shades to arrive on the final color scheme used in the digital assets.
In addition to color exploration, fonts make a large difference and it is best to do a deeper dive on this component to create the best possible product. Using similar sites and analyzing why they may use a certain font in combination with what would be the best font for the client, I found that a sans-serif font would be the best font for this company.
Design Assets:
Generate The Theme Aesthetic
After gathering research to successfully answer the problem statement. Creating the base of the user interface begins with establishing the home page for the new site.
The home page design allows me to start pulling together components, and figuring out the best flow that subconsciously pushes the audience to sign up for a lesson.
Through this process, the general theme of the site begins to take shape. Once complete, it is then presented to the client. During this discussion, the client has a chance to explain their concerns with the general layout and ask additional questions. Tweaks to the overall theme are made at this time.
Create The Final Solution
After the home page is approved by the client. The next step is to follow the established site map and create the remaining templates. With the research in mind, the templates are then designed and prototyped to function like a working website. Majority of buttons are linked and all hover features work so that both the client and the development team are able to understand how a certain portion functions.
The fully functional prototype is then sent to the client without our team to walk them through the functions. We suggest that they send this prototype to a handful of individuals so that some usability testing can occur before the site is put into development. This is often the longest process since it involves tweaking the pages, and perfecting the usability portion.
Final Prototype:
home
Coaching Template
2-Column Template
Booking Template
Contact Us Template
Gallery Template
Post-Design Process
At my current organization, I also oversee the rest of the production process. Design is important but it is crucial that the full features of the prototype are translated into the development of the site.
- Set up the domain with our hosting provider, Flywheel. I can then create the staging site.
- Create a design-to-development document. This document explains each block’s functionalities and/or links that may not have been fully understood through the XD preview. This prevents confusion with the development team, and increases efficiency.
- Send the blank staging site, the XD Preview, the XD Source File, and the design-to-development document to our development team.
- Monitor the timeline of the site when it is in development through deadlines and communication with our development team coordinator.
- Perform a functions tuning list once the beta site is finished. This internal check through essentially makes sure that all functions of the site are working correctly and that nothing is broken. In addition to checking for function errors, the mobile, tablet, and desktop sizes of the site are corrected at this time to ensure no pages are broken.
- Create and deliver content snare requests to the client once the internal checklist is complete.
- Work with the development team to ensure all the content is entered properly.
- Perform an internal tuning list that checks for broken links, another function check through, missing text, or watermarked images.
- Collaborate with the client on any missing components such as missing content or images.
- Deliver the final external tuning list to the client and coordinate with the development team for final touch ups.
- Push the beta site live via flywheel.
- Facilitate the training process for the client so that they get a basic understanding of how their website works.