Kelsey Smith
Kelsey Smith
Kelsey Smith
Creating a portfolio site that matches an up and coming artists style.
Creating a portfolio site that matches an up and coming artists style.
Role
Role
Role
Project lead
Ui/UX designer
Project lead
Ui/UX designer
Year
Year
Year
2022
2022
Overview
Overview
Kelsey Smith is a Brooklyn-based Director of Photography that's making a name for herself in the commercial space. Kelsey has shot pieces for clients like Spotify, Madewell, WeWork, Bang & Olufsen and more. Kelsey is driven by a passion for uniqueness and strives to tell clients stories with a sense of veracious human emotion.
Kelsey Smith is a Brooklyn-based Director of Photography that's making a name for herself in the commercial space. Kelsey has shot pieces for clients like Spotify, Madewell, WeWork, Bang & Olufsen and more. Kelsey is driven by a passion for uniqueness and strives to tell clients stories with a sense of veracious human emotion.
Problem
Problem
With her original portfolio being designed in squarespace, a lack of design features and inexperience in design, her site lacked a clear architecture that helped guide viewers through her portfolio. Viewers were forced to click back to the homepage and scroll endlessly through every project that she had ever worked on.
With her original portfolio being designed in squarespace, a lack of design features and inexperience in design, her site lacked a clear architecture that helped guide viewers through her portfolio. Viewers were forced to click back to the homepage and scroll endlessly through every project that she had ever worked on.
Design Process
Design Process
The process starts with an initial kickoff where we discuss timeline, general process and client’s hopes and aspirations for this portfolio redesign. This was followed with an extensive audit of their current site identifying areas for improvement and a thorough look at the competitive research looking at how they present themselves, organization of projects, and project structure. These findings with initial recommendations are presented to client to ensure alignment and prevent future holdups.
Low fidelity wireframes with prototyping are constructed, providing multiple options so that client can test what feels best and provide user feedback.
After Wireframes are approved by client, We work on converting the low fidelity structure into high fidelity designs. Inspired by the client's high-contrast, high-energy videos, a color palette/type system was built and motion was brought in throughout the site. The site was brought over to Wordpress and designed using the Semplice Template system to allow for customization and ease of use.
Upon completion, Site was Q+A to fix any bugs and was user tested by both parties for quality assurance before a final site launch.
The process starts with an initial kickoff where we discuss timeline, general process and client’s hopes and aspirations for this portfolio redesign. This was followed with an extensive audit of their current site identifying areas for improvement and a thorough look at the competitive research looking at how they present themselves, organization of projects, and project structure. These findings with initial recommendations are presented to client to ensure alignment and prevent future holdups.
Low fidelity wireframes with prototyping are constructed, providing multiple options so that client can test what feels best and provide user feedback.
After Wireframes are approved by client, We work on converting the low fidelity structure into high fidelity designs. Inspired by the client's high-contrast, high-energy videos, a color palette/type system was built and motion was brought in throughout the site. The site was brought over to Wordpress and designed using the Semplice Template system to allow for customization and ease of use.
Upon completion, Site was Q+A to fix any bugs and was user tested by both parties for quality assurance before a final site launch.
The process starts with an initial kickoff where we discuss timeline, general process and client’s hopes and aspirations for this portfolio redesign. This was followed with an extensive audit of their current site identifying areas for improvement and a thorough look at the competitive research looking at how they present themselves, organization of projects, and project structure. These findings with initial recommendations are presented to client to ensure alignment and prevent future holdups.
Low fidelity wireframes with prototyping are constructed, providing multiple options so that client can test what feels best and provide user feedback.
After Wireframes are approved by client, We work on converting the low fidelity structure into high fidelity designs. Inspired by the client's high-contrast, high-energy videos, a color palette/type system was built and motion was brought in throughout the site. The site was brought over to Wordpress and designed using the Semplice Template system to allow for customization and ease of use.
Upon completion, Site was Q+A to fix any bugs and was user tested by both parties for quality assurance before a final site launch.
Solution + Results
Solution + Results
With the main goal of improving site navigation and structure, I:
Brought in a layer of categorization details to project thumbnails
Added a featured section of 6 projects to the homepage to reduce scrolling
Created a separate projects page for all page with filtered gallery for focused searching
Implemented video thumbnails for project context
Added a “More Projects” module at the bottom of each product page to help movement throughout the site
Created guidelines for color usage, typography and imagery
Since the launch of here new site Kelseys client base has expanded to 9 new clients including Google, Puma, Neutrogena, and Victoria’s Secret Pink.
With the main goal of improving site navigation and structure, I:
Brought in a layer of categorization details to project thumbnails
Added a featured section of 6 projects to the homepage to reduce scrolling
Created a separate projects page for all page with filtered gallery for focused searching
Implemented video thumbnails for project context
Added a “More Projects” module at the bottom of each product page to help movement throughout the site
Created guidelines for color usage, typography and imagery
Since the launch of here new site Kelseys client base has expanded to 9 new clients including Google, Puma, Neutrogena, and Victoria’s Secret Pink.
With the main goal of improving site navigation and structure, I:
Brought in a layer of categorization details to project thumbnails
Added a featured section of 6 projects to the homepage to reduce scrolling
Created a separate projects page for all page with filtered gallery for focused searching
Implemented video thumbnails for project context
Added a “More Projects” module at the bottom of each product page to help movement throughout the site
Created guidelines for color usage, typography and imagery
Since the launch of here new site Kelseys client base has expanded to 9 new clients including Google, Puma, Neutrogena, and Victoria’s Secret Pink.
More Projects
More Projects
Below is a series of work from previous clients.
To view project hover over the card and click.
