Kelsey Smith

UI/UX

UI/UX

UI/UX

Portofolio

Portofolio

Portofolio

The Challenge

Kelsey Smith, an up and coming Director of Photography, needed a complete overhaul of her portfolio site. Looking for something that felt like her and caught the eye of potential clients.


For this project, I preformed a complete reskin of her then current portfolio site, including a new look and feel, Information structuring, and site interactions.

Kelsey Smith, an up and coming Director of Photography, needed a complete overhaul of her current portfolio site. Looking for something that felt like her and caught the eye of potential clients.

For this project, I preformed a complete reskin of her then current portfolio site, including a new look and feel, Information structuring, and site interactions.

Kelsey Smith, an up and coming Director of Photography, needed a complete overhaul of her current portfolio site. Looking for something that felt like her and caught the eye of potential clients.

For this project, I preformed a complete reskin of her then current portfolio site, including a new look and feel, Information structuring, and site interactions.

Kelsey Smith, an up and coming Director of Photography, needed a complete overhaul of her current portfolio site. Looking for something that felt like her and caught the eye of potential clients.

For this project, I preformed a complete reskin of her then current portfolio site, including a new look and feel, Information structuring, and site interactions.

KEY OBJECTIVES

  • Create new look and feel

  • Create site with templated project pages

  • Use WordPress + Semplice to develop site

Capturing the essence

After talks with the young director, where we discussed the goals of what she wanted out of the refresh, her distinct style, influences, and where she draws inspiration. I created some mood boards that referenced trends from the latest streetwear fashion and her own personal filming style. From that I created a a look and fell that emphasizes the artists use of color and composition and allows her art to create most of the visual interest.

How can we balance providing detailed content while making it digestible for some of the world’s top business leaders? During our discovery phase, using metrics and heatmaps from BCG's development team, Our team discovered that this audience tended to scroll through the full site very quickly. Typically, they would pause on bigger headlines and then keep scrolling till they reached the end. Only to scroll back up looking for the bits of information that was most relevant to them.
 
With this information, It was important for us to find ways to tell a whole narrative story while reducing copy to its true essence. I was tasked with finding ways in which we could condense copy, utilize scroll interactions to highlight information, and create interactive modules that allowed the user to learn as they explored the page.

An assortment of created pages.

Inspired by maximalist design standards, project thumbnails feature Bold typography with vibrant imagery, and clear structuring.

Utilizing Animated thumbnails to provide a lot of context in a short amount of time.

Using a tabbed navigation that encourages users to stop and explore while reducing page height

During the research phase, we looked at alot of editorial references and data driven sites to help tell the story

As the user scrolls, masks shape shift on the page to represent climate change

Portfolio PAge

With the portfolio pages I wanted to immerse the audience in her work. The user is immediately introduced to her world with a animated full screen cover image. As the user scrolls down, the remaining content is broken into two columns. The left side features film stills of the project, while the right side features an I frame of the video and credits to the cast and crew. The use of the film stills allows the user the chance to quickly browse through a project and get a sense of the concept and context without having to watch the full video. At the bottom of each page is a "more projects" module that links to other projects on the site . Ensuring that their journey doesn't stop there.

The full screen cover image provides visual interest and gives context to the project.

Showing the transition from wireframe to final product.

A comparison of the two project thumbnails. Left side is more broken out adding more context. Right side features an animated gif to lure the viewer in.

Solution & Results

  • Created a templated site that allows for updated projects.

  • Moved client from generic Squarespace to custom WordPress website that utilized the Semplice template with CMS


View site here

  • Created interactive modules that utilized tabbed navigation that condensed information

  • Implemented a contact button that invited audience to talk and potentially use BCG for future projects

  • Embedded new and existing video to highlight key points

  • Used scroll animation to create interest and hold audiences attention

  • We saw an increase in page clicks and interactions when compared to previous articles

  • Time spent on page increased compared to previous

  • Created interactive modules that utilized tabbed navigation that condensed information

  • Implemented a contact button that invited audience to talk and potentially use BCG for future projects

  • Embedded new and existing video to highlight key points

  • Used scroll animation to create interest and hold audiences attention

  • We saw an increase in page clicks and interactions when compared to previous articles

  • Time spent on page increased compared to previous


View more of the site below or view site here

  • Created interactive modules that utilized tabbed navigation that condensed information

  • Implemented a contact button that invited audience to talk and potentially use BCG for future projects

  • Embedded new and existing video to highlight key points

  • Used scroll animation to create interest and hold audiences attention

  • We saw an increase in page clicks and interactions when compared to previous articles

  • Time spent on page increased compared to previous


View more of the site below or view site here

More Projects

More Projects

Below is a series of work from previous clients.

To view project hover over the card and click.

Mulligan Golf

Branding

Apparel

Mulligan Golf

Branding

Product Design

Mulligan Golf

Branding

Apparel

Boston Consulting Group

UI/UX

Microsite

Boston Consulting Group

UI/UX

Art Direction

Boston Consulting Group

UI/UX

Microsite

Available for Full-time and Freelance Work.

Contact

ahutchingsdesign@gmail.com

© Hutch Design llc.

Created on Framer.

Available for Full-time and Freelance Work.

Contact

ahutchingsdesign@gmail.com

© Hutch Design llc.

Created on Framer.