FBAUL
- Alumni website design

UX/UI Design
  • UX Design

  • UI Design

  • Product Design

  • Website

  • Sketches

  • Wireframes

  • Design System

  • Mockups

  • Prototype

Designing an Alumni community website for the Faculty of Fine Arts of the University of Lisbon.

About the project

University websites can sometimes be overwhelming due to the amount of content and different users they need to address.

For this postgraduate course project, we were asked to rethink and redesign the Faculty of Fine Arts of the University of Lisbon website but with a specific target in mind: alumni

Design process

To better align the team towards a common goal we used the Double Diamond process which led to better communication and efficient iterative phases.

discover

  • primary research
  • contextual analysis
  • secondary research

define

  • personas
  • empathy maps
  • how might we's

develop

  • brainstorm
  • prioritization matrix
  • site map
  • wireframes
  • mockups
  • prototype

test

  • usability tests
  • conclusions and findings

Primary research

We conducted a quick survey to get information on how former students use (or not) the website of their former institutions.

From that survey we talked to a few people in informal interviews to get a more in-depth notion of their activities and needs. Most users visit the website looking for information on courses.

What they look for in the website as former students:

  • information on courses
  • news and events
  • information on documents

What they see as benefits:

  • networking
  • mentoring from older former students
  • job opportunities
  • inspiration and professional update
Website visits Chart

Contextual analysis

Searching for the topic “alumni” on the current website, we get no content dedicated to this particular target, except some news regarding scholarships.

Benchmarking

We checked other universities websites and the strongest examples have a dedicated area for alumni with specific content. Some even have a website that exists outside the main university website.

  • events
  • job offers
  • internships
  • education
  • career advice
  • networking
  • mentoring
  • certificates
  • alumni stories
  • donations

Personas

  • Mariana, 27 years old

    The one switching gears

    I wanted to switch gears in my career so I studied digital design, and now I'm looking for job opportunities to enter this particular field of expertise.

  • António, 48 years old

    The professional who gives back

    I want to be part of a community that connects professionals and serves as a sharing platform.

  • Elisa, 21 years old

    The recent graduate

    I don't feel ready to enter the job market, I believe I need further education and training.

Personas Empathy Maps

Segmentation

We identified three distinct personas and defined empathy maps and specific HMWs for each segment.

Top takeaways

  • Fresh 1st cycle graduates need information on study progression programmes

  • Recent graduates that want to start a career need access to job offers and mentorship

  • Experienced former students want to reconnect with the community by sharing their knowledge

Prioritization matrix

Using the HMWs, we did a brainstorming session in which the objective was to have several ideas.

After clustering similar ideas and discarding others, we used an effort vs. impact matrix to prioritize features.

Some key features are:

  • a community
  • news and events
  • certificates request
  • networking
  • job opportunities
Effort vs impact matrix based on HMWs

Decision making

Our briefing asked for a redesign of the fine arts website, but given how specific our target is, and considering our research, we had to state some aspects:

  • our target - alumni - is very specific and requires specific content which is not the main priority of a faculty website;

  • they are not the main users of a faculty website;

  • at this point, there is no content directed at them in the website.

Concluding, we'd have to create a community and maintain it with relevant content at hand.

Given all the above, we decided to invest our efforts in creating a platform solely dedicated to the alumni community, which could be accessed through the main faculty website.

Information architecture

Simple Sitemap

Functional benchmark

After defining our goals and features for the project, we needed to understand how we could materialize these features. For that we did a functional benchmark.

Wireframes

In the wireframing phase we developed several screens to what could be the alumni portal. This process went through several iterations.

Multiple Wireframes

Design kit

  • Logo
  • Colors
  • Typography
Logo, colors and typography
Assets Components

Prototype

homepage and education page mockups

Usability tests

Our general aim was to find out if/how many users can perform the tasks , in what time frame and if they have any mistakes.

Although we had a 100% rate of task conclusion , the usability tests revealed some interesting findings and thoughts.

I really liked the visual, it's very clean and easy to understand the content. I'd like that the faculty website would be like this.

Catarina

Future developments

  1. Mobile version
  2. Progress visibility on pop-ups (registrations and document requests(
  3. Quick-access submenus (alumni stories, short courses, etc.(
  4. Career tips (jobs and career(
  5. Alumni portfolio examples on courses page

Thank you

The team:

  • Cátia Neto

  • Erika Maessaka

  • Júlia Rouxinol

  • Raul Ramos Pinto

  • Telmo Julião