So what's the buzz?
University of Washington's MEPL Chemical Lab website is getting ready for an all new look! The archaic HTML website is now being redesigned in HTML5, CSS3, JavaScript and Bootstrap framework.
My Role:
Primary: Front end developer
Secondary: UX designer (Well.. not officially, but being a UX practitioner, I strive to apply UX best practices in its making :))
Key Features:
1. Rotating 3D-lmage-Gallery cube using CSS3 transforms
Early Prototype: Click here
2. Bootstrap 3 framework for responsive web design.
3. Sliding side-menu bars using Javascript triggered CSS3 transitions
4. Canvas animations
Early Prototype: Click here
5. Spinning footer contacts icons using CSS3 transforms and Mootools
6. Gamification of the website (planned for V2)
The Why:
The Professor of Electrochemical Engg. at UW’s C.E. department wants his website to be more interactive and engaging to keep his students hooked to it. In his words he says, make it a "Your Generation" website :)
The How:
Below is the design process followed:
• Identifying audience requirments
• Feature Brainstorming
• Prototyping
• User Testing
• Iterations and analysis
Classic tug of war
Like most practical design projects, this one also went through the classic tug of war between customer expectations and user needs. I conducted semi-structured interviews with our users (chemical engg. students) to identify their pain areas; and with our customer (The Professor) to understand his expectation from the site.
'Switching roles' method for feature brainstorming
I am applying my learnings of IMT 540 design class at UW to switch between different roles- artist, explorer, critique and warrior in order to come up with feature designs.
• As an Explorer - Exploring all possible ideas and designs
• As a Critique - Applying logic to eliminate features that are unrealistic or off the target
• As an Artist - Envisioning and sketching the features
• As a Warrior - Building the prototypes and actual system
Feature Plan sketches
Early testing and feature refinement:
While the early prototypes of the features look brilliant and good to have, they are still subject to early user testing and integration testing to understand if they could really go into the site.
I am currently working on getting them integrated so that we could kick in some early user testing.
Work in Progress..
Thanks for reading so far, I am currently working on integrating the features together for the main website. Please feel free to chip in with your comments on how the site could be better designed and what features could be added to improve the site's awesomeness :)
