Thinking Cap

Overview

The Thinking Cap is a web application for helping junior and senior college students find, create, or/and plan their capstone projects.

This was part of a group project for the CSS 480 Principles of Human-Computer Interaction course taught by Professor Arnie Lund. The objective of the class project was to create a product or service that can help college students.

Role

Project manager

UX design, Visual Design, User Research, Interview, Prototype,

Project Period

March 2022- June 2022

Context

The project prompt was originally a product that makes it easier for college students to find jobs/ internships. After sharing the story about my past experience with the difficulties in finding a solid capstone project for the IMD major, the group decided capstones would be a more relevant topic. The reason for its relevance is due to the fact that the entire class is composed of only junior and senior college students who have already experienced or were about to experience the process of discovering and working on a capstone project.

Knowing that the project will only be conducting interviews, usability tests, and surveys within the classroom due to covid concerns, we kept in mind the quote created by Professor Arnie Lund himself, "Know the user, you are not thy user". This is why instead of designing the product based on our personal experience with capstones, I tried to shift the project direction towards creating new ways of approaching capstones in simplified informative ways.

In this project, I became the Lead UX designer and Project Manager after the team showed favorability towards my project visions.

The Hunt Statement

As part of the project refinement process, I created this hunt statement to help clarify the project direction.

"To understand the factors that determine how juniors/ seniors decide on and develop their capstone project ideas, in order to create a resource that assists in refining ideas tailored to the user's capabilities and area of interest."

With the hunt statement, we wanted to summarize the target audience and our product goals. But

Our Primary Goals

The primary goals we targeted for this project are:

Discover the best "search" method to finding or ideate capstone ideas
Give as much context about the capstone prompt in short summaries while leaving room for changes
Create an opportunity to network with professionals using the capstone project
Provide resources that consider the long-term development of capstone projects. (Including a timeline that keeps track of project progression, template for capstone design doc, brainstorming tools, etc.)

However, due to time limitations and limiting the project scope, the last two goals remained as concepts for potential features.

Learning About Our Primary Users

One of the main areas of interest in the project was to understand which methods students use to discover and find new project ideas. This is important because it includes insight into what students search for when they decide on a capstone project. To find answers to my questions, my generative research interview questions were all focused on the "capstone decision process" and overall experience. The questions I created for the generative interview were as shown below.

generative research interview questions.JPG

My key takeaways from the interview were:

-group projects were preferred due to the distribution of work and diverse range of skills

-projects usually start with identifying the needs before assessing how to use current skills to push the project forward

-not all capstone projects are hard to decide on if the major already provides a list of project options. However, the project direction almost never remains the same as the initial idea.

I learned that the capstone process is like any other academic project, but it also varies based on the design of the major's program. Some majors like Mechanical engineering might include a list of group project options while some majors like Computer Science might have options for individual projects of their choosing. Knowing this, we tried to make the product customizable to suit the user's needs by adding filters and additional tagging system.

Our Target User/ Persona

For this project, the primary personas are senior and junior students. As for Secondary personas, school faculty (professors) & industry professionals were chosen for networking and mentorship purposes.

Our main persona was a senior undergraduate called Brett Nolan whose been struggling to find the right capstone project idea based on his requirements. In this persona, I wanted to highlight the reasons why the capstone project is important to the user. More specifically, how the capstone will be used in his portfolio along with the user's desire to work on something suitable based on his current available skillsets and capabilities.

1/6

User Journey Map

To solidify the project idea with the entire team, we created a user journey map that highlights the process of using the Thinking Cap product from the start of the capstone to the completion of the capstone. other than highlighting the features offered by the product, I tried to focus on potential pain points and opportunities to refine the product as much as possible before conducting interviews and usability tests. Just like the Orb ponderer project, I also used the same emotes as a way to visualize the user's potential emotion to give a clearer idea of where to prioritize the user experience.

From this user journey map, we concluded that the brainstorming section needs the most improvement because starting a new idea tends to be the hardest part.

Information Architecture

In order to optimize our web application, we conducted card sorting to create the information architecture. We initially found 5 primary tabs which were called: Learning about capstone projects, discover projects, networking, user account, and settings. But after prototyping and conducting user research, we combined user accounts with settings and replaced networking with a bookmark page.

Link to the Information Architecture & interaction architecture:

https://miro.com/app/board/uXjVO2gw7WU=/?share_link_id=403261766613

Interaction Architecture

In addition to the information architecture, we created an interaction architecture to create a user flow for the prototype. I found this activity really insightful since it helped make sure that key features can be easily accessible while making sure that the website navigation easily allows the user to achieve their goals.

sorry about the embed being so weird. The zoomable map feature broke and the chart is too long to view in one piece... so the next best option was to embed the original chart for a more effortless viewing experience.

The Prototype

After researching and learning about the users, we tried making a simple concept webpage design to test how well our information architecture is structured in a usability test. Since the main content is based around education and capstone projects, I tried going for a light green color with high-contrast black-and-white text/ icons to make interactable components easier to view. The overall design was barebones due to time restraints, but at least it showcases the project's key features in a potential use case scenario. If I had 3-7 full days to work on this prototype with more team support, I would've incorporated more responsive elements to make the usability test less linear.

The current design is able to:

Choose search methods between [search, filter, and keywords/tags].
Display cards that include the project title, intro summary, and information icons that include project difficulty, estimated project time length, team size, and budget required.
Display required project resources and recommended skill requirements
Networking with project stakeholders through contact information or social media
Bookmark projects with a sorting feature

Here are the links to the full Figma prototypes that show the design iterations and scrapped designs. The prototype had a total of 2 versions which were created after analyzing the results of the usability test.

Changes that were made in the 2nd prototype version included:

Making the bookmark page more accessible
Removing a redundant networking tab
Replacing the homepage slideshow section with a help box (frequently mistaken as an advertisement banner)
Making page assets more consistent

Link to Figma prototype:

https://www.figma.com/proto/wv1UYt3u6Gt9BjIPcvxA7P/Thinking-Cap?node-id=227%3A99&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=227%3A99

Link to Figma prototype with assets and all design versions:

https://www.figma.com/file/wv1UYt3u6Gt9BjIPcvxA7P/Thinking-Cap?node-id=0%3A1

Click on the screenshots to view my design insight when designing the prototype.

To keep things simple, I tried to make the homepage similar to the google search page. The main features on this page is switching between search method, search bar, tabs, and getting help/ introduction to the website,

This is one of three search method offered called the filter search page. It was inspired by the google job search page which allowed users to filter content with layers of tags. It is best used when users struggle to specify an area of interest but they can easily identify desired project requirements/ details.

This is the keyword/ tags page used to help users who wants auto-fill to complete their initial search idea. It includes a recommended tags section which is a refreshable random tag generator that allows the user to explore ideas that they didn't think about. The recommended tags features was inspired by word clouds because it groups together relevant terms that can be loosely connected.

This is the browsing page where users are directed to after they search for a project idea. The page layout is split into two sections. A left column that allows users to inspect multiple project ideas without having the need to change pages. A right section that displays the full project info including project summary, project overview, project requirements, and networking with stakeholder/ project sponsor. The main design intent of this page is to show as much information as possible without making the content overwhelming or hard to navigate through.

This is a bookmark page where users can sort through saved capstone projects to revisit the page or sort through capstone candidates. Knowing that users won't be deciding on the first project that they see, I tried to make it easy to sort through the project cards by showing various tags to sort by. Some of the design is inspired by the Clip Studio Paint program with their filter feature to organize digital paint brush assets. I found this sorting method extremely useful especially when too many items were saved over long browsing sessions.

For the prototyping section, I was in charge of the entire prototype design. From the layout design, assets used, and small project description details, I ended up creating everything in roughly 5 days (with the exception of 2 incomplete pages that a team member attempted to help with). It wasn't the ideal situation due to finals week, but as the team leader, I couldn't let the team down.

The Usability Study

In the usability study, we wanted to see how users explore the site and whether they find any of the features beneficial. The Usability Study was a 15-20 minute long test session that contains specific user scenario tasks and observation questions. The general layout of the usability test was:

(observation 1) what can they see on the homepage and what actions would they take? what caught their attention?
(task 1) imagine being a student who wants to work on a project related to VR, find how to change the search method & select "recommended search term"
(observation 2) Ask what they currently see, what actions they would take, and what stood out.
(task 2) find and select relevant recommended search terms related to VR
(observation 3) what type of info do they see? what are their first actions?
(task 3) after finding a capstone idea, how do they contact stakeholders?
(task 4) How would they bookmark the capstone project?
(task 5) How would they access the bookmark page?
(observation 4) first impressions of the bookmark page. how would they use it?
Additional final feedback

The Findings

The final result of the study was a high percentage of participants found the prototype easy to use and were satisfied with the way the content was laid out. However, there are still certain parts of the prototype that the participants felt could've improved.

The general areas for improvement are:

having multiple search methods/ pages might be confusing to users
some of the text is a bit too small
difficult searching for specific context because of too much info on one page
removing/ combining certain UI elements to make the pages easier to navigate

If I Continued the Project

If I were to continue to work on this project, I would:

implement student personalization features
incorporate a hub that allows students to access all their project assets/ programs. (google drive, Figma prototypes, files, etc.)
A next step webpage where students can continue their projects beyond academic settings as monetizable "in development" projects
Add/ remove team members.
Remote collaboration features
incorporate file history and credits system to attach who contributed to the project
Make mood boards to improve the UI design
Work on a capstone project timeline feature that recaps the development process of the completed capstone project.

What I learned From this Project

The capstone project is a very unique academic experience that allows students to put all their effort into researching, creating, and presenting a project that showcases their skillsets. I found the research to be quite interesting because every major, project scope and individual experience plays a role in shaping the capstone project.

I felt like my personal capstone experience was just overall unfortunate because it was supposed to be a collaborative in-person designing process that was unfortunately restricted to remote options and limited connection between team members. But knowing that several students experienced the same mistakes and experiences I had, I still believe that this product has the potential to improve people's capstone experience even if it's most likely a one-time use tool. At the same time, this project concept can easily be modified for monetizable uses such as contractual project work, project idea generators, and more since capstones are also just projects.

I felt like the overall project was successful, but I just wished social loafing can be resolved especially when there are multiple instances where I had to take all-nighters to take on the work of a 6 person team just to submit assignments before the deadlines.