jodie locklear portfolio

Download Jodie Locklear Portfolio

Post on 07-Nov-2014

609 views

Category:

Career

2 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. PORTFOLIO Jodie Locklear
  • 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
  • 3. M.C. TWINKLINS WEBSITE http://www.mctwinklins.com
  • 4. UX Design: Process & Information Architecture M.C. I met with the clients to determine the TWINKLINS 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 TWINKLINSuser 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. UX Design: Prototyping M.C.I then created electronic prototypes using Mozillas Pencil Project and TWINKLINSgave 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. UX Design: Wire Framing M.C.Unable to convince the clients to consider the simpler UI interface, I TWINKLINScreated 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. Visual Design M.C.Before beginning the visual design, and taking into account the clients TWINKLINSrequest 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. Visual Design M.C. TWINKLINS 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 Wordpress.com. I also handled the photography Visualand did the photo editing of most photos on the new site. Design SEO HTML5 CSS Quality Assurance
  • 10. Front-End Development & SEO M.C. TWINKLINS 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