© 2019 built by Liang Zhao with LOOOOOVE

  • LinkedIn - White Circle
  • Twitter - White Circle
  • Instagram - White Circle

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.

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

03

Final Design

Color & Fonts

#505050

Nav bar

Section break

Font color

#E1E1E1

Background

 

#2BBEE4

Label

Highlight

Gradient

#4FC786

Gradient

Open Sans

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

 

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.