top of page

BePresentPDX

Brand and Web Design

BePresentPDXMockup3-Workpage.png

Project Overview

Brand and website design for a client in the coaching/consulting industry who is starting a new business. Focusing on stakeholder goals and creating a website that fosters trust and transparency.

The Problem

Growth Oriented individuals, seeking professional guidance around a change in their lives struggle with finding someone who understands their perspective and empowers them in the decision-making process. They’re concerned about investing a lot of time, money, and effort into a program that might not be a good fit or help them achieve their goals.

The Solution

Create a website with a strong mission and include content that highlights a personalized coaching approach. Utilize uplifting imagery and language that encourages connection while also showing the benefits of engaging in a coaching partnership.

Background

My client, BePresentPDX, provides creative coaching and consulting to growth-oriented individuals facing change in their lives. This is a new part-time business for the owner and he wants a website that showcases his philosophy and services, and provides an easy way for clients to get in touch. 

​

The owner of BePresent PDX emphasizes a personal and holistic approach and wants to convey this through imagery and written content.

BePresentPDXRolesGrey.png

UX/UI and Web Designer, Project Manager 

BePresent PDX's Role

Create written content, provide project feedback

My Role
BePresentPDXToolsGrey.png
Team

1 UX/UI/Web Designer

Client, BePresentPDX

BePresentPDXToolsGrey.png
Tools

Figma, Squarespace,

Google Suite, Zoom, Trello

BePresentPDXTimelineGrey.png
Timeline

November 2022 - April 2023

Design Process
Empathize.png

Discover

Define.png

Define

Ideate.png

Ideate

Prototype.png

Prototype

Test.png

Test

Client Consultation.png

Discover

Initial Client Consultation

During the initial client consultation, my client and I discussed his business goals, project scope, website content, and platform options. We agreed to communicate by email and meet if there was anything that needed to be addressed in-depth, and set a tentative project deadline of February 2023. My client’s main goals for the website are to help market and explain services, provide an easy way to access services, and help educate potential and existing clients about key topics in professional and personal development.

Client Consultation.png
Proto Personas

My client and I collaborated and came up with two proto personas that fit his target demographic. These were based on the type of people he thinks will be drawn to his approach as well as the type of clients he wants to attract. This brainstorming session was very valuable. Not only did I feel like it strengthened our business partnership, but it also helped me understand my client’s goals on a deeper level. For his new business, catering to his target demographic and being authentic in how he portrays himself and his services are more important than the number of people signing up for services.

ProtoPersonaPaul2.png
ProtoPersonaSerena2.png
User Interviews

I conducted five 1:1 interviews to better understand users’ feelings and experiences with decision-making in both life and career transitions/developments. Additionally, I hoped to explore the reasoning behind their motivations to engage in coaching services, and how to design a website that fosters trust and transparency.

InterviewPhoto_edited.jpg
"A good coach helps me figure it out on my own rather than telling me here's the thing you should do."

- Interviewee

User Survey

I surveyed 15 growth-oriented individuals going through a change in their lives to explore their experience with professional coaching, what motivates them to seek professional guidance, and what qualities they look for in a coach.

Insights and Data

If you were to sign up for professional life/career coaching, what qualities are most important to you? Results are the top 5 answers.

Have you ever participated in life or career coaching?

Survey Results 1.png
Survey Results 2.png

What would motivate you to seek professional guidance?

Survey Results 3.png
Reprioritization

During the research process, my client asked to reprioritize and focus on getting a draft done by early January. He wanted to get some ideas generated and was willing to make edits if the research pointed us in a different direction. He also had some questions about website platforms and started picking out a color palette for his site.

​

I shifted gears and focused on the drafts. The analysis of the research and the definition/ideation were carried out during and shortly after the drafts. This was great real-world experience as project requirements, timelines, and goals often change part-way through.

Reprioritization Graphic.png

Define & Ideate

Competitor Analysis

I analyzed five competitors and discussed their websites with BePresentPDX. We found some features and elements that we liked (see below) and used these as references for the design. However, I found that most of the coaching websites were either geared towards life or business, not both, and seemed to lack a focus on working with clients in decision-making/navigating change, skills that can be applied to a variety of situations. This insight encouraged us to emphasize the unique approach of BePresentPDX.

Competitor1.png
Competitor 2.png
Competitor 3.png
User Insight Statement
UserInsightImage.png

Motivated and growth-oriented individuals want a partnership that centers around their goals while also offering different perspectives when seeking professional support around life/career transitions. They need to feel confident that this investment will add significant value to their decision-making process.

Inspiration

I asked BePresentPDX to send me websites they like (not necessarily coaching-related). I used these to draw inspiration for the final design. My client requested that all elements for the website either be photos or content that can be created directly in Squarespace so he can easily update and maintain the website himself. This guided the final design - photographs were the primary source of imagery (no designing in Figma, Adobe Illustrator, or Adobe XD took place, per the client’s request) and the text and graphic elements were all created directly in Squarespace.

