CFERocket.png

Center for Entrepreneurship
University of Michigan

The Client

For the final capstone of the UX program at the University of Michigan, I, along with three other students, worked with a department of the university, The Center for Entrepreneurship, to help tackle the problems the organization faced in designing a website for their various user types.  

  • The original creators of the website worried about the usability and information architecture of their website

  • The Center for Entrepreneurship wanted its programs and resources to be easily discoverable

  • The organization needed data-backed results in order to implement our designs

This was the starting point for our two semester-long capstone. Throughout the project, I was able to draw upon my existing knowledge of user experience design and research and provide strong leadership as the group's project manager.

User Research

Who are the Users?

Students

student_blue.png

Faculty

faculty_blue.png

Partners

partner_blue.png

Surveys

We wanted to gather feedback from the existing users about how they are using the website, their struggles, and their successes. We set up an online survey and asked them fill it out. The survey consisted of ten questions​ and yielded 1,803 responses. ​

Results:

  • We received feedback from all three user groups

  • Most users are "Almost Always" able to find what they are looking for

  • Most users find the website "Fairly easy to navigate"

Takeaways:​

  • While users do not think the website is difficult to use, they do not discover new resources organically on the website. 

Personas

Persona_guy_edited.jpg

Basic Info:

  • 19 years old

  • From Des Moines, IA

  • Engineering Major

Luke

Goals:

  • Wants to gain an Enrepreneurial mindset

  • Wants to apply to an international program

  • Needs to find Entrepreneurship classes to take abroad

Motivations:

  • Would like to start a tech business in the future

  • Believes that exploring different cultures will improve his people skills

Based on our survey and information from the client, we created three personas. We decided to build personas because of the wide variety of users and their diverse goals. For the personas we included basic information, goals, motivations, and painpoints. These personas gave us a reference point for what people use the website for and what needs to be improved on the site. 

Painpoints:

  • Would like to start a tech business in the future

  • Believes that exploring different cultures will improve his people skills

Persona_girl_edited.jpg

Basic Info:

  • 20 years old

  • From Detroit, MI

  • LSA Major

Rebecca

Goals:

  • Unsure if she wants to pursue the Entrepreneurship minor or just take a few classes

  • Wants to learn more about the minor's requirements

Motivations:

  • Interested in Business classes but is unable to take classes through Ross School of Business

  • Believes that taking Entrepreneurship classes will take her fashion brand to the next level

Painpoints:

  • Gets impatient quickly

  • Finding classes that fit her needs can be complicated

  • Many program requirements are not well defined

Card Sorting

We used Card Sorting sessions to understand what forms of information architecture are most intuitive to users. During our heuristic evaluation, we found that many headings had repeating subheadings potentially causing confusion to users. Due to this, we used an open card sorting format to see how participants think the site should be organized and what categories they expect to see.

Results:

Screen%20Shot%202020-09-30%20at%202.02_e

Takeaways:

  • Users expect to see the headings Opportunities/Events, Student Resources, External Partners, and About Us.

  • We propose simplifying the categories found on the website by reducing the amount of duplicated subheadings and using titles suggested by card sorting participants.

Design

Process

Screen Shot 2021-06-09 at 3.06.20 PM.png

Sketches

We started the design process with sketches. This is the way I iterate through many design ideas and options quickly. The sketches gave us a better idea of how to present the information in more intuitive ways. From the sketches, we decided to proceed with organizing the categories with drop-down menus. 

Screen Shot 2020-09-30 at 5.33.27 PM.png

Wireframes

Screen Shot 2020-09-30 at 5.38.46 PM.png
Screen Shot 2020-09-30 at 5.34.50 PM.png

We turned our sketches into wireframes to see the layout on a computer. These wireframes made it easier to visualize our design ideas and make adjustments accordingly. We focused on the desktop version of the website because that is how most users access the site. The wireframes were made using Figma.

Prototypes

Screen Shot 2020-09-30 at 6.04.15 PM.png
Screen Shot 2020-09-30 at 6.19.27 PM.png

The prototypes are similar to the wireframes but brings the design closer to how it would look on the finished site.

  • We included a "Get Involved" tab in the header instead of having it as a section for each user group (students, faculty/researchers, and partners). This feature is also to promote involvement with the Center. 

  • We found that the users understood that the boxes were clickable in this iteration and they want the dropdowns to appear when hovering over the navigation tab.

  • Users were able to return to the landing page by clicking the CFE logo in the top left easily and did not have any struggles with other navigation features.

Final Design

Home Screen:

 

The original design had an image as the home page with the information below. Many users found this confusing and were unaware that the home page had content besides a picture. The home page was updated to welcome users to the website and signal to the user that there is information on the page.

Drop-Down Menu:

 

During testing, users became frustrated because they did not know what information each tab contained. Dropdown menus were added to reduce this confusion.

Screen Shot 2020-09-30 at 7.23.52 PM.png

Get Involved Page:

 

Users could not tell who could get involved in each of the resources offered by the Center for Entrepreneurship. This made finding resources difficult. We created a Get Involved page that includes a filter function to allow users to find the appropriate resources.

Validation

A/B tests were conducted with the newly designed website and the original website (to minimize differences in look and functionality, the original CFE site was replicated in Figma). The tasks for each group were identical.  We recorded the number of clicks used and time spent. After each task, the users rated the difficulty of the task on a scale of 1-10 to gauge their perception of the usability. 

Group A:
Original Website

Screen Shot 2020-09-30 at 9.06.02 PM.png

Group B:
Redesigned Website

Screen Shot 2020-09-30 at 9.06.26 PM.png

Results

Decrease Time Spent

Decrease Clicks Used

Decrease Perceived Usability

Screen Shot 2020-09-30 at 9.50.36 PM.png

63%

65%

37%