Web Design & Development
In addition to product and visual design, I background in web design and front-end development. I work seamlessly in HTML, CSS, JavaScript, and PHP, utilizing various frameworks and libraries. Below are a few case studies explaining my process in considering design, UX, and the code that ties it all together.
Jump to a specific project:
Shindigs Scheduling App • Timberline Helicopters • CHAFE150 Gran Fondo • SPOT Bus Public Transit • UI & Interactivity
Shindigs - Scheduling App
Shindigs is my personal project, conceived in response to the question, “when is good for you all?” Scheduling an event for groups of people becomes social and fun in this app I designed and built from the ground up.
This sample user flow shows joining a room, selecting some dates, chatting, and finalizing an event.
App Concept & design
The problem: you want to organize something, but need to see what date and time is best for the most people.
My app solves this by creating a room for each event, where the organizer can set a date range for people to fill in the times they’d like to be available. Rooms are joinable by a 4-letter code, and any room you’ve previously joined is saved to your local memory for quick rejoining. No accounts or signup required!
Each day in the calendar contains a ring with segments for each participant as they enter the event, and submitting availability for a day adds in your colored segment so everyone can quickly visually see when seems to be the best time.
The system automatically determines what day will be best for everyone when the organizer clicks “Finalize”. After selecting the time range for the event and finalizing the event, the room becomes a meetup place for participants to indicate whether they’re attending or not and continue to chat in the attached chatroom.
Coding and development
I built this app entirely on paper at first, from initial brainstorming and problem solving, to user flows, user interviews, and UI design concepting. I built paper prototypes to use in pitching and user research with my local hackerspace group, and even wrote out a lot of code by hand as the ideas came to me when I was out at a café or on a train and wanted to keep things quick and analog.
I eventually brought Shindigs to life via Meteor JS. I chose this framework because I already was very comfortable working with HTML, CSS, and JavaScript, and I liked that the pairing with MongoDB meant I could use all my current knowledge for the database aspect as well, which is pure JavaScript. Templating is handled with Handlebars, and some PHP helps out here and there.
Much of the app design process took place on paper.
Even coding backend considerations are first mocked up in a sketchbook as a way to think through user flow, friction points, and resource allocation.
Jump to a specific project:
Back to Top • Shindigs Scheduling App • Timberline Helicopters • CHAFE150 Gran Fondo • SPOT Bus Public Transit • UI & Interactivity
Timberline Helicopters
This site is designed to bring dynamism and interactivity to a very technical subject through bright, bold design and fun, lightweight animations throughout. Crafted for ease of use for both the user and the client on the back end.
SITE DESIGN & INTERACTIVITY
The Timberline Helicopters site is full of fun small interactions that breathe energy into the overall look-and-feel. The navigation links have spinning rotors that appear on hover, each page features a unique parallax landscape and set of clouds that move as the user scrolls, and the helicopters fly toward the viewer to really push the sense of depth.
Every effect remains intact on smaller viewports, and neither legibility nor accessibility are hindered. The backend for the client includes a customized CMS so they can easily and nondestructively add, remove, or modify aircraft listed on the Fleet page.
Jump to a specific project:
Back to Top • Shindigs Scheduling App • Timberline Helicopters • CHAFE150 Gran Fondo • SPOT Bus Public Transit • UI & Interactivity
CHAFE150 Gran Fondo
Built to show off beautiful photography and get users the information they need quickly, the user flow and menu navigation is highly optimized on this site that features full-width fixed scrolling backgrounds that bring the event to life.
Initial sitemap sketch - All of my sites are built on paper first!
SITE DESIGN & INTERACTIVITY
I designed the CHAFE150 Gran Fondo site to showcase the aspects of the ride that were most important to both the organizers and the riders. This includes images of the beautiful route along mountains and across the long bridge spanning a lake, photography featuring riders enjoying the ride, the after-ride party, and the beneficiaries of the ride fundraising.
To showcase the great photography at my disposal, I opted for a full-width approach for images that remain fixed in their section as the user scrolls, seen here in the gif, giving a lovely sense of depth and parallax. This effect scales nicely with various viewport sizes as I thoughtfully considered the cropping of each image. To keep things accessible and responsive, on mobile devices the images are static and scroll with the content.
Jump to a specific project:
Back to Top • Shindigs Scheduling App • Timberline Helicopters • CHAFE150 Gran Fondo • SPOT Bus Public Transit • UI & Interactivity
SPOT Bus - Public Transit
This site features live trackers to show riders where the busses are on their routes at any given time. Also with an interactive route map and schedule I designed with inspiration from the NYC and Tokyo subway maps, built for accessibility.
SITE DESIGN & INTERACTIVITY
This site is designed for frequent mobile use in lieu of a dedicated app, so all the organization’s information is available alongside the data riders need at their fingertips. Within 1 interaction and with very low dropoff, users can see not just schedules and a route map, but also a live tracker of where busses are at that very moment.
Since I also created the branding, iconography, and signage for the SPOT bus, I had the opportunity to build the entire ecosystem from the ground up with accessibility as a top priority. Color systems were chosen to accommodate various types of color blindness, the site’s interactivity target sizes are large and friendly, and the site itself is rigorously tested to be ADA compliant.
The site is built with an easy-to-use backend for the client’s organization to quickly get started working with for updates or or to push out services alerts, with no extra training required.
Jump to a specific project:
Back to Top • Shindigs Scheduling App • Timberline Helicopters • CHAFE150 Gran Fondo • SPOT Bus Public Transit • UI & Interactivity
UI & Interactivity
One of my favorite aspects of building digital experiences is designing animations and interactivity, making an experience joyous and fun to use. Collected here are a few of my favorite sites I designed and developed that showcase this quality!
Belwood 301
I designed and developed this site for a property manager looking to show off the beautiful photography of their renovated historic building to attract tenants.
By creating vibrant, bouncy, and fun hover and interaction effects, every tap and interaction gives a little hit of joy to raise the base user emotional state for each page. Coding these called for liberal use of CSS pseudo-elements and transition effects, as well as transparent layers and blending effects.
The site was designed and built with a mobile-first mentality for a ground-up responsive experience.
HP Construction
HP Construction approached me to create a site that showcases the spectacular photography for their custom homes. I retouched the RAW images and optimized for web, developing a site that utilizes full width imagery and a sticky dynamic header. The photo gallery is touch-enabled and the whole site is built mobile-first to be fully responsive.
The header’s animation gives me particular joy, using CSS pseudo-elements and animations to emulate a wall going up. It’s the little things in life!
Sharon cramer - author
This author wanted something slightly whimsical and tactile for her personal site, and I had a lot of fun designing out a site that lives in a book!
After creating all the graphics in Photoshop, I tackled the challenge of developing a y-repeating book background with case binding, animated bookmark navigation, and a sticky floating bookshelf for anchor subnavigation.
Built to be fully responsive, it works a treat on all devices and is optimized to run quickly in older browsers.
Jump to a specific project:
Back to Top • Shindigs Scheduling App • Timberline Helicopters • CHAFE150 Gran Fondo • SPOT Bus Public Transit • UI & Interactivity