SlideShare a Scribd company logo
1 of 38
Download to read offline
SEAN BAXTER
User Experience Portfolio

v7.2
TABLE OF CONTENTS
IXDA ‘ 11 page 3-15
* Research and Insight

Hip Chick Style page 16-32
* User Story and Wireframes

Family Learning Center page 33-37
* Site Audit
6 team members tightly collaborated on the research, synthesis, and opportunity identification. A larger 18member team continued the persona development and design ideation. I was 1 of the 6 and 18 team
members.
Project Brief

Analyze the transportation needs of Interaction '11
attendees and come up with holistic design
concepts to address those needs.
BDW IxDA Methodology Summary
Targeted Users: Interaction 11 attendees
Documentation of group progress and process: Blog, Photos, Videos, and Audio
recordings.
Phase 1: Research & Insights

Research Goal 1: Gather information about general travel and conference attendance.
Methods Used:
• 5 question online Survey
• Administered prior to live interview
• Live Interview
Interviewee categories:
• Past Interaction conference attendees
• Attendees of other conferences
• Frequent travelers (business people)
• Individuals traveling to a city new to them
Insight Goal 1: Visualize the confines of the system
Methods Used:

• Concept Mapping
• Temporal and Semantic zoom 0, +1 and -1 zoom
PHASE 1 RECAP
Research
“In an airport its easier to navigate with
signage and staff to guide/Q&A”

“Anyone coming from Latin America or South
America will be looking for a physical person to
talk to at the airport.”

Insight: Attendees want someone to speak to when
they arrive at the airport.
Research
“I disagree with the approach to
spreading out the venues to get a sense
of the town- it was nearly impossible for
me to bump into the people I wanted to
meet. Networking is a major aspect of
attending conferences.”

Insight: Networking is a major focus for conference
attendees.
Research
“If I had known that the shuttle from DIA to Boulder was
45 minutes I would have been prepared for it.”

“When I travel to a new city for a
conference I want an overall map of
the conference area.”

Insight: When it comes to travel information is king.
Contextual Inquiry Footage

Full Scope Available: http://www.flickr.com/photos/52498914@N08/sets/
Process Documentation
Primary Persona
Secondary Persona
SOLUTIONS

Pre-Conference

Travel

Conference

I N T E R A C T I O N D E S I G N A S S O C I AT I O N

Website Pre-planning

Complete travel information
Details of helpful apps

DIA Concierge

Airport personal greeter
Recommend download of apps

Ride Share

Shuttle tracking app

X Marks the Spot
Wayfinding app
X Marks The Spot App Proposal .v1
Wireframe with Annotation

Annotation Table
Footnote Label

Description

1

Dropdown bar Pull down menu shows history.

2

venue name & Venue name and address.
address

3

venue photo

Venue photo helps user identify
location.

4

Information
area

Each venue provides drink specials or
other benefits to Xmark users.
Information varies depending on
venue.

5

venue
proximity

Shows name and address and
distance of nearby this Xmark
venues. Venues
ranked by proximity.

6

Map Panel

Map of current location. Double tap
map to enlarge.

7

Large Pin

Current Xmark venue.

8

Small Pins

Xmark venues nearby.
Hip
Chick
Style
Project Brief
Hip Chick Style is a website and mobile app for early teen
girls to exchange fashion ideas with their peers.
Methodology
• Research desirability and viability of product.
• Create user story.
• Develop personas.
• Wireframe solutions
Requirements
• Test via card sorting.
• Login / Registration
• Wardrobe Designer
• Runway Voting Platform
• Contact / Feedback Form
• About Us
• FAQ
Hip Chick Style Persona
Name: Vanessa
Age: 15
Location: Oakland, CA
Grade: Freshman High School
Parents: Single mom Upper middle class
Siblings: Older sister (19)
Interests: Shopping, Fashion, Dating, Acting
Music: Beyonce, Glee Cast, Lady Gaga, Ke$ha, Usher
Favorite Colors: 80’s neon colors, pink, lime green
Favorite Brands: American Eagle, Forever 21, Hollister,
Charlotte Russe.
Site Discovery: Friends (WOM), fB, myspace, teen mags.
Vanessa is 15 going on 25. With an older sister to show her the latest trends, Vanessa prefers things that are
slightly older than her age. She loves being a trendsetter and always shares her new looks with her friends via
Facebook.
Website Update
In 2011, The Family
Learning Center wanted to
update the look and feel of
their website to be an
information rich location
that encouraged donors to
respond with a gift.
Using this html mock up as
a template I rewrote the
code from scratch in
HTML5/CSS3 to ensure the
site felt modern and stayed
current with the latest
browsers.
create more contrast
in billboard to help
segment page and
highlight photos

add illustrated icons
to nav to strengthen
child education
message and
reinforce hyperlink

