Evolution of PureWow's Website

History: My first project for PureWow’s website, when I started working there in 2012, was to update the typography and UI elements on the site to match newly the refreshed branding I had art directed and implemented. I was the sole designer at the company during this time and we only had remote freelance back-end engineers. As I took a closer look at the website structure, I realized image sprite sheets were being used to style all UI elements (icons, buttons, text, and navigation links).

I worked with the back-end engineers and came up with a plan to gradually roll out new styling for the site that didn't rely on images. I implemented web fonts throughout the site which matched our new branding and helped provide CSS styling for UI elements such as buttons and icons.

These first rounds of website enhancements proved successful and not only did these enhancements increase the speed of the site, but they allowed us to make future updates much more efficiently. Following this project, I worked with the key stakeholders of the company to prioritize the areas of the site where I could put my time and resources to. Over the next couple of years, following this first project, we hired a freelance front-end engineer and we were able to start transforming all the styling across the site. The below images show this evolution. I then go on to highlight the major UX site projects that took place following these updates.

Evolution of PureWow's Website

History: My first project for PureWow’s website, when I started working there in 2012, was to update the typography and UI elements on the site to match newly the refreshed branding I had art directed and implemented. I was the sole designer at the company during this time and we only had remote freelance back-end engineers. As I took a closer look at the website structure, I realized image sprite sheets were being used to style all UI elements (icons, buttons, text, and navigation links).

I worked with the back-end engineers and came up with a plan to gradually roll out new styling for the site that didn't rely on images. I implemented web fonts throughout the site which matched our new branding and helped provide CSS styling for UI elements such as buttons and icons.

These first rounds of website enhancements proved successful and not only did these enhancements increase the speed of the site, but they allowed us to make future updates much more efficiently. Following this project, I worked with the key stakeholders of the company to prioritize the areas of the site where I could put my time and resources to. Over the next couple of years, following this first project, we hired a freelance front-end engineer and we were able to start transforming all the styling across the site. The below images show this evolution. I then go on to highlight the major UX site projects that took place following these updates.e major UX site projects that took place following these updates.

Evolution of PureWow's Website

History: My first project for PureWow’s website, when I started working there in 2012, was to update the typography and UI elements on the site to match newly the refreshed branding I had art directed and implemented. I was the sole designer at the company during this time and we only had remote freelance back-end engineers. As I took a closer look at the website structure, I realized image sprite sheets were being used to style all UI elements (icons, buttons, text, and navigation links).

I worked with the back-end engineers and came up with a plan to gradually roll out new styling for the site that didn't rely on images. I implemented web fonts throughout the site which matched our new branding and helped provide CSS styling for UI elements such as buttons and icons.

These first rounds of website enhancements proved successful and not only did these enhancements increase the speed of the site, but they allowed us to make future updates much more efficiently. Following this project, I worked with the key stakeholders of the company to prioritize the areas of the site where I could put my time and resources to. Over the next couple of years, following this first project, we hired a freelance front-end engineer and we were able to start transforming all the styling across the site. The below images show this evolution. I then go on to highlight the major UX site projects that took place following these updates.

Evolution of PureWow's Website

History: My first project for PureWow’s website, when I started working there in 2012, was to update the typography and UI elements on the site to match newly the refreshed branding I had art directed and implemented. I was the sole designer at the company during this time and we only had remote freelance back-end engineers. As I took a closer look at the website structure, I realized image sprite sheets were being used to style all UI elements (icons, buttons, text, and navigation links).

I worked with the back-end engineers and came up with a plan to gradually roll out new styling for the site that didn't rely on images. I implemented web fonts throughout the site which matched our new branding and helped provide CSS styling for UI elements such as buttons and icons.

These first rounds of website enhancements proved successful and not only did these enhancements increase the speed of the site, but they allowed us to make future updates much more efficiently. Following this project, I worked with the key stakeholders of the company to prioritize the areas of the site where I could put my time and resources to. Over the next couple of years, following this first project, we hired a freelance front-end engineer and we were able to start transforming all the styling across the site. The below images show this evolution. I then go on to highlight the major UX site projects that took place following these updates.

Evolution of PureWow's Website

History: My first project for PureWow’s website, when I started working there in 2012, was to update the typography and UI elements on the site to match newly the refreshed branding I had art directed and implemented. I was the sole designer at the company during this time and we only had remote freelance back-end engineers. As I took a closer look at the website structure, I realized image sprite sheets were being used to style all UI elements (icons, buttons, text, and navigation links).

I worked with the back-end engineers and came up with a plan to gradually roll out new styling for the site that didn't rely on images. I implemented web fonts throughout the site which matched our new branding and helped provide CSS styling for UI elements such as buttons and icons.

These first rounds of website enhancements proved successful and not only did these enhancements increase the speed of the site, but they allowed us to make future updates much more efficiently. Following this project, I worked with the key stakeholders of the company to prioritize the areas of the site where I could put my time and resources to. Over the next couple of years, following this first project, we hired a freelance front-end engineer and we were able to start transforming all the styling across the site. The below images show this evolution. I then go on to highlight the major UX site projects that took place following these updates.

Site Redesign I

Summary: Now that the website had an efficient CSS structure, I was able to focus on larger UX structural changes. The first huge overall/redesign came in 2015, where we focused on the navigation of the website and clearing out a lot of the clutter that was hindering the UX. Too many categories in the nav, social shares on article pages and action buttons confused the user because there was no hierarchy. Alongside my product manager, I sat down with the key stakeholders at the company to define the top goals of the business which allowed us to determine what website improvements would align with the company objectives.

Timeline: 4-6 months

Team: Design Lead, Junior Designer, Project Manager, Front-End Engineer, Back-End Engineer

Site Redesign I

Summary: Now that the website had an efficient CSS structure, I was able to focus on larger UX structural changes. The first huge overall/redesign came in 2015, where we focused on the navigation of the website and clearing out a lot of the clutter that was hindering the UX. Too many categories in the nav, social shares on article pages and action buttons confused the user because there was no hierarchy. Alongside my product manager, I sat down with the key stakeholders at the company to define the top goals of the business which allowed us to determine what website improvements would align with the company objectives.

Timeline: 4-6 months

Team: Design Lead, Junior Designer, Product Manager, Front-End Engineer, Back-End Engineer

Site Redesign I

Summary: Now that the website had an efficient CSS structure, I was able to focus on larger UX structural changes. The first huge overall/redesign came in 2015, where we focused on the navigation of the website and clearing out a lot of the clutter that was hindering the UX. Too many categories in the nav, social shares on article pages and action buttons confused the user because there was no hierarchy. Alongside my product manager, I sat down with the key stakeholders at the company to define the top goals of the business which allowed us to determine what website improvements would align with the company objectives.

Timeline: 4-6 months

Team: Design Lead, Junior Designer, Product Manager, Front-End Engineer, Back-End Engineer

Site Redesign I

Summary: Now that the website had an efficient CSS structure, I was able to focus on larger UX structural changes. The first huge overall/redesign came in 2015, where we focused on the navigation of the website and clearing out a lot of the clutter that was hindering the UX. Too many categories in the nav, social shares on article pages and action buttons confused the user because there was no hierarchy. Alongside my product manager, I sat down with the key stakeholders at the company to define the top goals of the business which allowed us to determine what website improvements would align with the company objectives.

Timeline: 4-6 months

Team: Design Lead, Junior Designer, Product Manager, Front-End Engineer, Back-End Engineer

Site Redesign I

Summary: Now that the website had an efficient CSS structure, I was able to focus on larger UX structural changes. The first huge overall/redesign came in 2015, where we focused on the navigation of the website and clearing out a lot of the clutter that was hindering the UX. Too many categories in the nav, social shares on article pages and action buttons confused the user because there was no hierarchy. Alongside my product manager, I sat down with the key stakeholders at the company to define the top goals of the business which allowed us to determine what website improvements would align with the company objectives.

