Online Portfolio of Jodie Locklear


My name is Jodie Locklear. I'm an experienced visual art educator looking to transition into a challenging full time web & UI development career with opportunities to continue expanding my programming skills and translate my years of design knowledge into beautiful, user friendly interfaces.

my profile pic
now this feels a lot like

 Web & Interface Design

Case Study: Atlanta Beltline App

The Alanta Beltline wanted an interactive application they could use to collect various data on who's using the Atlanta Beltline and how they're using it. I worked with a small team at Govathon to design a fun app that solves this problem.

Atlanta Beltline App: Website

We designed a splash page website to demonstrate the main features of the app.

For the apps design, I contributed UX design, helped create some of the mock-up screens/icons in Photoshop, and used my front-end devlopment skills to assist with coding the presentation website.

Atlanta Beltline App: Sign Up Screen

Features: Create New User, Sign-In

Atlanta Beltline App: Home Screen

Features: User Icons for Biking, Running and Walking, User Greeting, date and weather, Capturing user data for whose on path currently, and 'whatchadoin' button to interact users with specific activities.

Atlanta Beltline App: Activity Screen

Features: Three color coded icon pages for biking/walking/running, Calculates number of participants plus GPS tracker, 'Whattheydoin' captures participants activities for current statistics, and Capture if purpose was leisure/recreation or exercise.

Atlanta Beltline App: Beltline Map Analytics

Features: Highlighting and capturing statistics weekly, 'Whattheydoin' pop-up analytics graph for user, Beltline capabilites to capture and follow usage.

User will be able to track flow of time frames to go, and show a current level of activity via a color indicator ( green, yellow, red) suggesting light to heavy usage levels.

Atlanta Beltline App: Whatchadoin Screen

Features: Show icons/buttons for capturing activity type of user, Other users feed is displayed to show what people are doing at the Beltline today, Events happening today are displayed (clickable links for more details), Capture if they are in a group or by themselves, Capture if they are there with any children, and Capture if they are there with any pets.

Atlanta Beltline App: Share Screen

Features: Share via a choice of social media whatever they want to, Automatic #atlbeltline is included by default for specific events, and Constant social feeds from other users, ability to interact and invite users via this feature.

Visit Site

Balanced Life Chiropractic - UI, WordPress, HTML5, CSS, PHP & Logo

Dr. Angela C. Darling wanted site she could update herself for her growing chiropractic practice in Virginia.

Process: Created PSD mockup, hand-coded the site in HTML5/CSS, then converted it into PHP for WordPress.

Soothing.  Healing.  Caring.  Trustworthy.  Professional.

These adjectives collected from the initial consultation with the client drove the creative direction of the sites design. A color palette of greens and blues was also decided.

While the client wanted a simple site design, she also wanted her site to go beyond brochure and be a place her clients could learn more about wellness.

I created three widgetized areas above the footer to show her latest blog post, and pull in a couple RSS feeds.

I built a blog page within her site where she will be able to publish her own articles and posts.

For social networking, "like" icons were included in the footer of the website, as well as at the bottom of each blog post.

Lastly, clients being able to locate her practice was at the top of this doctor's list. So in addition to having her office address in both the header and footer, I made google maps prominent on her contact page, and built a contact form for prospective clients to ask questions and schedule appointments.

Visit Site

Livewire Entertainment - UI, WordPress, HTML5, CSS, PHP & Logo

Livewire is a professional group of DJs that wanted a new brochure site to attract new clients and expand their market.

Process: Created PSD mockup, hand-coded the site in HTML5/CSS, then converted it into PHP for WordPress.

Club DJs and music producers at heart - branding for the project was crucial.

The look needed to attract more wedding and special event clients without loosing the cool DJ vibe. The sites tagline "No Cheese" drove the creative direction.

A dark color palette of blues, gray, and black was chosen to keep the site looking professional, yet hip.

WordPress was chosen for it's ease of use. The DJs like the functionality of being able to add music players, social icons, and other plugins to the site on their own.

Clean page design allows the DJs to post their own content and customize each page with images, videos, etc. without it looking like a "blog".

Visit Site

