« Back to Projects

MBA School Guide and Matching Site

UpTop

Summary

I conducted competitive analyses, constructed the information architecture, created the overall interaction design, and contributed to visual design for a business school information and comparison site.

The client needed a website that would allow prospective MBA students to learn about business school, then find the right school for them based on qualities that are important to them. They came to our team with compiled research results, a series of use cases, and a description of their plan for the site. Through a UX design process, I helped them re-envision the full site and design the overall experience.

A high-fidelity visual mock-up of the home screen with final visual design style.

Problem

The client, whose name is excluded for confidentiality, conducted and commissioned user research around what information prospective business school students are looking for and how they search for schools. The client had an existing website with a large database of business schools' information, but the experience of finding a suitable match was poor.

My team was provided with a functional specification document written by the client, which outlined the goals and proposed design for the site. The design challenge was to create a better experience for finding matching schools and learning about MBA programs in general.

Process

After meeting with the project's stakeholders and discussing goals and requirements, I conducted a competitive analysis of sites that were attempting to solve the same challenges, especially providing a custom set of results based on a set of non-boolean criteria. Through the competitive analysis, I identified solutions that were effective and that failed so that I could recognize trends to follow and avoid in my designs.

A screenshot from a competitive analysis presentation, highlighting findings from a school selection tool.
A screenshot from a competitive analysis presentation, highlighting findings from a business school guide.

Though a proposed information architecture was briefly outlined by the stakeholders, a review of the site's goals, wireframe explorations, and the competitive analysis revealed opportunities for improving the overall site IA. Because the interconnectedness, groupings, and levels were difficult to communicate verbally, I created an IA diagram to propose a new structure, which the clients accepted.

The final information architecture/site structure map, grouped by section and showing connections between sections.

I worked on both the IA and wireframes simultaneously, as each informed the other's design. To construct the wireframes, I identified the pieces of content that were needed on each page, the goals of each page, and the path forward based on the users' tasks.

One particularly challenging set of wireframes was the "Select" experience, in which users specified a level of importance for several factors about business schools. The experience needed a design that let the user participate in a "dialog" with the site -- entering criteria, viewing results, refining criteria, and so on. I created an experience that let the users enter criteria on their own or be guided through the process with a wizard experience.

A wireframe mock-up of the home page showing the three main sections of the site, promo content, other featured content, and more.

A wireframe mock-up of the MBA guide section of the site, including accompanying functional notes from design documentation.
A wireframe mock-up of the search results that a user sees when searching for a school or university name.
A wireframe mock-up of the school matching feature, in which users prioritize several qualities about a school and see a list of schools that best match their preferences.
A wireframe mock-up of the expanded results when a user searches for schools by preferred qualities.
A wireframe mock-up of a wizard experience for when users want more guidance on how to prioritize school qualities.
A wireframe mock-up of a single school's "microsite" page, highlighting information about the school and its degrees.

In creating the wireframes, I went through multiple rounds of revisions to hone in on the ideal experience after soliciting feedback from the stakeholders.

Once the wireframes were locked down, I worked with other members of my team to explore different visual design directions. Three members each came up with a different visual style (intended to meet certain style goals) for the homepage. Together, we compared the results and talked about what worked and what didn't, eventually assembling a single visual style, which was applied to the rest of the pages.

Visual design explorations to hone in on a single visual style.

Results

Once the overall visual style began to solidify, the project was handed off to a visual designer on the team who refined the style and created high-fidelity mock-ups of the site's pages.

A high-fidelity visual mock-up of the home screen with final visual design style.

Ultimately, we delivered the set of wireframes with functional notes, high-fidelity visual designs, and a specification document describing fonts, sizes, etc.

« Next: Facebook Roles

Previous: Fulcrum CATS Mobility Refresh »