Shaina Koval

Designer & Front-end Developer


I’ve been privileged to work on a variety of different projects across a range of media, including web, UX, and print design, marketing strategy, front-end web development and copywriting.

Words about These Things



UX, Front-end Development
Adobe XD, HTML, SCSS, jQuery, Gulp
Project Owner
Switch IT

While undertaking an upgrade to their CMS, ACMA, the Australian Media and Communications Authority, wanted to transition their desktop-only site into a more user-friendly, responsive experience. Before getting down and dirty with some media queries, we spent a lot of time planning how to transform components designed for keyboards, mice, and large screens into ones that would work on smaller touch devices.

Our budget and timeline required that we use as much of the existing code as we could, so before getting into any wireframes, I picked apart all 20 or so page templates with the web inspector, seeing how the layout was built and what our technical limitations would be.

Once I had a feel for how the pages were built, I started by doodling out a few different options for how the templates could transition from desktop, down to tablet, down to mobile. From there I built out mobile wireframes of all of the templates in Adobe XD as well as a selection of tablet wireframes based on which were the most challenging.

I also wireframed their main navigation, which was challenging because of its deep nesting and need for some headings to be both links and buttons.

One of my fellow front-end team members started the front-end changes to make the site responsive, using my wireframes to determine how to best lay out the previously desktop-only components of the site. After he went on holiday, I picked up the front-end development of the project, building the mobile navigation, performing cross-browser and accessibility testing, and fixing bugs as they came up during UAT.

Mobile Wireframes Tablet Wireframes

The Angsty Feminists in Tech Initiative

Design, Front-end Development, Content
Illustrator, InDesign, Photoshop, HTML, SCSS, jQuery, Grunt
Project Owner
Myself and my partner and collaborator, Rahn Kim

The Angsty Feminists in Tech Initiative (TAFITI) is a personal project that will provide a platform for under-represented voices in Computer Science. At the moment it hosts only a few resources and a link to a timeline of The Underdog Pioneers of Tech, but we aim to eventually build it out into a community space with articles and resources.

The Underdog Pioneers of Tech timeline grew out of a poster I designed for University of Canterbury's inaugural CS+X Festival, a series of workshops and talks about Computer Science and its intersections with other disciplines. The print version of the timeline was hung on the wall during the festival and was later displayed in the Computer Science department's main office. In addition to the design, I also provided the drawings and contributed to the research.

The web version of the timeline is our first unique resource for TAFITI. I designed it and wrote the HTML and CSS. The JavaScript was co-written with my partner.

Our future plans for this part of the larger TAFITI project include a re-write of the JavaScript and a form where users can suggest additional people and groups to include on the timeline.

After we mapped out the different parts of the site that we wanted for our users, I created a few mock-ups in Illustrator of the design of the final site that would incorporate different types of articles and resources.

Although this project is on hold, it's something we're looking forward to picking up again soon.

Visit Site

Central Heating New Zealand

Branding, Design, Front-end Development, Marketing, SEM
Photoshop, Illustrator, InDesign, Flash, HTML, CSS, WordPress, PHP
Project Owner
Central Heating New Zealand

While working as the full-time Graphics Design and Digital Media Exec at Central Heating New Zealand, I managed all marketing and graphics for the company, including a website redesign, print advertisements, editorials and trade show stand designs.

When I began working at the company, there were some shared stylistic elements between various marketing materials but there was no single brand style. I took direction from the company’s old style guide and some of previous design materials to create a strong visual brand identity across all media.

One of my first assignments as Central Heating New Zealand’s Graphics Design and Digital Media Exec was to revamp their website into something that would convey warmth and luxury while offering a wealth of information on the benefits of central heating, solidifying the company’s place as one of the nation’s top experts. I am designer, lead developer, site admin, SEO specialist and content author for the site. Needless to say, I am really invested in this project!

When I started working on the site, there was a half-built custom WordPress theme already in place. I kept most of the page templates but redesigned the site and outfitted it with new CSS, various new plugins and features and put together the WooCommerce store as both a trade-only area and a catalogue for all visitors after a brief (and unsatisfying) implementation of WP eCommerce.

A year and a half after launching the newly designed website, I went back and made the site's design responsive. This required some clever rethinking of certain design elements and also allowed me to tighten my code in the CSS files and PHP templates so that they were better organised and more efficient.

(I left New Zealand in 2015, and since then another designer/developer has been working on the site.)

The redesign of Central Heating New Zealand’s home show stand focused on design unity—which had been missing from previous setups—and the immediate impression of comfort and warmth. The company wanted impact and immediate draw, with enough content to keep visitors engaged while they waited in case the sales team was busy speaking with other prospective customers. The stand also had to be easy to set up, take down and maintain.

The solution was a pop-up stand with interchangeable panels that allowed for a variety of different stand sizes and configurations. I came up with a design that suited the flexibility of the stand’s design so that the company could present a concise, captivating stand regardless of whether it was a 4.8m x 3m stand or a 9m x 3m stand.

As part of a push to educate Kiwis about central heating (a rarity in the country), I proposed a winter advertising campaign on bus backs in two of the company's largest market cities: Christchurch and Auckland. I chose a rear placement for the advert as opposed to a side advert because our target market is more likely to be stuck in traffic behind the bus rather than walking on the street or riding the bus. The advert's main purpose was to let Kiwis know that there is an alternative to freezing in their homes during the winter—if you haven't experienced it for yourself, you'd be surprised at how cold it gets inside!

After coming up with the concept and design, I then tweaked it to suit the three different styles of buses that our ads were used on.

Advertising for Central Heating New Zealand targeted both those working in the industry—tradies who would buy and install central heating systems and specifiers who would specify the systems CHNZ sold— as well as retail customers who would get these systems installed in their homes.

B2B adverts ran primarily in the NZ Plumbers trade magazine that targets installers and plumbers and in the IRHACE (Institute of Refrigeration, Heating and Air Conditioning Engineers of NZ) magazine, which targets the mechanical specifier sector of the company's market. These adverts ranged from product highlights to calls to action for new tradies in the field.

Because central heating is still only in 1% of NZ homes, Central Heating New Zealand's retail-facing (B2C) newspaper, magazine and other advertisements needed to educate an unaware public about what central heating actually is and sell the virtues of the systems at the same time. They needed to be eye-catching and educational at the same time.

In addition to running in lifestyle magazines, we ran a series of ads in Kia Ora, Air New Zealand's in-flight magazine, that were so popular that we received phone calls and messages simply saying how much they enjoyed the ad during their flight.One prospective customer wrote, "Hello, I am writing to congratulate you on the hilarious advertising I discovered in the Kia Ora in-flight magazine on Air New Zealand. I laughed out loud so hard!" We also had a business strategy company enquire whether they could email the advert to their clients to "show them what a great advert looks like that engages potential customers."

Feedback on the company's old retail brochure indicated that there wasn't enough information to be truly useful for prospective customers. For the new design and content, I needed to boil down the wealth of information on our products and systems into easily digestible chunks and I needed to present it clearly. To accomplish this, I chose to make strong use of visuals and grids to catch the reader's eye and separate the information into related sections.

During my time at Central Heating New Zealand, I worked on a large number of projects well beyond the projects listed here. If you'd like to learn more about any other concepts not included here, please get in touch.

  • Brochures
  • In-store Displays
  • Banners
  • In-House Materials
  • Flyers
  • Newsletter Templates
  • Showroom Concepts
  • Adverts
  • Signage
  • Slideshow Presentations
  • Display Boards and Stands
  • Marketing Copy

Play by the Rules

UX, Design, Front-end Development
Photoshop, Illustrator, HTML, SCSS, jQuery, Gulp
Project Owner
Switch IT

Play by the Rules is a government-supported website that provides resources and interactive education about issues in sport such as harassment and discrimination.

