CANFIELD BEAUTY

Canfield Beauty is a new division of Canfield Scientific, Inc., created to market imaging hardware and software geared towards the beauty/skincare retail industry.

I worked directly with our marketing department to design a website that would introduce Canfield Beauty as a disctinct entity from Canfield Scientific. A more immediate purpose of this site was to help in the launch of NEXA®, Canfield Beauty’s flagship product.

CANFIELD BEAUTY

Canfield Beauty is a new division of Canfield Scientific, Inc., created to market imaging hardware and software geared towards the beauty/skincare retail industry.

I worked directly with our marketing department to design a website that would introduce Canfield Beauty as a disctinct entity from Canfield Scientific. A more immediate purpose of this site was to help in the launch of NEXA®, Canfield Beauty’s flagship product.

thumbnail3
sitemap

Planning/Sketching Phase

We began by identifying the pages that we needed to create.  I went on to start sketching wireframes while our graphic designer worked on the logo and marketing worked on writing content and photos.

Pictured: Preliminary site-map and initial sketches for the Canfield Beauty Home and NEXA pages.

Planning/Sketching Phase

We began by identifying the pages that we needed to create.  I went on to start sketching wireframes while our graphic designer worked on the logo and marketing worked on writing content and photos.

Pictured: Preliminary site-map and initial sketches for the Canfield Beauty Home and NEXA pages.

sketches
midfidelity

Challenges with Content

From sketches, I moved on to creating medium fidelity mockups in Sketch, to better communicate ideas with my colleagues.

At this point, an obvious challenge for the NEXA product page was the amount of content that I had to plan for. Laying out all the content sequentially would result in a page that scrolled for a very long time. I had to devise a solution that allowed for all the content to be displayed but also resulted in an easy to skim page for the end user.

Pictured: Mid-fidelity mockups for the Home and NEXA pages. The NEXA page has been divided into two halves due to length.

Challenges with Content

From sketches, I moved on to creating medium fidelity mockups in Sketch, to better communicate ideas with my colleagues.

At this point, an obvious challenge for the NEXA product page was the amount of content that I had to plan for. Laying out all the content sequentially would result in a page that scrolled for a very long time. I had to devise a solution that allowed for all the content to be displayed but also resulted in an easy to skim page for the end user.

Pictured: Mid-fidelity mockups for the Home and NEXA pages. The NEXA page has been divided into two halves due to length.

Challenges with Content

From sketches, I moved on to creating medium fidelity mockups in Sketch, to better communicate ideas with my colleagues.

At this point, an obvious challenge for the NEXA product page was the amount of content that I had to plan for. Laying out all the content sequentially would result in a page that scrolled for a very long time. I had to devise a solution that allowed for all the content to be displayed but also resulted in an easy to skim page for the end user.

Pictured: Mid-fidelity mockups for the Home and NEXA pages. The NEXA page has been divided into two halves due to length.

The solution I eventually landed on was to create two expandable sections for each of the versions of NEXA available. This allowed for a page that did not appear overly long and allowed users to delve deeper into whichever section they wanted to read more information on.

Pictured: NEXA page on its journey to high fidelity with unfinished images and typography.

The solution I eventually landed on was to create two expandable sections for each of the versions of NEXA available. This allowed for a page that did not appear overly long and allowed users to delve deeper into whichever section they wanted to read more information on.

Pictured: NEXA page on its journey to high fidelity with unfinished images and typography.

The solution I eventually landed on was to create two expandable sections for each of the versions of NEXA available. This allowed for a page that did not appear overly long and allowed users to delve deeper into whichever section they wanted to read more information on.

Pictured: NEXA page on its journey to high fidelity with unfinished images and typography.

expandcollapse
initialfinal

Journey to Completion

The final published edition of the website differed quite a bit from my initial high fidelity mockups, mostly in color scheme, typography, and sizing. The adjustments were made based on feedback sessions from the marketing team.

Pictured: On the left, a high fidelity mockup of the Home page, still missing some final content.  On the right, the published page. 

Journey to Completion

The final published edition of the website differed quite a bit from my initial high fidelity mockups, mostly in color scheme, typography, and sizing. The adjustments were made based on feedback sessions from the marketing team.

Pictured: On the left, a high fidelity mockup of the Home page, still missing some final content.  On the right, the published page.