OPRS Live
Researcher's form system
UIC OVCR is a research system built for the University of Illinois at Chicago's researchers, admins, and councilors. I'm responsible to design pages that can work on different platforms(web browsers, tablets, and smartphones). This page is one of the interfaces built for researchers to fill out the form.
|
TypeUI/UX Design
Company project |
RoleUI Design
Design with Developer |
The Goal
The University of Illinois has over 12,000 faculty and staff, and researchers are a larget amount of the number.Office of the Vice-Chancellor for Research has started it's online submitting platform at the beginning of 2000 and hasn't updated ever since. UX designer of the apartment is working on making the new system efficient, user-friendly, and paper-free. Office of the Vice-Chancellor for Research
What I did
OVCR's goal is to help research hand out a more organized research plan, enable them to track, modifier and check states, finally renew their proposals for research. The system has 3 different entries in response to 3 roles(researcher, admins, and councilor) in the research process.
During my time working on the position, I worked under the lead designer and assist her in many aspects of the re-design.
During my time working on the position, I worked under the lead designer and assist her in many aspects of the re-design.
Helping with testing
Since the lead designer is the only designer worked in the project, a lot of ideas need validation. I took the existing design and helped to conduct A/B testing on serval features, and help to find researchers who're willing to test the system, to solidify the design.
Building responsible design ( and work with engineers)
Also, one of the tasks for this project is to make it responsible. On the making of it, the engineering team encounter the design question of not knowing which part to shrink and which part to keep, there's a lot of discussion on the part, and we both agree it's convenient for designers to get to know how HTML is built, and create a sample page for the engineering team.
To solve this problem, I used a software called "web flow" which allow designer to design in the html way. Webflow helped me understand web structure and communicating with the engineers.
To solve this problem, I used a software called "web flow" which allow designer to design in the html way. Webflow helped me understand web structure and communicating with the engineers.
This page is one of the interfaces that built for researchers to fill out the form, it's also one of the samples I showed to the engineering team on guidelines of the whole system/ how the pages should be layout.
Design deliverable to the developer
Working with webflow, which is a software that places between code and graphic software, it enables me to design with DOM structure, also set the value to sizes and Typography so that I can hand directly to the software developer in the team.
Grid System
Also designed with the grid system.
Hover Interaction
Then I designed the hover feature for the website.