Portfolio

UX ENGINEERING / FRONT END DEVELOPMENT

TAGS: HTML5 Less Django UI Development UX Design JavaScript jQuery Email Development

ZIIBRA

Description

ZIIBRA is an e-commerce platform for independent artists and makers that strives to connect artists directly to their fans. At ZIIBRA, I acted as the primary Front End Developer on the product team. I worked closely with our UI designer to create beautiful and intuitive UI/UX across many areas of the site. Our biggest feature development was in creating artist shops, allowing artists to sell their work directly from their ZIIBRA page. My biggest goal in developing the UI for shops was to keep it modular - allowing product "cards" to be showcased in any area of the site that they are needed.

Another great feature with ZIIBRA was creating a page to allow artists' fans to quickly sign up and follow a given artist. We wanted this page to be used primarily at gallery shows so there could be a quick and simple connection from the real-world community to the online platform. We implemented an "easy sign up and follow" page to showcase some basic information about the artist alongside a simple form to allow users to quickly sign up with some basic information and the click of a button. This helped greatly to connect artists real-world events with their online presence.

In addition to these projects, I assisted in overall maintenance of the site, improvements in SEO, and development of email templates.

Images and Process

TAGS: HTML5 Sass Angular MEAN Stack UX/UI Design Wireframes Service Design Front-End Development

FitGenie Web App

Description

What do you get when you take four days, two UX developers, two Javascript engineers, one project deadline and a lot of creative ingenuity? FitGenie: a web application with a MEAN Architecture (Mongo DB, Express, Angular JS, and Node JS) that is designed to be a workout building and tracking tool for personal trainers to use with their clients. Users build their own workouts with a series of movements, set the designated time limits for each movement, and then use a "workout player" to help them perform those workouts.

We began this project by determining our MVP: a tool that would act as a workout helper for users that couldn't get to the gym to work one-on-one with their personal trainers. We did user research, developed wireframes and brainstormed potential brand/styling decisions, and developed our user flow. The styling of FitGenie is written in Sass, which optimized efficiency in creating a fluid look and feel throughout the app.

Images and Process

TAGS: HTML5 Sass Express Node Modular Design JavaScript jQuery Front-End Development UX/UI Design

Living Style Guide

Description

To quote Susan Robertson from A List Apart, "a style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations."

For this project, my team set out to create our own living style guide that could be expanded to create the full visual and developmental language for a website. We developed modules for typography, a grid system, many form components, table styling, and even data visualization. We then implemented those modules into working components that could easily be dropped into a working website. The code used to create each element is documented by each module, which would help developers easily integrate and modify these modules as needed.

This project was build within an Express/Node environment.

Images and Process

GRAPHIC DESIGN

TAGS: UI Design Service Design Information Architecture Infographics Education

Simple Wellness UI & Service Design

Description

This project was my Senior Degree Project at Massachusetts College of Art and Design. I designed a system to educate new patients to wellness doctors (chiropractors, acupuncturists, massage therapists, osteopaths, naturopaths, etc.) about how they can best achieve wellness outside of the doctors office. The way I planned to educate people is through a combination community meeting and online resource effort. The online resource would have loads of information about health issues in the world today and how to combat those issues with simple, easy to grasp concepts for real-life implementation.

This web app would also host a forum for patients to talk about their journeys and ask questions, a library of useful books/films on the topic, and a calendar of events and community meet-ups. The real-life community aspect will consist of weekly meetings and semi-regular support groups that encourage people to bring and share delicious healthy foods and educate people in a discussion format (for those who may not benefit from reading information and looking at a bunch of graphics). This community support aspect is crucial because it reminds people that they are not alone in their journey and they have all the help they could need to become a healthy and functioning individual in the increasingly toxic environment that is the modern world.

Images and Process