Vancouver, BC

Hi, I'm Shanna.

I'm a UI/UX product designer, and front-end developer.

I create websites, from simple landing pages to full online platforms. Drop mea line if you want to chat, I'd love to talk!

What I do

User Experience

The best design puts the user first. I'm always thinking about good user experience, putting a lot of focus on transitions, animations, and interactions in my designs.

User Interface

I am passionate about beautiful, clean, and minimal user interfaces. I keep up with the latest web trends, and am always trying to innovate on unique, interesting layouts.

Code

On top of being a designer, I also like to execute my own designs in code, fine-tuning any interaction designs that can't be presented in a static mock. My background is in software engineering, after all, and I like my code to be as clean as my interfaces.

Code

UI Design

UX Design

poolr

Designer

youcollab

Designer

travelhacks 2016

Designer
Developer
Organizer

flatbook – check in

Designer
Developer

flatbook – housekeeping

Designer
Developer

flatbook – booking site

Designer
Developer

flatbook – error page

Developer

flatbook – website

Designer
Developer

flatbook – branding

Designer

dobundle

Designer
Developer

Poolr

My Role:

Designer
Front End Developer

Tools:

Sketch3
Principle

Technology:

HTML
CSS/Sass

Poolr is a networking app to connect professionals while carpooling.

Poolr was the first-prize winner at Vancouver Startup Week's 2016 Hackathon. I was the UI/UX designer on the team, and spent an amazing weekend with my team creating the branding, business model, and visual prototype of the MVP.

We're using our prize money to bring the the MVP into development, and getting market validation through our first clients. I'm excited to see where Poolr goes!

YouCollab

My Role:

Designer

Tools:

Sketch
Pixate

YouCollab is a platform where content-creators on YouTube can connect in a Tinder-like interface to do collaborations together.

I re-imagined the page where the user swipes left or right to be matched with a potential collaborator.

TravelHacks 2016

My Role:

Designer
Front End Developer
Organizer

Technology:

HTML/Haml
CSS/Sass
Ruby on Rails
JavaScript (Jquery)

On the weekend of June 19th, I organized a travel-themed hackathon that was hosted at Flatbook's headquarters. Registration was open to all of Montreal, and we ended up having around 40 participants join us for the weekend and come up with some awesome hacks.

I was fully in charge of the hackathon's branding, design, and landing page throughout the days leading up to the event.

Flatbook - Guest Check In

My Role:

Designer
Full Stack Developer

Technology:

HTML/Haml
CSS/Sass
Ruby on Rails
JavaScript (Jquery, UJS)

This is a redesign of Flatbook's guest check-in process. Previously, guests were asked check-in questions through various platforms, such as phone, email, or whatever messaging system available from the rental site they booked on. They were then directed to different places to upload their ID and credit card information.

The new process combines the old elements together into one cohesive multi-step form. The details of the guest's stay are presented statically on the left, while the dynamic, responsive form on the right transitions smoothly between steps using unobtrusive javascript. Based on user feedback from guests using the old ID upload system, UX improvements were implemented as well as a general UI update.

For this project, I was fully in charge of the design, UI, and UX, and held multiple meetings with relevant stakeholders to obtain feedback and clarify their needs. I worked with a backend developer to bring this feature live.

Flatbook - Housekeeping

My Role:

Designer
Front End Developer

Technology:

HTML/Haml
CSS/Sass
Ruby on Rails
JavaScript (Jquery, UJS, ReactJS)

This is a design for Flatbook's housekeeping services, both on the housekeeper's end for taking care of an individual cleaning, and the company's side for scheduling and managing all cleanings.

I was in charge of the design, user experience, and front end development of this project. I also got to work with the ReactJS framework for the single-page mobile application, which was a really fun challenge.

Screenshots below are mocks only, and real data is blurred.

Flatbook - 404 Page

My Role:

Full Stack Developer

Technology:

HTML/Haml
CSS/Sass
Ruby on Rails
JavaScript (Jquery)

At Flatbook, we value guest experience above all else. So we really wanted to make our 404 page special, to ease that pain point of users running into a legacy page or an invalid URL.

Our designer and copy writer came up with this concept, and I was the developer who brought it to life. I implemented subtle CSS animations to change the colour of the sky as the sun set, have the clouds hover in the sky, and move the little cars across the page to simulate traffic.

Flatbook - Website

My Role:

Designer
Front End Developer

Technology:

HTML/Haml
CSS/Sass
Ruby on Rails
JavaScript (Jquery)
Wordpress

Flatbook is a property management company that specializes in short term rentals, partnering with homeowners and landlords to bring a consistent, quality travel experience to their guests.

This was a complete redesign of the existing Flatbook website at the time. After developing the brand and making core decisions on mood, voice, and colours, I worked with the creative team and a back end developer to put together new partnership pages, an about page, a contact page, an FAQ, a wordpress blog, and a careers page. Design and development on all pages were done and improved on through sprints and continual iteration.

My role throughout these pages spanned both design and front-end development.

Flatbook - Booking Site

My Role:

Designer
Front End Developer

Technology:

HTML/Haml
CSS/Sass
Ruby on Rails
JavaScript (Jquery, KnockoutJS)
Wordpress

Flatbook is a property management company that specializes in short term rentals, partnering with homeowners and landlords to bring a consistent, quality travel experience to their guests.

This was a design for Flatbook's new booking website, incorporating the new brand we had developed. We wanted the pages to be warm and fun, true to tone we wanted the company to convey, while being functional and informative. We put a lot of value on user interaction, especially on the landing page to make each section unique and interactive.

I worked with the creative team and a back end developer to put these pages together. Over the course of 6 months, these pages also went through an iterative cycle of improvement, later sprints bringing in page load speed, visual refinements, and user experience re-designs.

Flatbook - Brand

My Role:

Designer

Flatbook underwent a complete rebrand in the summer of 2015, including its mission, vision, logo, and colours. Together with an art director and a graphic designer, we created Flatbook's new brand identity and story.

Moodboard

Brand Story

We knew the feelings that we wanted the brand to evoke - feelings of peace, serenity, a sense of connectedness with the world around us. At the root of the travel experience is the creation of memories -- unforgettable moments, whether of discovery and wonder at the world's culture and customs, or the joy of getting to spend time with the people you love. We wanted an image powerful enough to convey these feelings without the need for a single word.

That's how we came to the sunset. No matter what anyone is doing, they'll stop to take a breath, and enjoy the rising or setting of the sun. In that moment, all worries and stress are forgotten, and a memory is created. It's something that is difficult to capture in photo or film, reminding us of the importance of being present and in the moment.

Like our brand, a sunrise:

  • is consistent. You can always be sure to see one again the next day, the same way you can rely on our services and 24-hour support.
  • is always unique, depending where you are, just as our spaces are designed for the city you're in.
  • is a reminder that a new day is here or coming, as we push to innovate the hospitality industry.

Dobundle

My Role:

Designer
Front End Developer

Technology:

HTML
CSS
PHP
JavaScript (Jquery)

DoBundle is an e-commerce platform that allows users to curate or organize products into bundles, which can then be browsed and searched in a Pinterest-inspired platform. Whether you're starting a new hobby and want a beginner's kit, or looking for the perfect outfit to go with your new shoes, DoBundle lets you find what you need, and fast.

Working with another back-end developer and a product designer, I translated static designs into working, responsive web pages. My own independent design work was focused on implementing clean and minimal interfaces for the bundle browsing experience and landing page, as well as smooth user interaction animations and transitions. Through A/B testing and feedback from our mentors at FounderFuel, we were able to improve the user experience of the product through iterations.