The Hub University Services

Web Design
Overview

Providing a unified platform of both physical and digital touchpoints to help Freshmen, First Generation, and Transfer students manage the stressful transition to college campuses. This is similar to Texas State University.

The Problem

Students face several challenges when transferring to a new university and accessing the decentralized resources provided by the university of their choice.

The Goal

Provide educational services via one platform so that students can manage stress by providing guidance through the university process that is currently disparate.

My Role

Research lead

Responsibilities

User research, interviews, wireframing, user testing & UX/UI interface

Team

Melissa Guevara – Project manager & UX lead Lyndsey Arthur – Branding lead

Design Process

We chose this research method because it allows us to empathize, connect with the user, and fully understand their need.

Design process steps: empathize, define, design, prototype, and test.

Primary Research

We surveyed Texas State University students to find out their pain points and how we could fill in the gaps.

Secondary Research

We collected some online data from articles, websites, and university statistics.

Secondary research information with percentages. Secondary research: tackling transfer issues.

Interviews

In order to uncover pain points and learn more about certain educational processes, interviews were conducted with university staff.

Click images to view larger

Personas

We surveyed Texas State University students to find out what pain points they face and how we could fill in the gaps.

Brainstorming

We went ahead and opened up the exploration space for brainstorming possible solutions.

How might we's
How might we sticky note one.How might we sticky note two.How might we sticky note three.How might we sticky note four.
possible solutions
Possible sticky note one.Possible sticky note two.Possible sticky note three.Possible sticky note four.

Solution Chart

The chart showcases what each of the major solutions will provide to solve the unmet needs of the users.

Click image to view larger
Solution chart of design benefits.

Paper Wireframes

It was important for us to think about what would be most important to students when creating the main pages.

Digital Wireframes

The wireframes showcase how we could organize the informational resources based on the student’s background and their needs.

Low-Fidelity Prototype

Our objective was to understand what users thought of the content and how they interacted with the prototype.

Usability Study: Findings

We conducted user tests with students and people not enrolled in educational institutions to determine their thoughts and feelings about the prototype.

round 1 findings

To uncover any other improvements, users were asked to walk through the content flow of our prototype.

Teal circle with number one inside.

Student background tool:
In addition, the user wanted to see their background results on the walkthrough page from the Home page.

Teal circle with number two inside.

Add a “Not sure button”:
Due to a lack of knowledge about their background, some users had difficulty selecting background options.

Teal circle with number three inside.

Content Guide:
Users would be able to navigate faster to the relevant sections with an in-page link guide.

round 2 findings

Users were asked to test our posting function and give any feedback that would help improve the application.

Teal circle with number one inside.

Checkmark notification:
Despite the sections being arranged in order, the user wants confirmation that the step has been completed.

Teal circle with number two inside.

Map Interaction:
Upon clicking submit, the user believed no action had been taken, so he wanted to view the map section faster.

Teal circle with number three inside.

Are you a new student question:
Having the question listed in the appointment form confused the user when it should be located under the freshman and first-generation tabs.

Mockups

Home Page
Student background tool
Walkthrough Screens
Map Page
Web screens of map page on iMac computer.
iPad Kiosk
Physical Space
Physical space of office container.

High-Fidelity Prototypes

Key Takeaways

Impact

Information and resources needed for the transfer or start at a new university can be found on the website for current and future students.

What I learned

Research and observation of others navigating other educational websites revealed their biggest frustration was having to go from page to page to find the right information and resources.

With more time and resources

Next step

To design educational guides that inform current and future students of what to consider when pursuing their education at any institution.

Next step

To do a mobile version of the website since people nowadays mostly have phones rather than desktops.

Other Case Studies