Timeline: 4-6 months

Team: Design Lead, Junior Designer, Product Manager, Front-End Engineer, Back-End Engineer

Challenge: PureWow had several different categories and all were currently displayed in the top nav of the website. Working with my project manager we redefined the navigational structure and then implemented a top navigation UX that allowed the user to more easily access the content. At this time, although the site had a refreshed CSS structure, the website was a hodgepodge of different typefaces iconography with no consistency.

Role: Design Lead - I researched competitors who had similar content structures to PureWow's and then worked with my project manager to redefine a site map for the navigation of PureWow. I created wireframes and prototypes of a new top navigation for the website. The new navigation we built had only the main categories and content we saw most essential and that seemed necessary based on analytics.

The second half of this project was cleaning up the look and feel of the site. I work with a junior designer and front end engineer to update the web typography across the site. By cleaning up the typography in conjunction with some small UI elements of the elements: social shares, next article buttons, and other modules, the goal was to create more white space and room for the content to breathe. I researched web font services to use that allowed us to find a font that worked with the current branding helping to achieve consistences. Working with the front-end engineer on the styling, I provided specific HTML/CSS/JS specs for him and the back-end team to use.

Software: Adobe Photoshop, Sketch, Invision, HTML, CSS

Challenge: PureWow had several different categories and all were currently displayed in the top nav of the website. Working with my project manager we redefined the navigational structure and then implemented a top navigation UX that allowed the user to more easily access the content. At this time, although the site had a refreshed CSS structure, the website was a hodgepodge of different typefaces iconography with no consistency.

Role: Design Lead - I researched competitors who had similar content structures to PureWow's and then worked with my project manager to redefine a site map for the navigation of PureWow. I created wireframes and prototypes of a new top navigation for the website. The new navigation we built had only the main categories and content we saw most essential and that seemed necessary based on analytics.

The second half of this project was cleaning up the look and feel of the site. I work with a junior designer and front end engineer to update the web typography across the site. By cleaning up the typography in conjunction with some small UI elements of the elements: social shares, next article buttons, and other modules, the goal was to create more white space and room for the content to breathe. I researched web font services to use that allowed us to find a font that worked with the current branding helping to achieve consistences. Working with the front-end engineer on the styling, I provided specific HTML/CSS/JS specs for him and the back-end team to use.

Software: Adobe Photoshop, Sketch, Invision, HTML, CSS

Challenge: PureWow had several different categories and all were currently displayed in the top nav of the website. Working with my project manager we redefined the navigational structure and then implemented a top navigation UX that allowed the user to more easily access the content. At this time, although the site had a refreshed CSS structure, the website was a hodgepodge of different typefaces iconography with no consistency.

Role: Design Lead - I researched competitors who had similar content structures to PureWow's and then worked with my project manager to redefine a site map for the navigation of PureWow. I created wireframes and prototypes of a new top navigation for the website. The new navigation we built had only the main categories and content we saw most essential and that seemed necessary based on analytics.

The second half of this project was cleaning up the look and feel of the site. I work with a junior designer and front end engineer to update the web typography across the site. By cleaning up the typography in conjunction with some small UI elements of the elements: social shares, next article buttons, and other modules, the goal was to create more white space and room for the content to breathe. I researched web font services to use that allowed us to find a font that worked with the current branding helping to achieve consistences. Working with the front-end engineer on the styling, I provided specific HTML/CSS/JS specs for him and the back-end team to use.

Software: Adobe Photoshop, Sketch, Invision, HTML, CSS

Challenge: PureWow had several different categories and all were currently displayed in the top nav of the website. Working with my project manager we redefined the navigational structure and then implemented a top navigation UX that allowed the user to more easily access the content. At this time, although the site had a refreshed CSS structure, the website was a hodgepodge of different typefaces iconography with no consistency.

