BRIEF & BACKGROUND
I was hired by Nasco Education at the beginning of an entire site and brand overhaul. Nasco has been a company for over 80 years but had never had a dedicated web designer before me, so I really had my work cut out. Not only was I meant to implement their new branding, but I needed to change the design of the site from the ground up. The existing site had been pieced together by graphic designers over the years, using an outside WYSIWYG software that was imported in. Although they had done their best with the task given to them, there was no consistent design or color scheme on the site as a result.
I was given a page mockup for the new homepage design and the new marketing style sheet as a basis to work from, created for Nasco by a design consulting company. Based on their plans, I had to create a new web style guide and build out the new site—over 300 pages in size.
ORIGINAL PAGE DESIGNS

The original homepage design. It had a lot of text embedded into photos and was therefore quite inaccessible to screenreaders.

One of the original landing page designs, built with external WYSIWYG software

One of the original curriculum page designs, built with external WYSIWYG software

TECHNICAL LIMITATIONS
Nasco Education was running their website with an older out-of-date version of Hybris, so from the get-go, I knew I would be facing lots of limitations. Additionally, their backend development team was a consulting firm in India, with whom I shared no work hours due to time zones. They had complete control of the CSS styles on the site already, and in order to change those, I had to send in requests and wait sometimes weeks for the next deployment.
Additionally, because of the buggy system, a lot of the previously built components were buggy, which left me with very few options to choose from.
THE WORKAROUND
To make this project feasible, I knew I needed a way to create components and edit CSS on my own, quickly. In order to do that, I requested our backend team build me two components—open HTML components of different widths that worked as blank slates. I also created a secondary, external style sheet that I had access to and could edit rapidly.
Using this process I created over 30 HTML templates for different components and stored them in a repository. Using templated designs added the consistency that the website had previously lacked, but having them built with HTML also made them totally customizable to suit different needs.
WORKFLOW
During my time at Nasco, I worked alongside a small web team and a larger marketing team. While I was the one designing and coding most of the site, all of my design decisions were reviewed by peers. My workflow can be broken down into basic steps, with peer review as the main focus. 
1. Work brief comes in for a new component or page.
2. I create mockups in Adobe XD and share them with the web and marketing teams for review
3. Several rounds of revisions are undergone on the initial mockup before I am given the green light to begin coding.
4. I built out the requested component using HTML and CSS on Adobe Dreamweaver, and sent previews of the design back to the marketing team for final design review. 
5. Pushing the new page live!
6. Final copy and link review before the project is declared complete.
FINAL DESIGNS
Homepage

Homepage re-design

Homepage redesign mobile view post-redesign

Landing page

One of the many Nasco landing pages, post-redesign. All of this is responsive, templated, and within the style guide.

Nasco landing page mobile view post-redesign

Curriculum page

An example curriculum page post-redesign. For this page, I was asked to make the design as close to the original as possible, while also fitting our new style guide.

Curriculum page mobile view post-redesign

Back to Top