jodie locklear portfolio

Jodie Locklear PORTFOLIO

Experienced designer and visual arts educator ready to focus full time on user experience design. Particularly interested in user inter face design, interaction design, user research, and human-computer-interaction for the web and mobile.

BIO

Specialties •  user inter face design •  storyboards •  wire-framing •  electronic prototyping •  HTML, CSS

•  iterative sketching •  user research •  visual design •  creative direction •  photo editing

M.C. TWINKLIN’S WEBSITE

http://www.mctwinklins.com

UX Design: Process & Information Architecture

I met with the clients to determine the goal/s of the new website design and define the content/information hierarchy of the categories.

•  UX Design •  Visual

Des ign •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

Using a card-sorting activity and Post-its, the clients were asked to participate in a brainstorming session where we collaboratively came up with possible content categories for the new site.

Then came the fun – sorting. The clients played with the arrangement of the Post-it notes while we discussed their customers, feedback of their current site, and the new sites information architecture.

The sorting process helped us all clarify the main goals for the website redesign and get a clear picture of the site content, focus, the users, and their story.

The clients liked the activity because it allowed them to be fully vested in the design process and experience ownership of defining the categories/pages. I loved it because all those Post-its lined up gave me an immediate “visual” of the site flow and navigation.

UX Design: Conceptual Sketching

•  UX Design •  Visual

Des ign •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

The client had very definite ideas for the composition and layout of the user interface. They requested that the store hours, phone, and address be down the left side (always showing), logo top right, navigation across the top under it, and the predominant color à lime-green.

I used this information to do some rough concept sketches to start.

UX Design: Prototyping

•  UX Design •  Visual

Des ign •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

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.

•  UX Design •  Visual

Des ign •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

UX Design: Wire Framing

Unable to convince the clients to consider the simpler 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.

•  UX Des ign •  Visual

Design •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

Visual Design

Before beginning the visual design, and taking into account the clients request for use of the color lime-green, I created a simple mock-up I could use for color studies.

Using the mock-up, I created a color-palette for the site and redesigned the clients logo using Photoshop to reflect the new color story.

before after

•  UX Des ign •  Visual

Design •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

Visual Design

I then used the color story for the icon design and other visual elements on the site.

In addition to designing to website, I helped set up the clients on Twitter, and set up a blog on Wordpress.com. I also handled the photography and did the photo editing of most photos on the new site.

•  UX Des ign •  Visual

Des ign •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

Front-End Development & SEO

•  UX Des ign •  Visual

Des ign •  SEO •  HTML5

•  CSS •  Qual i ty

Assurance

M.C. TWINKLIN’S WEBSITE RE-DESIGN

Quality Assurance Testing

The final step in the design process was testing the site in multiple browsers and on multiple devices. A mobile site was not part of this project, but I wanted to incorporate some responsive design into the CSS so the website would at least display well on multiple screen sizes.

Safari on laptop Safari on iPhone

HCI COURSE CUBECAL APP

•  Need Feeding

•  Story Boards

•  Interact ion Des ign

•  Electronic Prototypes

•  Usabi l i ty Test ing

HCI COURSE CUBECAL APP

User Research and Need Finding

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.

The project started with selecting an activity to observe, performing a need finding observation of three people performing the activity, documenting the observations, and summarizing my findings.

I observed the activity of people managing their time and schedule. From there, I interviewed the participants and developed a list of needs that the app should address.

I used the list of needs to develop a high level point-of-view for the project.

Point-of-view: Families & friends need a simple and fun way to share calendar events and schedules.

•  Need Feeding

•  Story Boards

•  Interact ion Des ign

•  Electronic Prototypes

•  Usabi l i ty Test ing

HCI COURSE CUBECAL APP

Story Boards

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

•  Need Feeding

•  Story Boards

•  Interact ion Design

•  Electronic Prototypes

•  Usabi l i ty Test ing

HCI COURSE CUBECAL APP

Interaction Design and Electronic Prototyping

For the main interaction design of the app, I was inspired by developer Paul Hayes 3D cube (www.paulrhayes.com). From there, I iterated, sketched, and ultimately created two rapid electronic prototypes of two different gesturaI interface options, using the tool Balsamiq.

Paul Hayes’Cube and some of my gestural interface sketches

Screen examples from my electronic prototypes

•  Need Feeding

•  Story Boards

•  Interact ion Des ign

•  Electronic Prototypes

•  Usabi l i ty Test ing

HCI COURSE CUBECAL APP

Implementation Plan and Usability Testing

I created an implementation plan to insure the CubeCal app mock-up was completed in time for testing (My mock-up was created using a trail version of Justinmind Prototyper and is no longer accessible to view).

JAMIE & JODIE CLOTHING

•  User Stor ies & Personas

•  Brand Point of View

•  Visual Design

•  Websi te Design

JAMIE & JODIE CLOTHING

Visual Design Examples

GRAPHIC DESIGN EXAMPLES

CONTACT INFO

Jodie Locklear

Phone:

Email: Portfolio/Blog:

LinkedIn: Twitter:

678-953-0012 locklear_j@yahoo.com http://www.jodielocklear.wordpress.com http://www.linkedin.com/in/jodielocklear http://www.twitter.com/songstudio