Design Process

Identify User Types & Flows

3 user types were identified. Through this, we differentiated user goals and task flows.

Content Creators

Main Goal: Submit Resources

Photo by Amy Hirschi on Unsplash

Learners

Main Goal: Search & Find Data

Photo by Wes Hicks on Unsplash

Reviewers

Main Goal: Review resources & grant permission to submitters

Business photo created by katemangostar – www.freepik.com

This type of user was out of the scope of this redesign project. After discussion with clients, we were not going to focus on their goals and needs this time.

Define Problems

Unclear information architecture and user flow result in an ineffectively resources search and submit experience.

Establish Goals

Ideate & Sketch

Home Page

• Showed sign up option at the top of the intro section
• Added a section to illustrate the advantages of the platform
• Provided updates and featured resources to returned users

Search Page

• Provided category tabs, a popular keyword list, and advanced search to cater needs for novice and experienced users
• Used dropdown menus for filters for a better scannability
• Allowed users to choose multiple options at once before applying filters
• Changed the info display format. Instead of using a drop-down format, show a brief intro and the options for view full description and view resources. And put the media type and license to the top
• Provided two actions for users: email and bookmark. Email allows users to send this info to others easily. Bookmark allows users to save this info if they have an account

Submit Page

• Added a section to explain resources submit flow
• Changed forms’ tabs from vertical to horizontal which is easier to notice
• Put notification and verification messages below that are easier to check
• Offered a confirmation message after submission

Wireframing

Design System

The main color we used followed by ESIP main website. The typography remained the same as the current DMT website. Moreover, we differentiated the designs of the primary and secondary buttons.

Colors

Buttons

Typography

Create Visual Mockups

Search Page

Current Design

New Design

Design Rationales

1. Added different categories, a keyword list, and advanced search option for a better search 
2. Used a dropdown menu to make all filter options easy to see
3. Reorganized information: provided more hints of the content and buttons directly for call-to-action
4. Provided email/ share and bookmark features to promote community collaboration

Submit Page

Current Design

New Design

Design Rationales

1. Provided a visual guideline for the submission process to help aide users in knowing where they are in the process
2. Condensed the text at the bottom to aide in bringing importance to it
3. Put security verification message before the submit button
4. Relabeled “Save” as “Submit” which is a more common terminology
5. Offered a confirmation message with a sign-up suggestion

Design Iteration

There were 3 modifications we made based on the discussion with clients.

1. Abandon “Apply Filters” User Flow

Considering user flow, it was not intuitive that users need to click “apply filters” if they want to clear any of the filters they chose. Therefore, it was better to keep the current practice of real-time data change logic. 

2. Abandon Drop-down Menu Design

Moreover, a drop-down menu design would be easy for users to forget what they chose. Therefore, compromising with the initial idea: make the filters option easy to see, we kept each filter column with a certain height, used the “show more” button to hide options, and designed the “clear all” button if users click filters in any column. 

3. Add a Confirm Message Before Submission

Although users can submit resources without logging in/ signing up an account, to increase sign-ups and information completeness, we designed a pop-up message to encourage users to fill in all columns even if they are not required 

Takeaways

This project had been a great experience since the Client team had clear goals and was engaged. We had several in-depth discussions on user flow with their team member who had usability experience. Still, some of the contexts were missing where we didn’t know how searchers manage the data they found. Most research resources were retrieved from clients then we synthesized results. The new prototype needs further testing to see whether the flow fits into novice/ experienced searchers and content creator’s needs. 

Click to View the Prototype