Hi, I'm Shaina Koval
I'm a UX/UI designer, front-end web developer, and problem-solving enthusiast with a passion for communicating ideas using design and technology.
- Designing through Development—Should Designers Code?
- Choosing the Right Prototyping Tool
- Crazy Concept Ideation with Crazy 8s
- Progressive Web Applications: The Future of the Mobile Web
- Keeping Your Site Healthy Part 2: Content Strategy for Images
- Top 6 Accessibility Tools for Sites that Work for Everyone
- Keeping Your Site Healthy Part 1: Optimising Imagery
The Angsty Feminists in Tech Initiative
- Design, Front-end Development, Content
- Illustrator, InDesign, Photoshop, HTML, SCSS, jQuery, Grunt
- Myself and my partner and collaborator, Rahn Kim
The Angsty Feminists in Tech Initiative (TAFITI) is a personal project that was envisioned as a place that would 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.
Timeline - Print & Web
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.
One of the co-authors of the timeline's content taking a photo at University of Canterbury's CS+X event. Also featured in the photo is a zine for the event for which I drew the cover and did the layout.
- UX and UI Design, Sprint Facilitation, Front-end Development
- Angular, TypeScript, HTML, SCSS, Sketch, InVision
I joined Aiimi as part of the Aiimi Labs team, the in-house R&D department of the greater consulting agency, as the person to bridge the gap between the design team and the developers. Our product, InsightMaker, is an Enterprise Search web app with integrations for use cases with GDPR, export control, personal credit information management, and more.
Since I joined the team, I have led design sprints as well as smaller design sessions, prototyped new features, worked on our pattern library transformation, introduced code linting tools like TSLint and Stylelint, built features in Angular, solved bugs both functional and stylistic, and helped to set the roadmap for the app's future state.
When I started on the project, the app was not responsive—it was desktop or nothing. One of the first things I worked on was getting all the pages of the app to work on all screen sizes. Although we don't see a lot of mobile users at the moment, it's important to build for the users we will have, not just the ones we have currently. Some of our upcoming use cases involve on-the-go users, making it extra valuable that we have already implemented these changes.
Along with making better use of fluid layouts, I had to completely rearchitect the nav and filters.
The core part of InsightMaker is arguably the results page. I've run a number of design ideation sessions around this page, including (but not limited to): how to handle a card-based view of the results, showing featured links and matching contacts, and providing insights about the results to users.
Out of these sessions, the other designers and myself have transformed the search results page from where it was a year ago in order to provide a consistent user experience and as much screen real estate for results as possible.
In addition to the design work on these pages, I've handled the front-end development of the card views, featured links, and result insights. A recent change to ngx-bootstrap, which we had used as a base for some of our components, required me to build our own popover component from scratch in order to accomodate our design. I built in four different positioning options, each with three alignment options, that would work regardless of whether the component was nested next to its trigger or appended to the body. It was quite the learning experience and remains one of the things I'm most proud of!
Because the project had been largely built on-the-fly rather than from designs at the time I joined (it's still a very new project!), there were a number of areas of the app that lacked consistency. One of these was the filters, which sometimes appeared on the left of the page, other times the right, again below the search bar, and occasionally even in the breadcrumbs.
In my first foray into filter improvement, I researched, designed and then implemented a consistent sidebar filter. Not only has this improved things for users, but its much easier now to develop using a single filter component that behaves the same on all pages.
A few months after this change, we upgraded the filters yet again. This time, the focus was on bringing more of the information up-front by showing the filter options up-front. I replaced the dropdowns with groups of checkboxes and added result counts next each option. For filters with more than five options, I designed and implemented an eBay-like solution in a modal, with one of the product leads handling the filter logic and middleware.
One of the difficulties the UX team has had is getting access to our users for testing. To help with this, I designed and built a UX Analytics area that used information collected from Google Analytics and Elasticsearch to show trends in user behaviour.
At the start of the process, the creative team sat down and identified a number of questions they had about users' behaviour. After that, we defined the data we would need in order to answer these questions. I took this information away and did some research into what we could get out of Google Analytics, HotJar, Crazy Egg, and Elasticsearch. It turned out that most of our questions could be answered from GA and Elasticsearch.
After a quest proof-of-concept to show that I could indeed get the information I wanted out of GA and into a layout of my own making, I built the tables and charts we wanted. Even though it was only finished a couple of sprints ago, it has already helped us answer questions about how often certain features are used.
I handled all the development for the Help Pages, including research into how we could host the content. I did a lot of reading up on different headless CMSs and how well they integrated with Angular and landed on ButterCMS. All the content lives there, where it's easy for non-technical people to update the content, and all the code lives with the rest of our app.
One of the biggest challenges I had while working on this was how to handle the on-page links to different subsections of the articles. I wanted to make sure that users could share specific sections to one another easily, but because of the dynamic content, it was a bit more complicated than an actional on page anchor tag. I spent a lot of time with Angular routing document and am now very happy with the behaviour.
A sneak peek of one of the lo-fi prototypes I've worked on recently. I took the opportunity while building these wireframes to start on an in-house Sketch library for lo-fi wireframes so that we could work more quickly moving forward.
- UX, Design
- Photoshop, Illustrator
- Switch IT
Mirvac, one of Australia's leading commercial property management companies, came to Switch to update their corporate and Office and Industrial asset websites.
Working together with project managers and members of the design team, I attended UX workshops with the client, participated in our first Crazy 8's ideation session, and completed a number of designs for Mirvac's new site.
New Methods of Ideation
The Mirvac O&I project was the Switch design team's first experience with the Crazy 8's ideation activity, and it's since become a staple in our design process. Two other designers, the project manager and I sat down and sketched out ideas for an interactive map, floorplan, timeline and various other components that either required complex functionality or would give us an opportunity to produce something really unique for our client.
At the end of the session, after talking through everyone's ideas, we came up with a game plan for how we could incorporate the best of our favourite concepts into our design. Even after multiple rounds of design feedback, the work from our Crazy 8's session was still visible behind each component—the client was blown away with some of the ideas we came up with and pleased with how it aligned with their needs.
The design process for the Mirvac O&I project was very collaborative, with each design rotating between myself and two other designers regularly. I began the process using the client's reference sites, our own inspiration that my team lead and I had collated since the project was announced, and the results of our Crazy 8's session.
Once the other designers joined me, we regularly caught up with one another to compare how we had handled similar elements to make sure that we were designing a cohesive experience across the site. While we worked, we kept notes related to colours, typography, gutter sizes and animation that we could use to stay consistent and later pass on to front-end developers after design approval.
The interactive floorplan guides the users to the layout, details, and photos for each level of the building.
The final concept for the news component.
A mobile view of the home page.
An early iteration of the news component as it would appear on a mobile device, with a bit of the next section peeking out underneath.
- UX, Design, Front-end Development, Content
- Photoshop, HTML, SCSS, jQuery, Google Maps API, Greensock, ScrollMagic, Gulp
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. This particular design and build is currently on it's third iteration.
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. I also included a soundbite of my name, as sometimes it gives people trouble!
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 original version of 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
- Rebuilding everything in React (for a new experience) or Angular (to further my experience)
- Replacing my current CSS technique for the layout with CSS grid
University of Canterbury FemSoc Zine: STEM Issue
- Design, Illustration
- Pen, Paper, Photoshop, InDesign
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.
Zine cover spelling out the title 'What She Said' with science-themed illustrations in the shapes of letters.
The timeline was originally in colour, designed for a different project. I created this black and white version specifically for the zine.
A spread from the zine.
1920s Vintage Food Advertisements
- Design, Illustration
- Pen, Paper, Photoshop
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).
The curving type made me long for InDesign's type-on-a-path tool, but it also really made me appreciate the skill of poster-designers a century ago and forced me to really plan out the space and direction of each letter.
I just love the low crossbar on the 'A' and the unapologetically circular 'O' that were popular in 1920s typography—drawing them out really got me geeking out about how beautifully they contrast the other letters but still work so cohesively with them. Also, avocados are amazing.
- UX, Design, Front-end Development, Icon Design
- Photoshop, Illustrator, HTML, SCSS, jQuery, Gulp
- 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 the transition of Zip's brand identity to a more luxury look and feel 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.
One section of the new landing page, showing some of the new components I designed and built.
Life has taken me all over the map. Every place I've been, I've made it a priority to learn something new.
Not feeling chatty?
No worries, you can find me on: