University of Florida’s Digital Worlds Institute
Low-Maintenance Alumni Portal
UF’s Digital Worlds Institute is a recognized leader in education for its innovative approach to applying advanced media systems across disciplines. I designed a low-maintenance alumni portal for graduates of all ages to meaningfully connect and share knowledge.
Position
UX Designer
My Role
This is a solo project so I performed all project roles from analyzing research to developing a high fidelity prototype.
Mentor
Nick Busman, Senior UX Designer
at Home Depot
Date
December 2022-February 2023
Methods & Tools
Research Analysis
Competitive Analysis
Card Sorting
Usability Testing
Information Architure
Affinity Mapping
Figma
Table of Contents
Challenge & Solution | Process | Discovery & Opportunity | Ideation | Testing Round 1
Solutions & Information Architecture | Testing Round 2 | Final Design | Delivery | Reflection
Challenge
Digital Worlds Institute of the University of Florida wants to develop a way for alumni of all ages to gather and meaningfully engage. Digital Worlds Institute provided UX research insights to aid the development of a high-fidelity prototype they want delivered in three months.
Solution
Digital Worlds Institute’s Alumni Portal provides alumni of all ages with a simple-to-use interface to make meaningful connections and share knowledge
Low-regulation information sharing through external platforms. Efficient ways to access portal, find/post content, and personalize the experience. High priority offerings based on user research.
Clickable Prototype
I really liked the overall look and feel especially with phrases like low maintenance and low regulation. I think that those are things that aren’t always thought of. I believe that it needs to be very usable for not only the audience of alumni but for the school and whoever’s putting the content in there…. I like the way you took advantage of external platforms, existing platforms. Sometimes we all get tired of typing in everything about yourself for the fourth time today so being able to pull that from LinkedIn is a great tool. I also like the code of conduct. I think that’s a great feature to have especially that you required them to put some sort of a digital signature…Overall, I really think the way you put it together with the flows, [how you] organized things, the consistent look and navigation– first rate!
-James Oliverio, Executive Director of Digital Worlds Institute
Process
Double Diamond Design Process
I followed the Double Diamond design process to explore how to design an online space for UF Digital Worlds Institute’s alumni to gather and meaningfully exchange ideas. I started the process by analyzing the research of a previous UX team and conducting a client brief to learn about the design requirements. I then conducted a competitive analysis to further understand how to tackle the problem. Based on the research insights, I brainstormed and designed a variety of solutions to the problem. I conducted usability testing and cog walks to iterate on our designs. At the end of three months, I delivered a high-fidelity prototype, presentation, and developer handoff documentation of our findings.
Discovery
Research Analysis: Alumni want career support, industry experience, and meaningful connection.
To begin, I analyzed UX research conducted by a Harness Projects UX researcher to better understand DW Institute’s primary alumni audience. I discovered that alumni wanted career support, industry experience and meaningful connection. I also discovered specific ways alumni wanted to engage with their alma mater including meetings/social gatherings, community outreach projects, hackathons, mentoring, and guest speaking.
Research by UX Harness Projects Student
Our cohort conducted a stakeholder interview with the Executive Director of Digital Worlds Institute. I translated key insights into actionable design solutions with “How Might We” statements:
Self Organization: How might we develop a centralized, standardized place for alum to gather?
Meaningful Connection: How might we provide ways for alumni to share knowledge rather than focusing mainly on fiscal giving?
Bridge Cohorts: How might we bridge three eras of alumni with different tech abilities?
Communication: How might we create ways for alumni to communicate while avoiding chats?
In addition, I received insight on how the stakeholder wanted to iterate on a design called “EPIC” that the previous UX research team recommended. The stakeholder provided limitations that needed to be considered. For example, although the school wanted to create ways for alumni to communicate they also wanted to avoid having to manage chats. In addition, they didn’t want the system to rely on faculty managing student-alumni projects as class credit—classes are already full and faculty already have a lot they need to manage.
Stakeholder Brief: How might we design a centralized, standardized place for alumni of all ages to gather and share information?
Design Inspiration: Similar platforms already exist
I researched two alumni platforms (Tuft’s University and Syracuse University) and three competitor networking sites (LinkedIn, ADPList, and Meetup). The goal was to find desirable features and brainstorm ways to distinguish the alumni portal from more niche networking sites.
Three key insights emerged:
1. Member Directory & Privacy: Syracuse University provides a personalized alumni directory and private messaging system for alumni to connect. Members can adjust a number of filters for more precision when searching for members. The messaging system requires members to populate a form that is sent to a member’s email. The recipient’s email address remains private until they choose to respond via email.
2. Efficient Log-in & Personalization: Tuft’s University allows members to log-in and sign-up using their email, LinkedIn account, or Tuft’s SSO. Tuft’s provides a step-by-step process for members to complete a profile that personalizes the experience. Tuft’s also offers an option to import LinkedIn for efficiency.
3. Minimalism & Personal Connection: LinkedIn, ADPList, and Meetup provide search filters for users to specifically find the opportunity they are looking for. Minimalist cards provide key words and information that help members find a job, mentor, group, or event of interest. Since these are niche platforms with a world wide audience, they lacks the personal connection of an alma mater.
Opportunity #1— How might we design a centralized place for alumni to safely gather and share meaningful ideas?
UX Opportunities
Based on the user research analysis and the stakeholder requirements, I needed to design a space that provided meaningful ways for alumni to connect. To do so, I decided to organize the research findings through card sorting test to better understand how to organize the offerings on the website.
I also needed to determine which key flows to concentrate on designing within a three month span. In analyzing the UX research, I determined the high priority flows should provide ways for alumni to share information and communicate with members. To optimize the efficiency of the flows, I developed wireframes and conducted cog walks with UX professionals. I also conducted multiple rounds of usability testing with college graduates.
Opportunity #2— How might we design ways for alumni to communicate while avoiding chats?
The next UX problem I faced was the need to design a way for alumni to communicate while avoiding chats. The competitive analysis and cog walk provided insight into how we could design a low-regulation, low-maintenance system for members to message and share information privately through external communication.
Opportunity #3— How might we design ways for alumni of all ages and technology abilities to engage?
The stakeholder wanted the design to be user friendly for alumni of all ages and technology abilities. I had to incorporate accessible, universal design features that provided users with the support and guidance necessary to complete tasks. I turned to the heuristic evaluation rubric for guidance throughout the process.
Ideation
Design sketches and wireframes for the portal
I designed a low-fidelity wireframe that helped me brainstorm the layout and content of each section as well as the user flows. I explored different styles and solutions for the portal.
Usability Testing Round 1
Evaluate the wireframes
My first round of usability testing helped us identify possible design solutions. I screened and recruited six participants with college degrees.
Usability testing goals:
1. A/B test section layouts and navigation flows
2. Card sort to organize the information
3. Learn about college graduates’ behaviors, especially around how they choose to engage with an alumni platform
Solutions
I used the research insights to design a high-fidelity wireframe in Figma. The design iterations show how my findings influence 6 high-priority design solution.
Key Finding #1—Users are overwhelmed by a lengthly sign up processes
To get users to commit to signing up, it was beneficial to figure out a way to get them into the portal with as few barriers as possible. The competitive analysis provided ways to onboard people time efficiently while still ensuring they adhere to participation guidelines and can add information to personalize the experience.
Solution: Time efficient user sign-up using LinkedIn, email, or student ID and a code of conduct for guidelines
Key Finding #2—Vague and novel terms in the dashboard are confusing
I conducted a card sorting test and featured design mockups of the dashboard to better understand how to organize the UX research insights into recognizable offerings. The research process also influenced the filters I then created within each section of the portal.
Users suggested name changes (ex. ‘job/posting’ rather than ‘collaborations’ or ‘EPIC"‘, ‘mentorship’ rather than ‘knowledge share’).
Users recommended grouping ‘donate’ and ‘volunteer’, ‘speaker’ with ‘events’ and make ‘mentorship’ its own category
Users recommended organizing categories top-down from highest-to-lowest priority. In response, I placed projects/jobs at the top followed by mentorship and member.
Solution—Use familiar terms and hierarchy of interest
The main categories that emerged, starting with the most sought after offering at the top, include: projects/jobs, mentorship, members, events, groups, and giving.
Key Finding #3—Too much information and variety of layout is confusing
The portal had to be user friendly for alumni of all ages and technology abilities. I turned to the heuristic evaluation rubric to design a more universal, accessible design.
Design #1 prioritized a step-by-step approach
Design #2 prioritized a one-page layout with a horizontal and vertical navigation menus for users to choose their own steps
Design #3 prioritized a dropdown menu in the dashboard for users to preview what type of content is available in the section.
User Testing Feedback
1. Users liked knowing what each section offered based on familiar words in the dashboard
2. Users liked the post/find navigation bar and suggested making it horizontal at the top of the section
3. Users liked the step-by-step process that made tasks bite-sized and manageable
Solution—Consistent layout in each section of the portal with step-by-step processes
The user insights led to a merge of the three designs. The final design was applied to majority of the sections in the portal in order to meet the heuristic evaluation standards of consistency and recognition rather than recall. The consistent, recognizable layout helps alleviate the cognitive load for users.
Key Finding #4—Too much information on cards is overwhelming, too little is confusing
When designing the information cards, I found users did not prefer when cards were too information heavy because it made the card feel cluttered and overwhelming. I also had to be mindful of content placement, especially the various lengths of information being shared such as names, titles, and locations.
Solution—Minimalist card with key words, symbols and specific user actions
The final card design provided more context about the user’s call to action, focused on keywords and symbols, and provided adequate space for information to fit.
Key Finding #5—Profile completion processes feel redundant
Users feel like they fill out the same information over and over again on different platforms. One user stated, “I have to do this again? Why can’t I just import the information?” Users also wondered why they should engage on an alumni platform since they can connect with people on other networking sites.
Solution—Import general information and add portal specific info through a step-by-step process after onboarding
To make the profile completion more efficient, I pivoted from a lengthly form and designed a step-by-step process for users to import information from networking sites such as LinkedIn. The process also allows users to share specific reasons for engaging on the portal (ex. to be a mentor) as well as communities they were involved in as students (shared experiences foster connection).
Key Finding #6—Monitoring communication can be challenging for the university
The next UX problem I faced was the need to design a way for alumni to communicate and share knowledge while avoiding chats that the university would have to manage.
Solution—External communication systems
Conducting a cog walk led to the suggestion of design that allows users to share opportunities via external links for a low-regulation, low-maintenance experience. A competitive analysis of other alumni messaging systems provided examples of ways to provide a direct messaging system via email (or other networking platforms like LinkedIn) while maintaining user privacy until recipients choose to engage
Information Architecture
Throughout the design process I developed iterations of the information architecture to better visualize the user’s journey. The final information architecture design represents four main flows:
User’s log-in/sign-up
Profile completion
Posting a project/job
Messaging a member
Usability Testing Round 2
I screened users and conducted a round of usability testing on 5 users via UsabilityHub. The test provided insights into the ease of use and time efficiency of the flows as well as our user’s card design preferences.
Task Completion
Results show our pathways are running smoothly and meeting the efficiency standards of users
Design
100% of users preferred design A over B
Design A does not include the Meetup logo in the button. Therefore, the design’s call to action deemphasizes where the user will go (ex. Go to Meetup) and emphasizes the user’s action (ex. Go to group)
Final Design
At the end of the three month project, I delivered a high-fidelity prototype to the client. In summary, the portal features a way for members to register/log-in, meaningfully connect on topics of interest, send direct messages and share information through external platforms. Check out the two sample videos to see the prototype in action.
Efficient registration
Share URL of external platform
External Communication
Send messages through external platforms such as email
Efficient sign-up with LinkedIn and code of conduct for alumni to gather in a centralized, safe space
Organized Offerings
Organized offerings on dashboard and filters to personalize search
Delivery
The project concluded with a presentation of the design solution and developer handoff documentation.
Reflection
Designing the alumni platform allowed me to learn more about how to develop a useful and desirable high-fidelity prototype more efficiently.
Refined Figma Skills: One lesson I learned was how to use master components and variants to reduce tedious and time consuming tasks.
Feedback Cycles: Another lesson was the importance of feedback cycles during the iteration process. There are many little details to consider when developing a website from scratch. Receiving frequent feedback from users and experts during the early stages of development helped alleviate pain points.
Future Usability Testing: As for future iterations, it may be valuable to conduct usability testing on direct UF Digital Worlds Institute alumni for further insights into the functionality and usefulness of the portal. The usability testing we conducted was with users who identify as alumni but are not alumni who will be using this product.