Braden Lawrence
Hi there! I love to build clean front-ends and UIs that cut straight to what users need. I am a UX specialist for Project Lead the Way, and backed up by six years in graphic design. Based in Boston, and currently available for freelance projects. Get in touch if you would like to work with me!

Web Development

Photowave
React, Redux, WebRTC

I wanted to learn more about WebRTC, so I built this tool in React/Redux to take userMediaStream data and turn it into silly gifs with a cool 80s vaporwave theme. The user's stream is acquired using simple media constraints and a call to getUserMedia, then shown on the html video element. Screenshots are taken from the video and drawn to a canvas, which are then used to assemble a gif ready to download.

Camp Space
Node.js, Express, Mongo DB

A guide to the many places mankind has reached throughout history, Camp Space is a website designed using Node.js as part of a web development course through Udemy. The process of building it covered RESTful routing, database driven content, authentication, and user created content.

Palette Picker
Node.js, Ember.js

A spin on the Ember Super Rentals tutorial project. For this project, we go through each of the main features used in Ember: Components, Actions, Helpers, Controllers, Utilities, and Services. The metaphor starts to break down once we get to the map API, but eventually I'd like to add a component to select colors from a Photoshop style palette.

Color Game
vanilla javaScript

This is a quick game made in javaScript to teach people how to read colors shown in rgb. In each round, you are given an rgb code, and six boxes, one of which matches the code.

UX Design

weRead
Adobe InDesign, Axure, InVision

Made to demonstrate the UX methodology, weRead is a prototype for a learning management system that allows online classes to be taught in a way that is similar to in-person classes. I began with a series of interviews with teachers and students who have used online classes in the past. From those interviews, I created user profiles, pain points, and workflows that informed the design of the clickable prototype.

Spark
Adobe Illustrator

Safelight Security had a collection of cybersecurity training courses and wanted a better way to let our customers assign them to their staff and track their progress.
For staff, it highlights the course assignments that are due next, and features leaderboards to encourage participation. Staff managers can view the members on their team and monitor their progress. Additionally, program managers can assign course curriculums, set due dates, and edit course content.

Graphic Design

Phases of the Moon
Adobe Illustrator, Adobe InDesign

This infographic demonstrates how the positions of the earth, sun, and moon interact to form the eight familiar shapes we see in the sky.

Mobile Bay
Adobe Illustrator

Keeping your devices safe isn't easy, so take a trip to Mobile Bay and learn the dos and don'ts of mobile security. This three part infographic explores some of the frightening statistics about traveling with mobile devices.