Role: Design lead - I researched competitors who had similar content structures to PureWow's and then worked with my project manager to redefine a site map for the navigation of PureWow. I created wireframes and prototypes of a new top navigation for the website. The new navigation we built had only the main categories and content we saw most essential and that seemed necessary based on analytics.

The second half of this project was cleaning up the look and feel of the site. I work with a junior designer and front end engineer to update the web typography across the site. By cleaning up the typography in conjunction with some small UI elements of the elements: social shares, next article buttons, and other modules, the goal was to create more white space and room for the content to breathe. I researched web font services to use that allowed us to find a font that worked with the current branding helping to achieve consistences. Working with the front-end engineer on the styling, I provided specific HTML/CSS/JS specs for him and the back-end team to use.

Software: Adobe Photoshop, Sketch, Invision, HTML, CSS

Challenge: PureWow had several different categories and all were currently displayed in the top nav of the website. Working with my project manager we redefined the navigational structure and then implemented a top navigation UX that allowed the user to more easily access the content. At this time, although the site had a refreshed CSS structure, the website was a hodgepodge of different typefaces iconography with no consistency.

Role: Design Lead - I researched competitors who had similar content structures to PureWow's and then worked with my project manager to redefine a site map for the navigation of PureWow. I created wireframes and prototypes of a new top navigation for the website. The new navigation we built had only the main categories and content we saw most essential and that seemed necessary based on analytics.

The second half of this project was cleaning up the look and feel of the site. I work with a junior designer and front end engineer to update the web typography across the site. By cleaning up the typography in conjunction with some small UI elements of the elements: social shares, next article buttons, and other modules, the goal was to create more white space and room for the content to breathe. I researched web font services to use that allowed us to find a font that worked with the current branding helping to achieve consistences. Working with the front-end engineer on the styling, I provided specific HTML/CSS/JS specs for him and the back-end team to use.

Software: Adobe Photoshop, Sketch, Invision, HTML, CSS

Site Redesign II

Summary: In 2017, PureWow did a redesign of the desktop website navigation to help with ad viewability and create a more concise navigation structure for the user.

Timeline: 3 months

Team: Design Lead, Product Manager, Front-End Engineer

Site Redesign II

Summary: In 2017, PureWow did a redesign of the desktop website navigation to help with ad viewability and create a more concise navigation structure for the user.

Timeline: 3 months

Team: Design Lead, Product Manager, Front-End Engineer

Site Redesign II

Summary: In 2017, PureWow did a redesign of the desktop website navigation to help with ad viewability and create a more concise navigation structure for the user.

Timeline: 3 months

Team: Design Lead, Product Manager, Front-End Engineer

Site Redesign II

Summary: In 2017, PureWow did a redesign of the desktop website navigation to help with ad viewability and create a more concise navigation structure for the user.

Timeline: 3 months

Team: Design Lead, Product Manager, Front-End Engineer

Site Redesign II

Summary: In 2017, PureWow did a redesign of the desktop website navigation to help with ad viewability and create a more concise navigation structure for the user.

Timeline: 3 months

Team: Design Lead, Front-End Engineer, Back-End Engineer

Challenge: Work with a project manager to find a solution for the viewability of ads across the homepages on desktop. At the time, PureWow was seeing a dip in ad viewability because the top and on the website wasn't in view long enough before the user scrolled down the page. The navigation at that time was clunky. It was a sticky nav that housed the entire site structure in a hover dropdown. The goal of the redesign not only was to find a solution for the ad viewability but also to clean up the structure of the navigation.

Role: Design Lead - Create wireframes and prototypes for navigation behavior. Research competitor navigation structures and behaviors. Provide specific HTML/CSS/JS specs for the engineering team and work with them to QA the prototype once it is built.

Solution: Reduce the height of the nav and place all main categories and landing pages within a hamburger side nav. Upon scroll, the nav will collapse and the top sticky ad will scroll with the user for a second and then disappear. This will help negate any ad viewability concerns.