Comprehensive user research, branding, and responsive web design for a start-up Nutritional Therapy Practitioner business developed in Webflow.
02 The Challenges
My client did not have a business name identified, and so establishing her brand was a key area of focus
There is a negative stigma around "holistic health" that needs to be addressed with the website content
Determining how to structure the pricing and services is tricky in the NTP space because of the effort required for both parties and timeline to results
03 Users & Audience
Our target audience for Alpine & Shine is 30-65 years of age and skews towards women. My client wanted to target her ski town of Steamboat Springs in particular, although she could also see clients virtually across the US and Canada.
04 Role(s)
Branding Consultant, User Researcher, UX/UI Designer, Web Developer
As part of my proposal and scope of work I dedicated time to create a one-sheet research plan. This ensured that Dana and I were aligned on the research objectives and methodologies that I was going to employ. Once I had received her feedback and approval, I dove into secondary research and analyzed her competition/peers and how they presented their brand and value proposition, brand aesthetics, and services and pricing. I also tried to identify some potential niches that Dana could carve out, and did some demographic research on her user.
One-Sheet Research Plan
Takeaways
I spent quite a bit more time than I had initially budgeted on secondary research, but it was extremely interesting and valuable insight for later on in the project
At this stage, I quickly realized how varied the approach to pricing and services can be for NTP's and Holistic Health professionals
User Research Interviews
Summary
After conducting secondary research, the next step in my research plan was user research interviews. In total, we sourced 4 users, each with their own unique background and health difficulties that they were addressing via consultation with Dana.
Takeaways
It always fascinates me how people perceive questions so differently! One in particular that drew unique responses was, "What does health and wellness mean to you?"
During several interviews, it was noted how lengthy the onboarding process because of the NAQ (Nutritional Assessment Questionnaire) in particular. This led to several conversations with Dana on how we could make this feel less burdensome for future clients.
02 Define
Synthesis of Findings & Personas
Summary
When synthesizing findings from the interviews, I made sure that I tied every single finding to how it impacted the design or website content in some way. This acted as a filter of sorts, as it ensured I was only including relevant information. Once that was completed, I created two personas, which not only helped to put a face to the user that I was designing for but also helped present key pieces of the findings like goals and motivations into a quick snapshot format.
Persona 1 of 2
Takeaways
While I have heard a fair amount of criticism on the benefits of Persona's amongst the UX community, it was well received by my client because of its brevity rather than the more comprehensive findings document I created
When I initially sent over my research findings document, Dana noted that it was a bit overwhelming. It is important to consider how information is being presented and how it will be received.
Sitemap
Summary
Based on my primary and secondary research, I created the following sitemap for review and focused on keeping things simple with the overall site structure.
Sitemap
Takeaways
Having a key in the top left made it easier to decipher for someone who hasn't seen a sitemap before
03 Ideate & Design
Branding & Logo Design
Summary
From the inception of the project Dana and I had several conversations about what to name her business, which at that point was undecided. She had a list of adjectives and emotions that she wanted her clients to associate with working with her in mind, which she shared with me. I spent several hours playing with words, and created a list of some of my favorites that I would then cross check for availability. She really liked "Alpine & Shine" when I presented it as an option, and after sleeping on it for a night, she wanted to move forward! This then gave me a better idea of how I could approach the logo design.
For the logo design process, I took an iterative approach starting with 3 very different styles to choose from. Once she had chosen a direction, I was then able to fine tune the final logo from there and that seemed to work really well in this instance.
Round 1 Variations
Final Logo Design
Takeaways
It is hard choosing a brand/business name!
Giving someone options to choose from makes them feel more involved in the creative process and allows you to gather feedback on several designs
Sketching & Wireframing
Summary
Due to time constraints wireframing was limited to three key pages, the home page, services page, and blog list page. I provided annotations for each to provide more context.
Takeaways
I tried to set expectations well when it came to wireframes, as it was a source of confusion at times at my last agency
Presenting and discussing the wireframes with my client gave us the opportunity to brainstorm together which made this a more productive conversation
Style Tile
Summary
Before creating the UI in Figma, I created a Style Tile for the Alpine & Shine brand. After coming across Cormorant on Typewolf, I did some more research on pairings and experimented with how it looked with the logo design. Based on my research on peers and the psychology of color I wanted to use pastels for the color scheme.
Alpine & Shine Style Tile
Takeaways
Having darker and lighter shades for the color palette pre-established is really useful during the UI design process
Establishing the imagery style during the Style Tile phase makes searching for imagery during the UI phase a lot more focused
UI Design
Summary
With the Style Tile approved, I proceeded with creating desktop and and mobile UI mockups in Figma for 6 distinct pages. This included the home page, services page, blog list page, blog post page, contact page, and about page.
A Brief Glance At the UI
Takeaways
As I was working on the designs, there were a few items that I had reservations about when taking it to development. In hindsight, I would have hopped into Webflow and experimented with that prior to presenting anything to the client
I sent over the UI drafts in batches to the client, starting with the home page as I felt that getting that approved would streamline things for the other pages. While I think that doing this for some clients would be beneficial, in this instance it would have been better to complete the first draft for all and then present them all at once to avoid overwhelm and confusion
04 Prototype/Development
Webflow Development
Summary
Due to time constraints, my client and I agreed to proceed with the development in Webflow and use the live website as our high-fidelity prototype rather than create a mid-fidelity prototype in Figma. Overall, the website development process went really smoothly and I was largely able to carry over the UI designs from Figma to the final product. After working with my client to finalize the copy and get her Practice Better account set up, I willthen proceed forward with re-pointing the DNS to the appropriate domain, getting Google Analytics and Search Console set up, and completing other activities to prepare for launch.
While it was highly customized, I did select a Free Webflow theme to use as a framework for the development rather than completely build everything from scratch in order to be more efficient with time
I got far more comfortable using Webflow during this project, which sped up my development time considerably and made responsive development feel a lot more manageable
05 Test & Iterate
Usability Testing
Summary
While waiting on some of the final copy items from Dana, I proceeded forward with creating a Usability Test plan. I shared this with her once finalized and after receiving approval, started to source participants and schedule Usability Tests. I largely focused on the core conversion items, like scheduling a booking or submitting a form fill, but was also interested in seeing how easily the user could navigate through the website. I also wanted to hear their perspective on the pricing and services options.
Takeaways
Going back to what I referenced earlier, I wanted the UX to extend beyond the website experience to the overall patient experience. As such, one of my findings was that several users wanted to book Online Video calls to see Dana in person for the intro Discovery Call. While Dana was initially hesitant, she decided to allow this option within her Practice Better account
To a lesser-degree, the Usability Testing acted as a form of QA as minor adjustments and improvements were needed to the website that I may not have caught otherwise before going live
Top 5 Things I Learned
Working with Dana and helping her get started with her new business was an extremely rewarding experience. Here are some of the top things I learned during the project:
Research: Being thorough is a wonderful thing, however it is also important that the information is packaged and delivered in a digestible way. At times, I overwhelmed my client with information and I learned that I needed to dial it back and work on how I presented information and deliverables going forward.
UX: For this project, I wanted to focus on the whole NTP client journey, not just from the moment someone lands on the website to when they book. Conveying that to Dana was really important, and it led to a lot of great conversations about how we could improve her onboarding process and workflow as well.
Branding: Picking a name for a new business venture can be an extremely daunting thing. By aligning on some keywords and emotions that we wanted her clients to associate with her NTP business, we were able to land on something that we both loved.
Logo Design: For the logo design process, I took an iterative approach starting with 3 very different styles to choose from. Once she had chosen a direction, I was then able to fine tune the final logo from there and that seemed to work really well in this instance.
Development: I had concerns on how effectively I could take my unique UI designs in Figma and convert that to actual development in Webflow. That said, it went really well and my skill and comfort with Webflow increased substantially. So much so that I decided to revamp my Portfolio!
