Selected work

The Design Arsenal

About the project

After fighting the same battles about web standards, best practices and good usability again and again, I began saving articles and case studies to reference easily when I need to convince a stakeholder (or anyone) to have a responsive site, or not to have all of their links say "click here". Working over a few weekends, I created The Design Arsenal to share these resources with fellow designers.

My role

The Design Arsenal is a personal side project which I created, designed and built myself using original graphics and illustrations. I had help from the smart and talented Matt Witek who built some incredibly handy Wordpress database sync and deployment scripts. We have plans to package the scripts into a toolset so others can enjoy the same relative ease with which I push and deploy updates.

Design Arsenal Homepage

The home page shows a list of common UX battles with a title, summary, and a cat illustration (since cats can help with stress-relief). Clicking the item opens the article view with a summary of helpful information for winning the battle, and a list of resources and references to help back up the main talking points.

Design Arsenal Article View

The Design Arsenal was a small side project, designed in one weekend. I sketched the layout in pencil and created style tiles to define the look I wanted. The rest of the design was done in the browser as I developed it.

Design Arsenal Style Tile

Feedback on the first version of the logo was that people felt sorry for the cat because he looked like he would get hurt. I worked towards a final version where the cat looks like he's having a good time.

Design Arsenal Early logos concept

Creating the Design Arsenal was really fun. My main goal is to make and maintain a useful contribution to the design community. Visit the Design Aresenal

Go Go Gremlin

About the project

Go Go Gremlin is a prototype of a daily offers aggregator. It is meant to simplify the experience of searching for offers from multiple sources by keyword and location and set up notifications to be alerted by email when offers match your search profile.

My role

I was the co-creator, designer and front-end developer on a team of three for Go Go Gremlin. I designed the user experience and interfaces, created all of the branding, graphics and illustrations and built the front-end codebase in html5 and sass.

Go Go Gremlin Homepage

The color palette is bright and cheerful to make the site feel friendly and inviting. These are important qualities for a new brand aiming to convince users to try its services.

Go Go Gremlin Search

To add personality and create an emotional connection with the user, we created Martin Van Gremlin: a friendly gremlin to guide you through your experience and give you feedback and encouragement along the way.

Go Go Gremlin Gremlins Go Go Gremlins in use

The user interface relies heavily on ajax to make interactions such as registering, searching and saving search profiles easy and snappy. This means providing visual feedback for interactions is important so the user always knows what's going on.

Go Go Gremlin Account

The design process started with a lot of sketching and wireframing for the layouts and user journeys. I created style guides for UI elements and did much of the final design work in the browser.

Go Go Gremlin wireframes

Bespoke Offers

About the project

Bespoke Offers is a large-scale targeted digital offers site for the UK by Barclaycard. Bespoke includes a consumer e-commerce application, a self-serve merchant site, as well as administrative sites for managing customers and merchants. Each component works together and provides a consistent brand experience across all channels.

My role

I am the Director of User Experience Design and Front-End Development. Working with my talented team of designers and front-end developers (FEDs), we created the look and experience of Bespoke—designing user journeys and UIs down to the minute details, and developing the front-end while working closely with the engineering teams.

Bespoke Expore Offers

Our goal is to create a top-tier offers experience that is simple to use and reflects the trust of the Barclaycard brand. Empathy is critical in ensuring that it meets the user's needs, while keeping up with the business goals.

Bespoke Offer Detail

The application is built in ruby-on-rails with html5, sass and compass. One of the greatest challenges of working on such a large project is communicating and collaborating across teams and time zones. Working with a large team of contributors, it's important to make sure no one breaks anything.

Bespoke Purchase

The design process takes many forms, including sketching, wireframes, detailed mockups and interactive prototypes. Many talented people have come together to build Bespoke. I most closely work with our team of talented ruby engineers and the other team leaders. I feel lucky to have worked with such talented people on this project, especially my own FED team of solid gold superstars. Visit Bespoke Offers

Bespoke Merchants

Starry

About the project

It all started when I told my design team that whoever had the most gold stars by the end of the year would get a big prize. Starry is an application for teams, parents, teachers or friends to have fun and interactive gold star competitions.

My role

I'm the UX designer and front-end developer for Starry. I work with two awesome and smart ruby and javascript engineers. I create the user experience as well as the interfaces, and graphics.

The visual design of Starry aims to evoke a sense of wonder. I want to create an emotional connection with users by drawing on the nostalgia of getting gold stars when you were a child. The stars on the home page glow and twinkle making your first entry into the application a magical experience.

While Starry began as an app for teams, it's perfect for any group. Teachers can track stars for students, parents can give gold stars to their kids, and groups of friends can have a fun competition.

For the initial testing phase, the competition page is a simple view with snappy ajax transactions for giving stars. Version 2 will introduce an exciting graph view that brings the act of giving gold stars to life with elements of delight to make Starry an even more fun experience.

The design process began with a simple functional prototype that my team uses for our current competitions while the new Starry is in development. For the new version I first mapped out the architecture and created wireframes for the interface designs.

I used style tiles to design the look of Starry. These serve as a guide for much of the visual design as I develop the views in code. Sketching and iterating a variety of design ideas is also a key part of the process.

Starry will be released in secret invite-only beta in early 2014. After thorough testing and polishing of the UI, we'll open Starry invitations to anyone and help make dreams come true with gold stars.

About Me

I'm a UX designer and front-end developer. I love solving problems, designing delightful user experiences, and writing clean semantic code, responsive and SASSy. I study psychology in my spare time because it makes me a better designer. I also love crossword puzzles and cooking, playing ice hockey, and drawing things like letterforms, cats, patterns or things on my desk. I served in the Peace Corps in Cameroon from 2008 to 2010, teaching kids how to use computers and trying not to get sunburned. Want to work together or have something cool to share? Email me and we'll chat.

My Skills

skills

Creativity and Inspiration Management

creativity and inspiration management

Debugging Endurance

debugging endurance

Things I Talk About That No One Wants To Hear

things I talk about that no one wants to hear

All the social stuff

Email Me Follow me on Twitter View my Dribbble Profile View my Codepen Profile View my Github Profile View my LinkedIn profile Google Plus