Post on 07-Nov-2014
description
transcript
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