M.C. Twinklin's - UI, HTML5, CSS, Logo, & Photography

M.C. Twinklin's Christmas store in Atlanta wanted a complete website redesign to update their online presence and take advantage of social marketing.

Process: Hand-coded the site in HTML5 and CSS.

The client had very definite ideas for the composition and layout of the user interface.

I used this information to do some rough concept sketches to start. Using a card-sorting activity we collaboratively came up with the content categories and information hierarchy of the new site.

I then created electronic prototypes using Mozilla's Pencil Project and gave the client two UI options; one very traditional (like they requested), and one cleaner, more simple design.

Once the clients decided on the UI interface, I created more detailed wire frames to serve as a guide for myself and the clients, who supplied all the content for the website.

The client requested lime green as the main color for the new site.

I created a simple mock-up I could use for color studies.

In addition to building the website, I helped set up the clients on Twitter, set up a blog on, and beef up their SEO which has increased site hits by 400%.

I also photographed the store, products, and did the photo editing of most photos on the new site.

Visit Site

Outback Steakhouse Tablemates Website, Mobile Website, Andriod, & iOS App

My Role - QA Analyst

During my internship at Engauge Marketing in Atlanta, I worked as a QA analyst on the development team for this massive project.

I learned a lot about the development cycle of software applications and the QA process; from testing initial work flow functionally and process design, to the visual design integration across multiple devices and browsers.

As one of the QA analyst on this project, I performed end-to-end and use case testing for the website and Android app.

I helped review, validate, create, and close, test cases in the project management system under a high pressure deadline, which I loved!

Visit Site

Nestle Natural Bliss Recipe Contest Face Book App

My Role - QA Tester

I also had the opportunity to work as a QA tester on several Face Book applications during my internship.

One of those was the Claire Robinson recipe contest for Nestle. I worked closely with the project manager to perform the final cross-browser testing, prepare final issue/resolution documentation, and retest and close issues prior to the apps launch.

D3.js Experiment - D3.js, HTML5, CSS, Photoshop

I recently discovered the D3.js JavaScript library used mainly for drawing SVG data visualizations and decided to give it a try.

Drawing with code fascinates me, so I built this persona style dashboard as an experiment.

Process: Hand-coded the site in HTML5/CSS and used D3.js to write a script that creates the SVG circle chart and line chart.

Visit Site

I took a 6 week HCI certification course which consisted of designing a UX project from start to finish.

The course progressed through user research, story boarding, iteration, rapid prototyping, creating a functional mock-up, and ended with usability testing.

Using the list of needs and the high level point-of-view created from my user research, I created storyboards representing a couple ways a user could interact with the app.

For the main interaction design of the app, I was inspired by developer Paul Hayes 3D cube (

From there, I iterated, sketched, and ultimately created two rapid electronic prototypes of two different gestural interface options, using the tool Balsamiq.

       Graphic Design


Tastations Bakery

Tastations Bakery bakes made from scratch pies and cakes. The client wanted an unpretentious logo to convey the simple goodness of her baked goods.

Tastations business card design.

Oregami Media is what I call my freelance design services. My design aesthetic is simple and clean.

The following are graphics for the Oregami Media website I'm currently working on.

Jamie & Jodie is a clothing company that designs comfortable, sustainable womens clothing.

The brand is green and the style is relaxed glamour.

Hang-tag graphics for Jamie & Jodie.

Pinwheel Promotions is an event planning company that specializes in parties and events for children.

The brand is trustworthy, playful, and creative.

Red Reef Designs is a boutique interior design studio.

The brand is modern, casual, yet luxurious.

Joy Ryan is a wedding photographer.

Her brand is classic, elegant, and timeless.

Ginko Handmade makes natural soaps and body care products.

The brand is fresh, intelligent, and eco-friendly.

  Knowledge & Skills


  • Handcode HTML/5
  • Handcode CSS/3
  • JavaScript
  • PHP
  • CS5 Suite
  • Balsamiq
  • Microsoft Office

  • Prototyping
  • Wireframing
  • Graphic Design
  • Photo Editing
  • Color Theory
  • QA Testing
  • User Research

Contact Jodie

Want to say hello? I'd like that too.