Beyond the Debt

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.

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.

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.

I took what I had learned from my wireframes and incorporated the logo and branding to create the below 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.

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.