IGNITE Website Redesign
Group Project in User-Centered Web Design, UW HCDE
Mar. 2015 - Jun. 2015
Our Client:
-
Founder of IGNITE Worldwide, a non-profit organization that educates and empowers girls to discover STEM fields
Project Goals:
-
Understand client's business goals and expectations
-
Evaluate the user behaviors and usability issues of the original website
-
Deliver a high-fidelity prototype for the website redesign
My Major Contribution:
-
User Research - Survey design and data analysis
-
Persona - Corporate Sponsor Persona Development
-
Card Sorting Data Analysis
-
Sketching, Wireframing and prototyping
-
Major contact and Lead for Project Handover
Process
-
Information Collection
-
User Research and Personas
-
Card Sorting and Information Architecture
-
Sketching and Wireframing
-
Usability Testing and Client Feedback
-
High-Fidelity Prototyping
-
Project Handover to Client
Output and deliverables
-
Personas and User Tasks
-
High-Fidelity Prototype in Wordpress
-
Final Presentation
-
Project Handover Information and Suggestions
for Future Implementation
** The website is now live online: http://www.igniteworldwide.org
1. Information Collection
-
Information from client:
-
Project introduction
-
Client's business goals and expectations
-
Related marketing materials
-
Access to website server
-
2. User Research and Personas
-
Conducted User Research using:
-
Survey
-
Heatmap/Scroll map from CrazyEgg
-
Google analytics
-
-
Created Personas based on information from client and research results:
-
Carl Smith, the corporate sponsor
-
Val Taylor, the volunteer
-
Erica Jones, the educator
-
Izzy Gilmore, the high school girl
-
-
At this stage, based on our understanding of the business goals and user needs of IGNITE website, we came up with a list of design principles:
-
Enable Action
-
Concise
-
Responsive
-
Clear
-
Evokes Emotion
-
3. Card Sorting and Information Architecture
-
Card Sorting:
-
50 cards coming from Content Inventory of original website
-
Used OptimalSort for online card sorting survey
-
15 Participants finished the survey, sorting all 50 cards into an average of 14 groups.
-
-
Data Analysis
-
Used dendrograms and similarity matrix as a reference, we narrowed down to 8 menu items, each containing 1 to 2 layers.
-
After discussion with client and instructors, we thought that this was still too complicated for the purpose of this website.
-
We decided to group or eliminate around half of the original contents, and the final Information Architecture came down to 4 menu items with only one layer each.
-
Challenges:
-
The orginal website had a lot of redundant information or categories
-
Naming of the contents were confusing and included jargons.
4. Sketching and Wireframing
Click on the images to see an enlarged image.
Please find the axure wireframe at http://umumri.axshare.com/
5. Usability Testing and Client Feedback
-
Usability Testing with 5 users:
-
Not enough content on the wireframe so that people didn't know what to look for
-
Some naming of navigation items were confusing to users.
-
-
We also got a chance to share our process with our client:
-
She had overall really positive feedback
-
She also provided us with more information and materials we can utilize in our design.
-
6. High-Fidelity Prototype
-
We used Wordpress for our high fidelity protoype, because:
-
Our client was originally using Wordpress so her team had some level of familiarity to the backend managment system of Wordpress.
-
They can easily take on our work and contiue to finish the webiste redesign.
-
7. Project Handover
-
Final Report - click here to see our presentation
-
Click here to read our Project handover document, including related materials and suggestions
-
Our client successfully implemented our redesign and now the website is running live online: http://www.igniteworldwide.org
Before Redesign
After our redesign
