Jodie Locklear Portfolio


Published on

Published in: Career
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Jodie Locklear Portfolio

  1. 1. PORTFOLIO Jodie Locklear
  2. 2. BIOExperienced designer and visual arts educator ready tofocus full time on user experience design. Particularlyinterested in user inter face design, interaction design,user research, and human-computer-interaction for theweb and mobile.Specialties•  user inter face design •  iterative sketching•  storyboards •  user research•  wire-framing •  visual design•  electronic prototyping •  creative direction•  HTML, CSS •  photo editing
  4. 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. 5. UX Design: Conceptual Sketching M.C.The client had very definite ideas for the composition and layout of the TWINKLIN’Suser interface. They requested that the store hours, phone, and address WEBSITEbe down the left side (always showing), logo top right, navigation across RE-DESIGNthe top under it, and the predominant color à lime-green. •  UX DesignI used this information to do some rough concept sketches to start. •  Visual Design •  SEO •  HTML5 •  CSS •  Quality Assurance
  6. 6. UX Design: Prototyping M.C.I then created electronic prototypes using Mozilla’s Pencil Project and TWINKLIN’Sgave the client two UI options; one very traditional (like they requested), WEBSITEand one cleaner, more simple design. RE-DESIGN •  UX Design •  Visual Design •  SEO •  HTML5 •  CSS •  Quality Assurance
  7. 7. UX Design: Wire Framing M.C.Unable to convince the clients to consider the simpler UI interface, I TWINKLIN’Screated more detailed wire frames to serve as a guide for myself and the WEBSITEclients, who supplied all the content for the website. RE-DESIGN •  UX Design •  Visual Design •  SEO •  HTML5 •  CSS •  Quality Assurance
  8. 8. Visual Design M.C.Before beginning the visual design, and taking into account the clients TWINKLIN’Srequest for use of the color lime-green, I created a simple mock-up I WEBSITEcould use for color studies. RE-DESIGN •  UX Design •  Visual Design •  SEO •  HTML5 •  CSS •  Quality AssuranceUsing the mock-up, I created a color-palette for the site and redesignedthe clients logo using Photoshop to reflect the new color story. before after
  9. 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-DESIGNIn addition to designing to website, I helped set up the clients on Twitter, •  UX Designand set up a blog on I also handled the photography •  Visualand did the photo editing of most photos on the new site. Design •  SEO •  HTML5 •  CSS •  Quality Assurance
  10. 10. Front-End Development & SEO M.C. TWINKLIN’S WEBSITE RE-DESIGN •  UX Design •  Visual Design •  SEO •  HTML5 •  CSS •  Quality Assurance
  11. 11. Quality Assurance Testing M.C.The final step in the design process was testing the site in multiple browsers TWINKLIN’Sand on multiple devices. WEBSITE RE-DESIGNA mobile site was not part of this project, but I wanted to incorporatesome responsive design into the CSS so the website would at least display •  UX Designwell on multiple screen sizes. •  Visual Design •  SEO Safari on laptop Safari on iPhone •  HTML5 •  CSS •  Quality Assurance
  13. 13. User Research and Need Finding HCII took a 6 week HCI certification course which consisted of designing a UX COURSEproject from start to finish. The course progressed through user research, CUBECALstory boarding, iteration, rapid prototyping, creating a functional mock-up, and ended with usability testing. APPThe project started with selecting an activity to observe, performing a •  Needneed finding observation of three people performing the activity, Feedingdocumenting 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. 14. Story Boards HCIUsing the list of needs and the high level point-of-view, I created COURSEstoryboards representing a couple ways a user could interact with the CUBECALapp. APP •  Need Feeding •  Story Boards •  Interaction Design •  Electronic Prototypes •  Usability Te s t i n g
  15. 15. Interaction Design and Electronic Prototyping HCIFor the main interaction design of the app, I was inspired by developer COURSEPaul Hayes 3D cube ( From there, I iterated, CUBECALsketched, and ultimately created two rapid electronic prototypes of twodifferent 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. 16. Implementation Plan and Usability Testing HCII created an implementation plan to insure the CubeCal app mock-up COURSEwas completed in time for testing (My mock-up was created using a trail version CUBECALof Justinmind Prototyper and is no longer accessible to view). APP •  Need Feeding •  Story Boards •  Interaction Design •  Electronic Prototypes •  Usability Testing
  18. 18. Visual Design Examples JAMIE & JODIE CLOTHING •  User Stories & Personas •  Brand Point of View •  Visual Design •  Website Design
  20. 20. CONTACT INFOJodie Locklear Phone: 678-953-0012 Email: Portfolio/Blog: LinkedIn: Twitter: