DKU Innovation Incubator Web Portal
Background
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.
Timeline
Fall 2020 - Spring 2021,
5 months
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 submissions, 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 them.
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.
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
The graph above displays the color palette I developed for this website. I thought of many factors in the process of color selection. First and foremost, since the colors of the office's logo are black and white, I would use these basic colors are the major color scheme for this website so that the style matches the branding materials of the office. Additionally, it is brought to my attention that the office has many marketing materials to be displayed on the website, which are diverse in color. Therefore, I want to use very neutral colors to finish the palette, ensuring no images will look odd on the website's background.
The interfaces above are my final design deliverables presented to the office. The structure of how these pages are organized, as you might have figured, is identical to the graph in the previous section. I adopt a relatively conventional way of laying out the content, since the main usage of this website is a management system. I try to find a balance between efficiency, creativity and good user experience. I try to design as few pages as possible so that tasks are not over-complicated. I also used some photos from previous events to decorate the pages, making the visual style a bit more interesting and unique. For many of the pages, the content was already been fixed by the office, so I tried to play around with the variations of font combination, indentation, and organization to create an interesting and engaging visual appeal.​
Reflections
Balance between client need and UX
This project is my first time working with a "client". In the previous design projects I participated, I mostly started with the motivation of answering a question, and I carry out the steps of design as a problem-solving process. However, the InE office had a very specific idea of what they wanted, and it is expected that I could innovate on top of what they already had. It was very difficult for me to seek the balance between what my client wanted, and what I thought was the best for user experience. During the process of this project, there was one time when I believe that the process should be simplified, and my suggestion was accepted and the workflow of the entire team was improved. But there are also many times that the decisions of my clients conflicted with my design ideas. I think this is a valuable experience for me, because it showed me the potential and the importance of design in a team, and it also inspired me to think about the balance between client needs and UX.
UI fidelity and details of design
I was originally hired by the office as an assisting front-end developer and our team did not have any designers. Though I ended up taking the design work, I was still the only designer on team, and will have to do a lot of UI design apart from UX. My previous experiences were more about the research process of design, and I did not have sufficient practice in UI. Therefore, many details of this prototype should be further iterated and polished. It also inspired me that although UX designers usually are not in charge of the pixel-level interface design, it is still important for us to have a good understanding and sufficient practice, so that we can be more well-rounded and also work better with different kinds of designers.