Moodboard Alana Ciena.png
Moodboard_Glasshouse Studio.png
Moodboard_Crucible.png
Moodboard Blog.png

Most of the websites my client chose were for law firms or artists and incorporated a lot of photography. My client mentioned if he could combine the style of a law firm with a naturopath, that would be his ideal look and feel.

Brand & Style Direction

BePresentPDX chose their color palette early on in the design process. I added some complementary and contrasting colors to expand upon this selection and my client chose classic and artistic fonts to match the style. I selected images to fit the artistic, welcoming, and minimalist style direction. This brand and style guide was used to drive the high-fidelity design for the final product.

Brand Style Guide.jpg

Prototype & Test

Mid-Fidelity Wireframes & High-Fidelity Previews

I used the inspiration provided by BePresentPDX to create mid-fidelity prototypes and high-fidelity previews. A total of 9 different pages were created in 2 different styles. I created high-fidelity previews of the About and Services pages in each style to help my client picture the final product. We met and my client chose the more classic style using Orpheus Pro and Adobe Garamond Pro fonts. I really enjoyed this part of the project as I was able to quickly bring 2 different styles to life. My client is a visual person, and it helped him to see visually what his options were.

AboutMidFi2.png
ServicesMidFi2.png
AboutHighFi3.png
ServicesHiFi2.png

*Notes: Stock photos are being used for the About page for client privacy as the website is not live yet. The images for the Services page were cropped due to the length of the pages and image quality decreasing when including the all of the content.

Website Direction - Combining Style & Purpose

During our meeting, my client said that he would like to use Squarespace for his website and liked the dark grey background color used in one of the templates he looked at. My client was happy with the structure and content in the drafts and we agreed that I could go ahead and add the images, structure, and content contained in the drafts to the site. The website has 6 main pages: Homepage, About, Services, Resources, Blog, and Contact, and will have multiple pages for specific services, resources, and blog entries.

​

Below are mockups that showcase key features and sections of the website based on BePresentPDX’s goals and user research. One of the main purposes of the website is to authentically showcase my client’s approach and philosophy as this is important to him as well as the users, who want to have a good idea upfront if their values/coach’s style will be a good fit.

BePresentPDXHiFiMockup1.png
BePresentPDXMockup2.png
BePresentPDXMockup3.png
BePresentPDXMockup4.png
BePresentPDXMockup5.png
BePresentPDX Gif3.gif

Website Content, Testing & Revisions

After building the core of the website based on the existing content, target audience, and my client's goals, BePresentPDX completed the rest of the written content. He said that having the imagery, structure, and headings in place helped with filling in the details. Due to time constraints, I conducted 3 informal user tests (including my client and myself testing out his site) to make sure that all the links, buttons and navigation items were working and led the user to the right place. We made some small revisions such as swapping a couple images to more closely reflect his messaging and altered some of the language. 

Case Study Homepage Image.png

Step 1: Built website core based on existing content, target audience, and business info

Homepage Images.png

Step 2: BePresentPXD added details. Revised text based on feedback.

SEO & Website Handoff

After the revisions were completed, I optimized each page for SEO and created a custom 404 page for my client. Squarespace has built in SEO, so I was able to easily add page titles, meta descriptions, alt text, and tags (for the blog). I met with BePresentPDX to hand off their website and provided a tutorial for how to make updates, use his blog, and implement SEO for new content. 

SEO 1.png
SEO 2.png
SEO 3.png

Conclusion

It was so wonderful working with my client on his website. I'm happy to say that he is thrilled with his website and really enjoyed collaborating on this project. My client even reached out to me to let me know how many compliments he's gotten on his site. Below, are a couple comments from my client on LinkedIn.

​

BePresentPDX and I plan to collaborate in the future. If my client needs updates, he asked if he can reach out to me.

Japanese Garden_edited.jpg
Comment from BePresent PDX 2 v.2.png
Comment from BePresent PDX v.2.png
Project Reflection

This was a great learning experience for me as I had the opportunity to provide end-to-end design services for a client. I enjoyed the collaborative process and the extra problem-solving required to take both the users’ and my client’s goals, expectations, and preferences into consideration. It was very rewarding to create something from scratch that will be used during the launch of a new business.

​

One challenge I faced was starting the drafts before I had finished the user research. This was different from my experience in Bootcamp where projects were more or less completed in a linear fashion unless an issue occurred and previous steps had to be reviewed. A key takeaway is that it can be helpful for clients to see tangible progress and drafts/sketches are something they are familiar with, whereas user research and analysis can be less familiar.

​

For this project doing the research during and after the wireframing worked well, partially because BePresentPDX already had an audience they wanted to target and wanted to authentically portray their services, which aligned with the users’ needs. However, this might not always be the case, and then I think it’s key to highlight the importance of user research/analysis and how it creates the foundation for a successful product/service. I think engaging stakeholders in a collaborative discussion around user research is important as well.

​

I look forward to continuing working with BePresentPDX and can't wait to hear how his business goes!

Thank you!
bottom of page