css button rounding
with borders to
soften feel yet create
pop

NEW
redesign footer to segment
repeated information

redesign billboard
image gallery & add
animated pop up
description (vs. static)

OLD
address in footer to strengthen
location visibility throughout site

redesign segment articles to decrease order of
importance but maintain relevancy on the page
allow donors to download
financial information directly from
website to highlight responsibility
& accountability

css rounded buttons with boarders to highlight donation opportunities
create donation form with error and
confirmation indications for user confidence
SEAN BAXTER
User Experience Portfolio

More Related Content

Similar to Sean Baxter Experience Design

Similar to Sean Baxter Experience Design (20)

SVA Fall 1010
SVA Fall 1010SVA Fall 1010
SVA Fall 1010
 
Designing Pause 2017 Experience
Designing Pause 2017 ExperienceDesigning Pause 2017 Experience
Designing Pause 2017 Experience
 
SVA Workshop 072311
SVA Workshop 072311SVA Workshop 072311
SVA Workshop 072311
 
SVA Workshop 0711
SVA Workshop 0711SVA Workshop 0711
SVA Workshop 0711
 
Introduction to Information Architecture & Design - 12/06/14
Introduction to Information Architecture & Design - 12/06/14Introduction to Information Architecture & Design - 12/06/14
Introduction to Information Architecture & Design - 12/06/14
 
Innovative approaches to public engagement atc 2020
Innovative approaches to public engagement atc 2020Innovative approaches to public engagement atc 2020
Innovative approaches to public engagement atc 2020
 
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
 
Introduction to Information Architecture & Design - SVA Workshop 03/22/14
Introduction to Information Architecture & Design - SVA Workshop 03/22/14Introduction to Information Architecture & Design - SVA Workshop 03/22/14
Introduction to Information Architecture & Design - SVA Workshop 03/22/14
 
SVA Summer 0710
SVA Summer 0710SVA Summer 0710
SVA Summer 0710
 
New York Adventure Club spec doc
New York Adventure Club spec docNew York Adventure Club spec doc
New York Adventure Club spec doc
 
SVA Winter 0210
SVA Winter 0210SVA Winter 0210
SVA Winter 0210
 
Design Portfolio
Design Portfolio Design Portfolio
Design Portfolio
 
Introduction to Information Architecture & Design - 6/24/17
Introduction to Information Architecture & Design - 6/24/17Introduction to Information Architecture & Design - 6/24/17
Introduction to Information Architecture & Design - 6/24/17
 
Introduction to Information Architecture & Design - 3/19/16
Introduction to Information Architecture & Design - 3/19/16Introduction to Information Architecture & Design - 3/19/16
Introduction to Information Architecture & Design - 3/19/16
 
Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Introduction to Information Architecture & Design - SVA Workshop 06/21/14Introduction to Information Architecture & Design - SVA Workshop 06/21/14
Introduction to Information Architecture & Design - SVA Workshop 06/21/14
 
Introduction to Information Architecture & Design - 6/25/16
Introduction to Information Architecture & Design - 6/25/16Introduction to Information Architecture & Design - 6/25/16
Introduction to Information Architecture & Design - 6/25/16
 
SVA Workshop 100111
SVA Workshop 100111SVA Workshop 100111
SVA Workshop 100111
 
Introduction to Information Architecture & Design - 6/20/15
Introduction to Information Architecture & Design - 6/20/15Introduction to Information Architecture & Design - 6/20/15
Introduction to Information Architecture & Design - 6/20/15
 
Introduction to Information Architecture & Design - SVA Workshop 12/07/13
Introduction to Information Architecture & Design - SVA Workshop 12/07/13Introduction to Information Architecture & Design - SVA Workshop 12/07/13
Introduction to Information Architecture & Design - SVA Workshop 12/07/13
 
Introduction to Information Architecture & Design - 2/13/16
Introduction to Information Architecture & Design - 2/13/16Introduction to Information Architecture & Design - 2/13/16
Introduction to Information Architecture & Design - 2/13/16
 

Recently uploaded

ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
Sarbjit Bahga
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintAction
 
Software Architecture - Architecture Styles and Patterns-1.pdf
Software Architecture - Architecture Styles and Patterns-1.pdfSoftware Architecture - Architecture Styles and Patterns-1.pdf
Software Architecture - Architecture Styles and Patterns-1.pdf
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Edward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to PrintingEdward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to Printing
 
Academic Portfolio (2017-2021) .pdf
Academic Portfolio (2017-2021)      .pdfAcademic Portfolio (2017-2021)      .pdf
Academic Portfolio (2017-2021) .pdf
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Solutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptxSolutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptx
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 

Sean Baxter Experience Design

  • 2. TABLE OF CONTENTS IXDA ‘ 11 page 3-15 * Research and Insight Hip Chick Style page 16-32 * User Story and Wireframes Family Learning Center page 33-37 * Site Audit
  • 3. 6 team members tightly collaborated on the research, synthesis, and opportunity identification. A larger 18member team continued the persona development and design ideation. I was 1 of the 6 and 18 team members.
  • 4. Project Brief Analyze the transportation needs of Interaction '11 attendees and come up with holistic design concepts to address those needs.
  • 5. BDW IxDA Methodology Summary Targeted Users: Interaction 11 attendees Documentation of group progress and process: Blog, Photos, Videos, and Audio recordings. Phase 1: Research & Insights Research Goal 1: Gather information about general travel and conference attendance. Methods Used: • 5 question online Survey • Administered prior to live interview • Live Interview Interviewee categories: • Past Interaction conference attendees • Attendees of other conferences • Frequent travelers (business people) • Individuals traveling to a city new to them Insight Goal 1: Visualize the confines of the system Methods Used: • Concept Mapping • Temporal and Semantic zoom 0, +1 and -1 zoom
  • 7. Research “In an airport its easier to navigate with signage and staff to guide/Q&A” “Anyone coming from Latin America or South America will be looking for a physical person to talk to at the airport.” Insight: Attendees want someone to speak to when they arrive at the airport.
  • 8. Research “I disagree with the approach to spreading out the venues to get a sense of the town- it was nearly impossible for me to bump into the people I wanted to meet. Networking is a major aspect of attending conferences.” Insight: Networking is a major focus for conference attendees.
  • 9. Research “If I had known that the shuttle from DIA to Boulder was 45 minutes I would have been prepared for it.” “When I travel to a new city for a conference I want an overall map of the conference area.” Insight: When it comes to travel information is king.
  • 10. Contextual Inquiry Footage Full Scope Available: http://www.flickr.com/photos/52498914@N08/sets/
  • 14. SOLUTIONS Pre-Conference Travel Conference I N T E R A C T I O N D E S I G N A S S O C I AT I O N Website Pre-planning Complete travel information Details of helpful apps DIA Concierge Airport personal greeter Recommend download of apps Ride Share Shuttle tracking app X Marks the Spot Wayfinding app
  • 15. X Marks The Spot App Proposal .v1 Wireframe with Annotation Annotation Table Footnote Label Description 1 Dropdown bar Pull down menu shows history. 2 venue name & Venue name and address. address 3 venue photo Venue photo helps user identify location. 4 Information area Each venue provides drink specials or other benefits to Xmark users. Information varies depending on venue. 5 venue proximity Shows name and address and distance of nearby this Xmark venues. Venues ranked by proximity. 6 Map Panel Map of current location. Double tap map to enlarge. 7 Large Pin Current Xmark venue. 8 Small Pins Xmark venues nearby.
  • 17. Project Brief Hip Chick Style is a website and mobile app for early teen girls to exchange fashion ideas with their peers. Methodology • Research desirability and viability of product. • Create user story. • Develop personas. • Wireframe solutions Requirements • Test via card sorting. • Login / Registration • Wardrobe Designer • Runway Voting Platform • Contact / Feedback Form • About Us • FAQ
  • 18. Hip Chick Style Persona Name: Vanessa Age: 15 Location: Oakland, CA Grade: Freshman High School Parents: Single mom Upper middle class Siblings: Older sister (19) Interests: Shopping, Fashion, Dating, Acting Music: Beyonce, Glee Cast, Lady Gaga, Ke$ha, Usher Favorite Colors: 80’s neon colors, pink, lime green Favorite Brands: American Eagle, Forever 21, Hollister, Charlotte Russe. Site Discovery: Friends (WOM), fB, myspace, teen mags. Vanessa is 15 going on 25. With an older sister to show her the latest trends, Vanessa prefers things that are slightly older than her age. She loves being a trendsetter and always shares her new looks with her friends via Facebook.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 34. In 2011, The Family Learning Center wanted to update the look and feel of their website to be an information rich location that encouraged donors to respond with a gift. Using this html mock up as a template I rewrote the code from scratch in HTML5/CSS3 to ensure the site felt modern and stayed current with the latest browsers.
  • 35. create more contrast in billboard to help segment page and highlight photos add illustrated icons to nav to strengthen child education message and reinforce hyperlink css button rounding with borders to soften feel yet create pop NEW redesign footer to segment repeated information redesign billboard image gallery & add animated pop up description (vs. static) OLD address in footer to strengthen location visibility throughout site redesign segment articles to decrease order of importance but maintain relevancy on the page
  • 36. allow donors to download financial information directly from website to highlight responsibility & accountability css rounded buttons with boarders to highlight donation opportunities
  • 37. create donation form with error and confirmation indications for user confidence