They came to Switch with technical and accessibility requirements, no branding beyond a logo, and the desire to transform their online presence. I worked with my team lead on the designs, built the front-end, and have been responsible for all design and front-end updates since the site's launch in 2016.

The IA that we received at the start of the design process was simple: only two levels deep. Given the varying degrees of technical abilities that we predicted the website's users would have, I decided to start with a standard, predictable dropdown menu.

I knew I wanted to make the top-level links trigger the dropdown on click rather than hover in order to achieve better accessibility for those who have trouble using a mouse, which meant I needed another way for users to access the top-level page. For this, I added a button that would navigate the user to the top-level landing page. To give it a bit more personality, I added icons next to each link.

We combined this design with my team lead's mobile design.

During build, I made sure that the navigation was accessible for both users with visual and physical impairments. It also required that I write some fun JavaScript logic so that the Select a Role menu and overlay would never be open at the same time as the main navigation.

Almost a year after launch we added a third level to the navigation, which meant revisiting the design. I wanted to maintain the "open on click" functionality that I had used on the top-level of the navigation, so I chose to split the links that had child elements into a link to the page and a trigger to reveal the subitems.

Accessibility was at the front of my mind while working on the build for this project. Being a government-related site, we had to meet W3C's accessibility guidelines. I did extensive research into tools that would help me achieve this goal (many of which ended up on an accessibility blog post I wrote for Switch later on).

Some of the changes I made to improve accessibility were easy, like swapping out the brand's yellow for a darker shade that would pass AA guidelines for colour contrast. Others require more creative solutions, like a bit of JavaScript that looks at whether the image behind the header is dark or light and changes the colour of the text on top of it accordingly.

The end result is a site that anyone can use. It's fully keyboard accessible, passes colour contrast requirements, and works on screen readers.

Visit Site

UX, Design, Front-end Development, Content
Photoshop, HTML, SCSS, jQuery, Google Maps API, Greensock, ScrollMagic, Gulp
Project Owner

You should know this project pretty well by now—as a user, you're now a part of it! This is my personal website, combining a bit of my personal and professional history with my portfolio and interests. It's a bit meta to include this as part of my portfolio, but it is the latest project I've done just for myself and as such is a good representation of my work.

My goals for the design and UX of this iteration of my site were to make content easy to find, to create simple and fun interactions, and to design according to the latest trends.

For content structure, I started by writing down all the things I thought my website should have, referencing other portfolio sites and my old design as starting points. From there, I organised my ideas into four coherent sections: intro, about, portfolio, and contact. Because I knew I wanted to design an SPA (single page application) and I didn't want the only experience on the site to be scrolling, I decided to keep each section short, with additional information visible via familiar design patterns such as infowindows and modals.

I kept the design clean so that the focus would be on the content, but I also incorporated some visual goodies in the form of animations. My goal was for a consistent feel across design and animations: clean, smooth, fluid

From a technical perspective, I wanted to play with a lot of the tools I've used at work without having a budget restricting the length of my playtime. I also wanted to try out alternatives to see for myself the pros and cons of each.

I started with a list of all the things I wanted—page transitions, animated svgs, fluid animations, map functionality, and more.

Some of things I came up with made their way on the site easily. Others, like the lines connecting the locations on the map in the "About" section, took multiple attempts with different approaches to get working. Even then, there were some ideas that I had to abandon, if only for now. For example, my original design featured different colour borders around each of the sections. On scroll, I wanted the header to change colours when it reached a new section. Unfortunately, an immediate colour change was sudden and out-of-place, while my attempts to transition the colour smoothly didn't work as cleanly as I wanted, especially at certain scrolling speeds (see the CodePen I was playing with in isolation from my site).

I tend to be a person who will keep working at a problem forever unless stopped by a force such as a project manager or a budget, so having to stop myself on some of these goals I had was difficult. I had to learn to do it anyway, though, because I realised there were other, more valuable things I could add to the project that were being pushed aside for features that weren't essential.

