Core Health & Nutrition

Long Island's newest health & wellness outlet

At a Glance

My Role: Free Lance Designer
Platform: Responsive Website
Date: Aug 2017
Client: Core Health & Nutrition

Highlights:

PERSONA

COMPETITIVE ANALYSIS

USER JOURNEY

CONTENT STRAT

SKETCHING

RESPONSIVE WEB DESIGN

WIREFRAMING

SITE MAP

STYLE GUIDE

Final Core Laptop.png

The Challenge

Core Health & Nutrition (CHN), a newly minted company based on Long Island, was looking to release a website to begin drawing attention to its services. The challenge at hand centered around the potential customers. CHN was looking to thrive by carving a local niche within a sea of successful health-related websites and companies.    

The nutritionists at the wheel of the company were aware of their urgent need to launch a website, yet had no prior experience undergoing such a project. To their wonder, the process would be far more in depth than they had anticipated. 

The Solution

Research

I began by helping the group better identify their core demographic. Utilizing this information, I was able to develop a content strategy and analyze competition for this audience. 

I also managed to discover gleaming pain points, such as their older audience's lack of technological prowess. 

Construct

A careful site-wide hierarchy ensured a natural chronology. Every aspect of the site was ensured to meet users' needs in a practical, digestible manner. 

During this phase, I also incorporated responsive web design which I consider standard practice within the UX industry by now.

Design

A balance between warm comfort and dependable professionalism was carefully struck through objective methodologies. 

The Results

Presentation & Development

In the end the group loved their website, which stood as a guiding light for the own brand development.
The group excitedly took their new designs to an independent developer - the site is currently under construction.

Personal Takeaway

My first take at freelancing was a great experience - I was able to conquer the practice's one key difficulty: technical communication.

Freelancing provides professionals with experience collaborating alongside novice clientele. With typically limited exposures to technical terminology, practices, and ideology, these stakeholders do well to test the interpersonal skills of UX experts. 

Overall, everything went smoothly and the stakeholder reception was overwhelmingly positive.

Full Case Study

1. Research

Discover

Personas

Content Strategy

Competition Analysis

Empathize

User Journey

Define

Site Map

2. Construct

Ideate

Sketching

Wireframing

Responsive Design

Validate

None

Time Restraints

3. Design

Stylize

Color Palette

Typography

Atomic Design

Logo Design

Finalize

Hi-Fi Mockups

RESEARCH:
DISCOVER

Personas

Purpose:

The first step I took was the identify who this site would cater to. I worked collaboratively with the nutritionists to generate user persona content. Since they were already working closely with clientele on a daily basis, their ability to determine this information was fluid.

Insight:

  • Not Too Technologically Inclined: Although the focused demographic spanned multiple age groups, the bulk of the audience was somewhere in the 45-65 year-old range. This group's lack of technological prowess would be a focal paint point moving forward. 
  • Motivate and Guide: While the process of receiving standard medical treatment may come as second nature, the pursuit of nutritionally based self-help may be intimidating to some. For many users, the first step may be the hardest. CHN's site would need to provide a welcoming environment for weary visitors in an effort to convert curiosity into action. 
  • The Real Deal: Trustworthiness is vital in any health-related field as end users entrust their livelihood with the admins at be. This site would need to present a sense of authenticity to its users. 

Content Strategy: Voice & Tone

Purpose:

With the audience narrowed down, the content strategy was up next. As noted by Distilled.net's Hannah Smith, "Content creation without strategy often leads to disparate content with no core themes or purpose. This is confusing to your target audience and can negatively impact your brand’s credibility."

Coming to a universally agreed upon voice and tone develops uniformity for the site's content moving forward. By utilizing an attribute selection approach, the nutritionists and I could accomplish this goal as we all learn more about the company. 

Insight (Ranking order of attribute desires):

  • Welcoming 
  • Authentic 
  • Empowering 
  • Simple 
  • Modern

Competitive Analysis

Purpose:

The final step of the empathy phase was the understand who we're up against. By grading CHN's self-identified competitors across the selected attributes, I could get better strategize how to enable to brand to stand out. 

Insight:

  • Clear stand-out: NIHM and Nutrish Mish had both the highest total scores and highest scoring amongst the 3 most significant attributes. These two would be utilized for comparisons later on in the project.
  • Subjectivity: While this analysis proved informative, I do need to keep in mind that these same variables are not objective. A more scientific approach may be more reliable in future projects. 

RESEARCH:
EMPATHIZE

User Journey

Purpose:

Armed with an understanding of both the target user and the potential website experience, I created a job story to get a sense of chronology amongst the website assets. 

Insights:

The Journey went as predicted - all instances were properly accounted for an well predicted.

RESEARCH:
DEFINE

Site Map

After careful consideration, I utilized the User Journeys to build the Site Map.  

The Site Map was very straightforward - the homepage would lead to all pages and all pages would lead to the Appointments page. On top of that, the Services and Payments pages would include CTAs for one another, as would the Who We Are and Our Mission pages. 

Construct

CONSTRUCT:
IDEATE

Sketch

Before wireframing, sketching allows for quick iteration and ideation. With no line-less paper nearby, I took to one of my college-ruled notebooks.

Wireframing

After completing the sketches, I wielded both Axure & Sketch to generate some initial wireframes. 

Initial test runs:

Higher-fidelity:

Standard low-fidelity:

Responsive Design

Purpose:

In my opinion, responsive design should be standard practice for any UX practitioner when creating a client's website. With recent reports of mobile web traffic finally surpassing desktop web traffic, the need for accommodating mobile users is more crucial than it's ever been.


Insight:

Since I typically complete responsive design decisions during the construction phase, I decided to include this content at this point in the case study. However, for CHN, I found myself a bit out of order. Based on the timing of various work, I was able to complete the design phase before jumping into the following responsive designs. 

Therefore, the design decisions are included in these depictions. 

Tablet (Portrait): 768px

Mobile (Portrait): 320px

DESIGN:
STYLIZE

Color Palette

Insight from the Tone & Voice Analysis proved critical for all aspects of the design phase. When arranging the color palette I wielded color psychology to instill a welcome and health-conscious environment.

I simultaneously generated a branding ideology: various colors of apples. I associated "Core" to not only mean "essential" and "necessary" but to also imply the core of an apple, a common symbol of health. Without a set branding strategy, CHN would certainly love the idea.

Typography

When deciding typography, I decided to focus on a few key traits:

  • Readability: With the demographic's pain points looming, a sense of easy readability would be crucial. This also aids scannability, essential for those quickly looking for specific information regarding their health. 
  • Approachability: A need to compliment the color palette.
  • Professionalism: A sense of integrity and modernity would need to prevail. 

Bringing all of these together I utilized the following typefaces: 
  • Lato
    • Lato's semi-rounded details give it a warm feeling, while the strong structure provides stability and seriousness. 
  • Roboto
    • Both highly geometric and prone to friendly, open curves, Roboto is a perfect fit for paragraph text. Readability is essential at this level.
  • Lora
    • Quote text needs a sense of nostalgia to bring recollections to life. As per Google, Lora "perfectly conveys the mood of a modern-day story"

Atomic Design

As mentioned in my Cadence Case Study, Atomic Design is a design methodology I often use. Originally popularized by Brad Frost.

I designed fundamental aspects of the UI, such as form input and spacing, allowing the entire UI to reflect a unique, uniform environment. 

Logo Design

For the final step of designing, I mocked up a quick logo embodying the previously mentioned apple core theme in order to get the nutritionists off the ground brand-wise. While still attempting to find a website developer and a logo designer, I knew this would come in handy for now. The team wound up loving it.
Core logo final.png
core logo circles 1.jpeg
core logo circles 2.jpeg

DESIGN:

FINALIZE

Hi-Fi Mockups

Take a look at the final creations. 
For information regarding final presentations, results, and more just head to the Results section. 

Let's Talk

Contact

15 All Points Dr., Holbrook, NY 11741
+1 (631) 338-5549
AlexBennettUX@gmail.com
AlexThomasBennett26@gmail.com
Linkedin.com/in/AlexBennettUX

SIMBLAWebsite Builder