DKU Innovation Incubator Web Portal
Background
This project is done as part of my job as a Web Design & Development Assistant at the Innovation & Entrepreneurship Initiative at Duke Kunshan University (DKU). DKU Innovation and Entrepreneurship Initiative (InE) serves as a platform and resource center to foster interdisciplinarity in practice, nurture entrepreneurship by fostering experiential learning environments, and transform ideas into actions with meaningful impacts. DKU iNNOVATION iNCUBATOR (Dii) is the flagship program of the office, and it serves as an engine for cultivating and supporting startup ideas from across the campus. You may visit here for more information regarding the office and their programs.
Project Type
Project From Work,
Timeline
Fall 2020 - Spring 2021
Role
Lead UI/UX Designer,
Front-end Development Assistant
Problem Space
The goal of the project is to design a website for the Dii program, a place where students can post and receive feedback for their submission, and in which faculty mentors and supervise and comment on student projects. I was originally hired by the office as a front-end assistant to work on the development of an existing prototype and my team did not have any designers. But I became aware of the design problems and volunteered to take over the UX design work for this project.
The major design problems of the original prototype lie in the redundant information architecture and the lack of style-wise design. The original prototype had three entirely different portals for different people involved in the Dii program, but most of the information has overlapping, and the design hugely increased the development cost for the other people working on this project. Additionally, since the team did not have any designers, the prototype we had were simply wireframes, which will not have any real-life application values even if we develop it.
Original Interfaces
Analysis
Who are the target users?
To solve the problem in information architecture, the first time I need to do was to re-organize the different entities involved in this program. I made an Entity-Relationship stakeholder map to look into the relationship between different users of this web portal.
Students will be the main users of this site as they apply and contribute to the projects. Faculty advisors will be providing feedback for the student’s projects, which is basically one extra layer of features that can be built up from the student version of the website. On top of that, we can add more features for the site administrators, as they have edit assess to the website and thus will be the most complicated to design.
I will first design the student portal, and gradually build up the portals for advisors and administrators. For a better and more concise demonstration, the rest of this case study will mainly focus on the student portal of this website.
What will the users do with this portal?
To design specific features, we first need to understand the tasks our users need to accomplish. For a regular student user, they will first need to sign up or log in to the site. Then, they should get to a landing page, which serves as a navigation to the ongoing applications or projects they have. Users should be able to start and finish a new application, check the list of their ongoing projects, and edit details for their projects. For demonstration purposes, I connect these tasks in a flowchart so that you can better observe the relationships between different tasks. For the faculty advisor’s portal, the tasks are mostly the same despite that the users will not have the edit assess to the materials. Instead, they will have the option to leave a comment.
After narrowing down my focus, I did another Entity/Relationship-style flowchart to analyze the main functionalities involved in the Dii student portal. As is seen from the above, the student’s tasks are actually pretty simple: apply for projects, check project progress and submit some materials. However, when you turn them into every single step with details promoting the decision making process, it could be a bit more complicated than this simple chart.
​What will be the structure of the new portal?
On top of the user tasks, I developed the structure of the website. Every vertical layer on the graph represents a level of the pages of the website. For example, "My projects", "New project", "My account", and "Log out" are the tabs on the menu, which represent the first-level pages of the website. I put the two major tasks - project management, and new project application, into two major pages, in which multiple detailed task breakdowns are given. Most of the specific functions and task breakdowns are provided by the request from the InE office.
Design
On top of the user tasks, I developed the structure of the website. Every vertical layer on the graph represents a level of the pages of the website. For example, "My projects", "New project", "My account", and "Log out" are the tabs on the menu, which represent the first-level pages of the website. I put the two major tasks - project management, and new project application, into two major pages, in which multiple detailed task breakdowns are given. Most of the specific functions and task breakdowns are provided by the request from the InE office.
On top of the user tasks, I developed the structure of the website. Every vertical layer on the graph represents a level of the pages of the website. For example, "My projects", "New project", "My account", and "Log out" are the tabs on the menu, which represent the first-level pages of the website. I put the two major tasks - project management, and new project application, into two major pages, in which multiple detailed task breakdowns are given. Most of the specific functions and task breakdowns are provided by the request from the InE office.
Prototype
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Reflections