I have a million and one ideas for things I'd like to try out on this site. Some of the first things I want to try out in the future are:

  • A blog (I've already mentally crafted partial entries on Crazy Eights workshops, my experience trying out Adobe XD, and BEM)
  • SVG drawing line animation
  • Having the eyes of the drawing on the landing screen follow the cursor
  • Morphing the "SK" logo into "Shaina Koval" on hover

Rhinorack: Canopies

UX, Design, Front-end Development
Adobe XD, HTML, SCSS, jQuery
Project Owner
Switch IT

As part of a mini-project for an existing client, I worked with the project manager and the back-end developer for the mini-project to design a solution that would improve the product selection process for their canopies. The solution needed to work within the constraints of the existing product categories and database structure, so it was important that I kept the back-end developer in the loop even during the wireframing stage.

Once the project manager, the back-end developer and I had clicked through the interactive wireframes and verified that it would work with the existing data, the wireframes were sent to the client for approval.

Although the front-end development is complete, back-end integration is still in progress, so the mini-project isn't live yet.

Mobile Wireframes Desktop Wireframes

University of Canterbury FemSoc Zine: STEM Issue

Design, Illustration
Pen, Paper, Photoshop, InDesign
Project Owner

This special STEM (Science, Technloogy, Engineering and Mathematics) issue of University of Canterbury's FemSoc coincided with the university's inaugural CS + X Festival. In addition to the cover design, I designed and implemented the layout in InDesign and adapted the Misfits in Computer Science poster I designed for the Festival.

1920s Vintage Food Advertisements

Design, Illustration
Pen, Paper, Photoshop
Project Owner

For this personal project's concept inspiration and design guide, I referenced 1920s posters, which use a different design vocabulary than is common in modern design. Typical elements that are included include painterly, illustrative images, type with less white space, and, in the case of food adverts, a penchant for almost ridiculous-looking people interacting with oversized food. Although I could have left the copy to easily-downloaded retro fonts, I took it an extra step and drew all the type by hand (which ended up being a great mini-typography lesson in and of itself).

Zip Water

UX, Design, Front-end Development, Icon Design
Photoshop, Illustrator, HTML, SCSS, jQuery, Gulp
Project Owner
Switch IT

When we inherited the Zip Water website that another agency had designed and built, we rebuilt the front-end and back-end, and I was the primary front-end team member on the project. At this time, the client was beginning the process of transitioning their brand identity to reflect the luxury aspects of their products. During Switch's relationship with Zip I have designed and developed a number of new pages and components for them.

With this in mind, they requested that we update their header and navigation to have a cleaner, more high-end feel that still stayed true to their brand.

For visual inspiration, I looked to luxury brands that the client admired and broke apart their navigation to see what elements and user flows would work with Zip's IA and visual identity. I wanted to combine the visual impact of quality images with the clarity of a mega menu, and I needed to make it work both with and without another level of nested links.

After working with my team lead to refine my idea, the end result allowed for a utility navigation for links of lesser priority, and a main navigation featuring a split-screen mega menu.

When Zip decided to move their ecommerce from Magento to Sitecore, the CMS the rest of their site used, we had the opportunity to redesign their shop from the ground up. My team lead and I worked together to design an ecommerce experience that would satisfy the client's desire for a luxury identity and the user's need for simplicity.

One of my primary contributions to the UX and design was the product listing page, which needed to allow for easy category navigation and filtering across a variety of screen sizes. Since the client's approval of the original design, I have worked with them to provide more iterations of the categories and filters in order to achieve the visual clarity that they wanted.

Zip Water wanted new landing pages that would match the new visual direction of their site and up the ante a bit with animation and dynamic transitions.

After a few rounds of designs, my team lead and I came up with a number of interchangeable components that they could use to build out their pages that satisfied the client and presented their information clearly for the user. I designed almost all of the icons and did the front-end development for these components. Since going live, they have added a number of new components that I've designed and built.

Visit Site


Life has taken me all over the map. I’ve learned something new every place I’ve been, and even if my wandering days are over, the learning will never stop.


EDM Templates
Experience Designer

Say hello

Not feeling chatty?

No worries, you can find me on: