DIA2 - Website Design
01
Project Overview
DIA2 (Deep Insights Anytime, Anywhere) is a National Science Foundation project that aims to provide information about funded projects and help researchers to collaborate with others.
I led the design of a website to deliver the design philosophy and value of DIA2 to our target users.
THE PROBLEM
The design of the website should keep consistency with DIA2 and reflect on the major user groups.
The website should explain DIA2 intuitively.
THE SOLUTION
Our team derived the design requirements based on existing personas. To explain DIA2 clearly, I adapted a simple section-by-section structure to the website design. To reflect on the major user groups, our team carefully chose the images of individuals, and I designed a series of hero images that not only present the user groups but also indicate the design philosophy of DIA2.
MY ROLE
I led the UX/UI design work on the design of 6 webpages in close collaboration with the front-end developer.
UI/UX Designer
MY TOOLS
02
Design Process
Sketch
Sketching is a good way for exploring ideas and basic design styles. Our team gathered together and sketched the ideas on papers. After several rounds of discussions, we settled on one concept, and I further detailed the concept.
Mockup & Visual Comps
I created a paper mockup to explain the transitions used on the website, because a paper mockup can be easily created and can be used to communicate with other team members effectively.
I also created several visual comps to help with refining the concept, detailing higher design elements, and thinking of the website flow.
High-fidelity Prototype
A high-fidelity prototype can provide a realistic visual presentation of the product.
I created a high-fidelity interactive prototype to communicate with front-end developers.
A high-fidelity prototype can provide a realistic visual presentation of the product.
I created a high-fidelity interactive prototype to communicate with front-end developers.
Iterations
As a mentor, I worked closely with an undergraduate student to help her conduct usability testings on the website. Her study had gained valuable insights and provided useful feedback to the team. For example, users were expecting to see a fixed navigation bar when scrolling the website up and down, and they tended to click on everything that looked like an icon. They mentioned frequently that since the sponsor bar in the middle of the homepage used the same color as the navigation bar, they didn't realize there was information underneath, so they didn't scroll down. They felt disappointed when the website didn't act the same as their expectations. Thus, our team discussed on the refinements and implemented the changes.
Revised the feature section so the icons looked less clickable
Changed the color of the bar to indicate there is more information when scrolling down
04
Lesson Learned
Doesn't matter what method to use, as long as it works
In this project, I used a paper prototype, an HTML prototype, and several visual comps to communicate my idea with the team. To my surprise, though I only spent 10 minutes on making the paper prototype, it allowed me to deliver my idea effectively. Thus, it doesn't matter what method to use, what materials to build, how much time you spend on building the material, as long as it works, use it.
Less text.
More organized layout.