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.
Timeline
I started working on the rebrand project in late August, and we needed to have the core 60 pages designed and implemented by mid-November. 
That gave me a little over three months to complete the bulk of this project.
ORIGINAL PAGE DESIGNS
The original Nasco homepage, with the old logo. As you can see, there was no consistency between their components.
The original Nasco homepage, with the old logo. As you can see, there was no consistency between their components.
This was one of the original kit pages - it was far too busy and inconsistent, and it wasn't clear what was and wasn't clickable.
This was one of the original kit pages - it was far too busy and inconsistent, and it wasn't clear what was and wasn't clickable.
The original Esports curriculum page was created using third-party software that needed to be removed. Although the information on this page was more organized, the design shared no similarities with the rest of the site.
The original Esports curriculum page was created using third-party software that needed to be removed. Although the information on this page was more organized, the design shared no similarities with the rest of the site.
Target Audience
Data collected prior to this project suggested that most of the visitors to Nasco's website are grade school teachers and administrators. These people are primarily customers searching for items to buy in bulk through their school system. 
Because Nasco services school systems across the united states, there is only so much that can be assumed about the customers. For instance, their political stances, school size, and budget create a very diverse set of needs. However, there are a few unifying factors across all of these people, according to consumer data and feedback from clients. 
1. These people are overworked and at their limits due to the demands of teaching through the COVID epidemic. They are looking for a streamlined e-commerce experience and products that can make their lives easier.
2. Individual kits are highly in-demand. Boosting the visibility of these products on the website will benefit sales.
PERSONA
Amanda Williams
26 · Atlanta · Science Teacher · Single
BIO
Amanda is a new teacher at Sunnyside Elementary in Atlanta, Georgia. She was hired during the pandemic and needs to catch her students up to speed on the education they have missed.
FRUSTRATIONS
Her school is facing budgeting problems, and Amanda is only given the funds to buy a limited selection of products for the school year.
Amanda has been working overtime for the past year and is writing weekly lesson plans and offering additional tutoring for students who need help. She averages five hours of sleep a night.
WANTS & NEEDS
Amanda is interested in purchasing individual kits for her students to account for an unpredictable school year. She doesn't know if or when her class will return to remote learning.
WEBSITE PAIN POINTS
- Inconsistent design across all pages of the site
- Confusing site map and inconsistent page hierarchy within subjects
- Lack of information hierarchy on main pages
Solutions
- Clean, modern design on the website to instill a sense of trustworthiness and order
- Consistent page hierarchy and re-structured sitemap
- Adding breadcrumb trails to the top of each page
- Adding secondary links throughout the web pages to increase traffic to specific pages
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.
TECHNICAL SOLUTIONS
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.
Iterative WORKFLOW
During my time at Nasco, I worked closely with the web and marketing teams. 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. The work brief comes in for a new component or webpage. On complex pages, we hold preliminary meetings to discuss the content and hierarchy needs. 
2. I sketch out rough paper prototypes based on the content provided, and send those to the team for critique.
3. Once the paper prototypes are approved, I create mockups in Adobe XD and share them with the web and marketing teams for review. 
4. Several rounds of revisions are undergone on the initial mockup before I am given the green light to begin coding.
5. I build out the requested component using HTML and CSS on Adobe Dreamweaver, and send previews of the design back to the marketing team for final design review. 
6. We push the new page to the live site!
7. Final copy and link review before the project is declared complete.
NEW PAGE HIERARCHY
Coding plans
pAPER prototypes
FINAL DELIVERABLES
web style guide
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

Takeaways
Working on this project taught me a lot about my preferred work environment, and what to strive for in the future. 
I loved getting to work closely with a team to iterate and develop the new Nasco site. My only desire would be to work with a team of other web designers -- people I can learn from and bounce ideas off of. Additionally, I would have liked to slow the pace down a bit when designing and implementing the site. Because of the tight turnaround time, I did not get to focus on the mobile design as much as I would have liked.
Working as a Web Designer at Nasco has pushed me to consider how I want to progress my career. In the future, I want to do a lot more research and user testing throughout my project. Because of this, I will likely pivot toward a UX or Product Designer role in the future. I love to work on UI, but strongly believe that a good design needs to have a strong, human-centered foundation.
About Cyrena
Cyrena Johnson is a small but determined human, designer, and illustrator. Her interests in design are multidisciplinary, including but not limited to UX design, web design, packaging, and illustration. Outside of design, she loves to bake, play video games, and spend time with her various pets. She is also actively expanding her illustration business and sells her work at conventions and local shops in Bellingham. 
Cyrena graduated cum laude from Western Washington University in June of 2020 with a BFA in Design, a minor in Computer Science, and a certificate from the Honors program. If you would like to talk to her directly, she can be reached by email at cyrenasj@gmail.com.
Submit
Thank you!
Back to Top