Beyond the Debt
A responsive website for a freelancing financial coach
Beyond the debt is a financial coaching website showcasing a freelancer's services. This responsive website will give the freelancer the ability to showcase their services easily online for all.
UX UI Design, UX Research, Branding
Figma, Forms, Maze
80 Hours, Jan 2022
Beyond the debt is a new and up-and-coming freelancer service. The client was looking to have a responsive website to help generate clientele and be a place for current clients to book additional appointments.
Design a responsive website designed to be modern and give the user an easy and readable site to be able learn about what financial services are available and be able to make contact to schedule an appointment.
Using the design process
In order to help this freelancer create a modern responsive website, first needed to be able to understand the market. To do this, I needed to empathize with the potential users of this new services.
I decided to to this by completing a competitive analysis of the market as well as conduct an anonymous survey.
Understanding the market
First thing I did to better understand the market of financial coaching was to do a competitive analysis of existing financial coaching websites. To accurately do an analysis for this, I made sure to look at other financial coaches that were similar to my client. I put together a graph showing what websites had in terms of features or not. Below are the result of my competitive analysis.
One thing my client brought to my attention was their need to allow clients to be able to book through their website. So while doing my competitive analysis, I took note of what other websites were using to book appointments.
A majority of smaller sites were using Calendly. I brought this to the attention of my client and found that Calendly's simple version of the services would work perfectly into my clients budget.
Next, I wanted to complete an anonymous survey
, as financial standings can be a touchy topic for some people to be open about. I decided the best way I could go about this was to create a survey to help me understand what people are looking for when it comes to finances and their thoughts on financial coaches.
I condensed my finding from the survey into two categories: user needs and frustrations.
- Want to be able to buy a house
- Be able to sustain theirself financially to the point where they can invest in their hobbies
- A participant thought it would be good to have a coach that could help them with their financials
- Participants generally would just like a stress free site that would help them decide if they need a financial coach
- Sites can be too cluttered
- Many participants feel like they cannot afford a personal financial coach and may not even try looking for a coach for that very reason
- Are afraid that financial coaches may not help them become successful or debt free
- Not enough information in other apps or services to help them create a budget
Creating a Persona
With my empathizing complete, I felt I had enough information to create a unified persona for this project. I created the below persona to help guide me in the designing process of creating a responsive financial website for my client.
Now that I had completed the empathizing phase of this project, I could started defining the goals of this project. I narrowed it down to three main categories of goals: business goals, user goals, and technical goals. I made a Venn diagram to ensure each goal aligned with other goals logically.
With the goals ironed out, I started creating a site map to help me define the layout need for the website. I wanted to create a rather simple layout so users wouldn't get confused as they navigated the site for information. I also wanted it to be simple enough for users to book appointments with the client. With those things in mind, I made the site map below to help me in the next phase of designing the responsive website.
The next step was to create a user flow. I thought of what a user may want to accomplish when they reach the site. I decided to try map out how a user may try to book an appointment. Below is how I thought a user would navigate to booking an appointment.
With the user flow figured out, I moved onto working out what a possible task flow may be for a user. For this, I decided to map out the task of a user wanting to learn about the financial coach's credentials.
Using what I had learned in the empathizing phase and defining it, I began to work on ideating my research into designing a responsive website for my client.
For my sketches, I wanted to create a site that was inviting as well as informational. To do this, I wanted the hero section to be a warm , inviting image with a slogan from the client. I tried placing the slogan in the center , left and right justified. As you can see on my sketches below, I felt very confident with the hero section having an image. It was just a matter of where I wanted the slogan and the call to action.
Next, I wanted the homepage to include the services available that the client was offering. I played around with the idea of putting it in different places, as you can see below. Trying to decided whether or not tot use a button or just a link to learn more about certain services.
Additionally, I wanted to include an abridged about me section on the homepage. Since this was a smaller business type of website, I though it would be good to include this so users can get to know the coach before even scheduling a first session. I felt it would be more welcoming to users if they knew about their possible new financial coach and their journey to financial freedom. I tried it in a few different spots on the page and a few different layouts to see which would work best.
These were some of the main things I wanted to incorporate into the homepage of this site. I then met with my client and made sure these were things she was comfortable and happy with to have on the homepage. She was quite pleased with what I had, so I felt good to move onto create the wireframes.
With the sketches complete and the client happy with the direction I was going with the sketches, I began to work on creating the wireframes. I chose to iterate on my first sketch of the website as I liked how the hero section would be right justified, giving it some character. I also liked the flow of that one the best as I felt the services would be best as the next item a user would see. Then the about section as the last main section, followed by a quick call to action section to get the users to book an appointment.
I also created wireframes for additional pages the client wanted on their site, including a services page, about, and blog/article page.
Additionally, I made sure to create a mobile version of the site to show that the homepage was responsive.
Creating a Branding
With the wireframes complete, I could now focus on creating a branding for this new financial freedom website. I sat with the client to discuss what they wanted for their website's branding. I was given a long list of ideas and inspirations from the client.
I got to work on creating a logo for my client. It was a bit of a struggle at first since I had a long list of ideas/things they liked, to go through. The client wasn't a fan of logo's that just contained the letters, i.e. "BTD". I tried to make it more creative then I was to use the letters, but nothing really seemed to pop or feel memorable. I tried also using imagery to help, but it was hard to capture both "beyond" and "debt" into just one image. Then I recalled my client would like turquois to be one of the main colors of the website.
I used that information along with them mentioning they like the ocean and though of having a sunset on water be the logo. Below is my process of coming up with logos until I settled on the final version.
After solidifying the logo, I began to work on the UI Kit for the website. First was figuring out the color scheme for the site. Since I had already planned on using turquoise as a main color, it made since to use it's complementary color to make the logo look like a sun on the water, as intended. I worked on finding a typography as well that fit the branding of the website. I also worked on possible input fields and their states as well as buttons and their states.
High Fidelity Screens
I took what I had learned from my wireframes and incorporated the logo and branding to create the below high fidelity screens.
Reworking the High Fidelity Screens
The above screens were my first iteration of the website. I felt, at first, that having a compact website would be nice, but after some feedback and being told to look at some featured websites for their flow, I decide to do a total reworking of the website.
I added some curved shapes to the website to make it feel like it really flowed like the logo. I spaced out the services to give the site more room to breathe. I was also able to incorporate more of both the colors this way. And as you can probably tell, I ended up switching the primary and secondary colors around. With the orange now being primary and the turquoise as secondary.
At this point, I could now begin preparing the pages for prototyping. I used Figma to create a prototype.
Since this was now my second time using Figma to prototype and was hoping to learn from my mistakes from my Zeit
project, I made sure to learn all the prototyping features Figma had to offer. I did this to make it one, feel more usable than my previous attempt and two, hopefully have better testing results.
Now that I had a working prototype of the website, I got to work on setting up a way to test the prototype. I chose to go with maze.co to create a way to test this.
I wanted to test how easy the UI was for the user to navigate. To test this, I gave the users four task to complete that would test if the site was intuitive.
I believe the testing was a complete success with all the participants completing all the tasks with only 10% misclicks and 100% accurately.
If you do look at the results
, you will find that the below mission seems to be a complete failure. However, it looks like somehow maze.co thought the component for "services" was off the expected path, when really it was expected. So again this could be because I haven't fully grasped how to prototype effectively.
High Fidelity - Finalized versions
Based on how testing went, I felt confident with my design that I did not need to make any additional changes. Below are the finalized responsive screens I sent on to the client for approval.
The client was super excited with the final results. I plan to work with the client and help them build the website.
Next steps are to look into what the client's budget is for hosting this website. Then I plan to work on building the website to be responsive and incorporate Calendly to help them with appointment management.