1. PORTFOLIO Jodie Locklear

2. BIO
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.
Specialties
• user inter face design • iterative sketching
• storyboards • user research
• wire-framing • visual design
• electronic prototyping • creative direction
• HTML, CSS • photo editing

3. M.C. TWINKLIN’S WEBSITE
http://www.mctwinklins.com

4. UX Design: Process & Information Architecture M.C.
I met with the clients to determine the
TWINKLIN’S
goal/s of the new website design and WEBSITE
define the content/information RE-DESIGN
hierarchy of the categories.
Using a card-sorting activity and Post- • UX Design
its, the clients were asked to participate • Visual
in a brainstorming session where we Design
collaboratively came up with possible • SEO
content categories for the new site. • HTML5
Then came the fun – sorting. The clients played with the arrangement of • CSS
the Post-it notes while we discussed their customers, feedback of their • Quality
current site, and the new sites information architecture. Assurance
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.

5. UX Design: Conceptual Sketching M.C.
The client had very definite ideas for the composition and layout of the
TWINKLIN’S
user interface. They requested that the store hours, phone, and address WEBSITE
be down the left side (always showing), logo top right, navigation across RE-DESIGN
the top under it, and the predominant color à lime-green.
• UX Design
I used this information to do some rough concept sketches to start.
• Visual
Design
• SEO
• HTML5
• CSS
• Quality
Assurance

6. UX Design: Prototyping M.C.
I then created electronic prototypes using Mozilla’s Pencil Project and TWINKLIN’S
gave the client two UI options; one very traditional (like they requested), WEBSITE
and one cleaner, more simple design.
RE-DESIGN
• UX Design
• Visual
Design
• SEO
• HTML5
• CSS
• Quality
Assurance

7. UX Design: Wire Framing M.C.
Unable to convince the clients to consider the simpler UI interface, I
TWINKLIN’S
created more detailed wire frames to serve as a guide for myself and the WEBSITE
clients, who supplied all the content for the website. RE-DESIGN
• UX Design
• Visual
Design
• SEO
• HTML5
• CSS
• Quality
Assurance

8. Visual Design M.C.
Before beginning the visual design, and taking into account the clients
TWINKLIN’S
request for use of the color lime-green, I created a simple mock-up I WEBSITE
could use for color studies.
RE-DESIGN
• UX Design
• Visual
Design
• SEO
• HTML5
• CSS
• Quality
Assurance
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

9. Visual Design M.C.
TWINKLIN’S
I then used the color story for the
icon design and other visual WEBSITE
elements on the site. RE-DESIGN
In addition to designing to website, I helped set up the clients on Twitter, • UX Design
and set up a blog on Wordpress.com. I also handled the photography • Visual
and did the photo editing of most photos on the new site. Design
• SEO
• HTML5
• CSS
• Quality
Assurance

10. Front-End Development & SEO M.C.
TWINKLIN’S
WEBSITE
RE-DESIGN
• UX Design
• Visual
Design
• SEO
• HTML5
• CSS
• Quality
Assurance

11. Quality Assurance Testing M.C.
The final step in the design process was testing the site in multiple browsers
TWINKLIN’S
and on multiple devices. WEBSITE
RE-DESIGN
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 • UX Design
well on multiple screen sizes. • Visual
Design
• SEO
Safari on laptop Safari on iPhone • HTML5
• CSS
• Quality
Assurance

12. HCI COURSE CUBECAL APP

13. User Research and Need Finding HCI
I took a 6 week HCI certification course which consisted of designing a UX COURSE
project from start to finish. The course progressed through user research, CUBECAL
story boarding, iteration, rapid prototyping, creating a functional mock-
up, and ended with usability testing.
APP
The project started with selecting an activity to observe, performing a • Need
need finding observation of three people performing the activity, Feeding
documenting the observations, and summarizing my findings. • Story
Boards
• Interaction
Design
I observed the activity of • Electronic
people managing their time Prototypes
and schedule. From there, I • Usability
interviewed the participants Te s t i n g
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.

14. Story Boards HCI
Using the list of needs and the high level point-of-view, I created COURSE
storyboards representing a couple ways a user could interact with the CUBECAL
app.
APP
• Need
Feeding
• Story
Boards
• Interaction
Design
• Electronic
Prototypes
• Usability
Te s t i n g

15. Interaction Design and Electronic Prototyping HCI
For the main interaction design of the app, I was inspired by developer COURSE
Paul Hayes 3D cube (www.paulrhayes.com). From there, I iterated, CUBECAL
sketched, and ultimately created two rapid electronic prototypes of two
different gesturaI interface options, using the tool Balsamiq.
APP
• Need
Paul Hayes’Cube and some of my gestural interface sketches Feeding
• Story
Boards
• Interaction
Design
• Electronic
Prototypes
• Usability
Te s t i n g
Screen examples from my electronic prototypes

16. Implementation Plan and Usability Testing HCI
I created an implementation plan to insure the CubeCal app mock-up COURSE
was completed in time for testing (My mock-up was created using a trail version CUBECAL
of Justinmind Prototyper and is no longer accessible to view).
APP
• Need
Feeding
• Story
Boards
• Interaction
Design
• Electronic
Prototypes
• Usability
Testing

17. JAMIE & JODIE CLOTHING

18. Visual Design Examples JAMIE &
JODIE
CLOTHING
• User Stories
& Personas
• Brand Point
of View
• Visual
Design
• Website
Design

19. GRAPHIC DESIGN EXAMPLES

21. CONTACT INFO
Jodie Locklear
Phone: 678-953-0012
Email: locklear_j@yahoo.com
Portfolio/Blog: http://www.jodielocklear.wordpress.com
LinkedIn: http://www.linkedin.com/in/jodielocklear
Twitter: http://www.twitter.com/songstudio