Skip to content

An interactive prototype of a service that gathers services and information related to starting higher education studies | Created with Figma

Notifications You must be signed in to change notification settings

tuirevii/kontti

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Kontti

A Service that Gathers Services and Information Related to Starting Higher Education Studies | Client: Digital and Population Data Services Agency (DVV)

UI & UX Design | Figma | Interactive Prototype of a Web Service

See the prototype in Figma

If needed, select "Fit to screen" from the settings on the top right of the screen.

Mockups of the Kontti web service

Project's Basis

  • Client: Digital and Population Data Services Agency (Digi- ja väestötietovirasto, DVV)
  • Course: "HTI.310 Methods in Human-Centered Design", Tampere University
  • Team: 3 members

Motivation and Background

  • Starting higher education involves many different stages, services and service providers.
  • Currently, users have to interact with many different services and parties and search for information from various sources.
  • There are no competing services (unless, for example, checklists offered by educational institutions are counted), and everything is currently quite fragmented.

Goals

  • The project's goal was to simplify the administrative process related to starting higher education.
  • The team's goal was to utilize various research methods and develop skills in prototyping.
  • The commissioner’s wish was to gain customer insight.
  • The commissioner gave us free rein; the goal was to forget any constraints and focus on designing the ideal service.

Target Group

  • The target group consists of higher education students who are starting their studies.
  • This includes both students starting their first higher education studies and those who have already completed one or more higher education degrees.
  • Exchange students were excluded from the scope of the project.
  • The backgrounds and life situations of students in the target group are very individual.
  • The ages and life situations (e.g., family, housing, and employment status) of students can vary significantly.
  • There are also differences in the users' needs and stages in the process.
    • For example, life situation affects what types of support a student may be eligible for.

My Role

  • Designed wireframes with other team members
  • Designed nearly the whole interactive prototype
  • Created the user personas
  • Recruited participants for the interviews
  • Took part in the interviews as a moderator or observer
  • Helped in preparing the questions and script for the user study and evaluation
  • Created the questionnaire
  • Assisted in creating the design brief (PDF)

Mapping the Current State

A preliminary service journey map and interaction diagram were created to get as clear an overall view as possible and to gather supporting materials for user research.

Service Blueprints

Preliminary service blueprints (for a person who doesn't have any prior experience of higher education and for a person who does have) and interaction diagram were created to capture the current state of the process, providing a comprehensive overview and supporting materials for user research.

No Previous Higher Education Studies

Service blueprint when the person doesn't have any no previous higher education studies.

Has Previous Higher Education Studies

Service blueprint when the person has previous higher education studies.

Interaction Flow Diagram

Interaction flow diagram.

User Study

  • Information was collected from students and educational institutions to better understand, for example, the pain points students experience.
  • The participants from the student group were those starting their studies in the fall of 2022 or spring of 2023 so that the administrative process would still be fresh in their minds.
  • The educational institutions included were universities of applied sciences and universities from different parts of Finland, in order to get a comprehensive view.
  • Semi-structured interviews and questionnaire for the students, email with some questions to universities of applied sciences and universitys

Data Analysis

  • Interview videos, notes, survey responses, and emails were reviewed.
  • Responses were compiled by question on Mural board and color-coded by respondent type to maintain connections between different answers.
  • The data analysis utilized thematic analysis. This helped consolidate recurring issues and related points that appeared in different stages.
  • It was confirmed that the themes were relevant to the project's goals and objectives.

Main Findings

Information Access & Uncertainty

  • Insufficient access to information creates feelings of uncertainty.
  • Some needed help, for example, with applying for financial aid.
  • Some were worried whether all mandatory payments were made and what consequences might arise from missing a payment.

Clarity & Visuals

  • Some current websites are considered confusing and difficult to navigate.
  • The appearance of the website affects the user experience: an outdated design may make the service seem cumbersome and non-functional.

Ease & Efficiency

  • The process involves a large number of different organizations and services.
  • The interviewees hoped that some functions/services could be combined to make the process easier and more straightforward.

Individual Needs

  • There are many different types of applicants and needs.
    • For example, the YTHS fee seems unnecessary for students who have access to occupational health services.

General Findings

  • The majority of respondents handle such matters mostly on a computer, but the service should also be available via mobile.
  • Information about the administrative process is gathered in various ways, such as by searching the internet, checking various school checklists, consulting tutors, using the institution's intranet, or asking parents.

User Personas

I created these user personas based on the findings from the user study. NOTE: We also updated the service journey maps, and the journeys were supplemented with users’ feelings and experiences.

User personas.

Ideation & Sketches and Wireframes

  • Ideation and idea evaluation aimed at finding functional ideas and different solution proposals regarding the service's appearance and functionality.
  • Sketches and wireframes of the service structure, layout, and elements.

Goals for the Design/UX

Efficiency

  • Improved by reducing login and authentication steps and integrating services under one platform.

Learnability

  • Focus on learnability during the first use, as some users may go through the process only once.
  • The goal was to minimize user need for support or contact with different organizations involved in the process.

Findability

  • Interviewees highlighted issues with information search and navigation.
  • Addressed by clearly naming sections and ensuring links are easily visible and identifiable as links.

Accessibility

  • Ensures as many users as possible can use the service independently.
  • Considered in choices like colors and font sizes.

Due to the nature of the topic, reliability and data security were also critical.

Vision

A service that gathers together the services and information related to starting higher education studies.

Information Access and Reduce of Uncertainty

  • Reduces uncertainty by providing information about the administrative process and its various stages.
  • Shows which stages of the process are mandatory.
  • Indicates the status of the process stages (e.g., not started, in progress, completed).
  • Highlights if a stage has failed or is awaiting user action.
  • Offers answers to frequently asked questions.
  • Provides personalized guidance (via chat and messaging options).

Ease and Efficiency

  • Consolidates services and information onto a single website.
  • Reduces the number of login and authentication actions required.

Clarity and Visual Appeal

  • Clear and user-friendly interface.
  • Works on both computers and smartphones.

Consideration of Individual Needs

  • Takes into account the individual needs of applicants by providing them with relevant information and showing only the stages pertinent to them.

Wireframes

Each team member created wireframes of the main views. After that we discussed together about our design, and their pros and cons. We took the best ideas and transformed them to an interactive prototype. Below you can see my wireframes, and the rest can be seen in the appendices of our design brief (PDF).

Homepage

Aloitussivu

Accepting of the Study Place

Opiskelupaikan vastaanotto

Payments

Maksut

Benefits

Tuet

Student Card

Opiskelijakortti

Moving

Muutto

Summary

Yhteenveto

FAQ

UKK - v2

Prototype

  • Designed in Figma for desktop (1920 x 1080 px)
  • The design aimed to be simple, as the interviewees requested clarity
  • The color scheme is blue and white, with green as an accent color
    • Blue is perceived as reliable
    • Green is associated with stability and calmness, and also refers to completion/done
    • The color choices consider sufficient contrast
  • Accessibility has also been considered in the font size
  • Design choices are justified and explained in more detail in the design brief (PDF)

See the prototype in Figma

Fit the design to the screen, if needed: Options -> Fit width

Homepage (not logged in)

Main view - not logged in - 1920 px

FAQ (not logged in)

UKK - not logged in

Identification

Tunnistautuminen - 1920 px(1)

Main Page (logged in)

Main view - logged in - 1920 px

Accordions (used inside the main page)

Accepting the Study Place

Paikan vastaanotto

Degree Copies

Todistuskopiot

Payments

Maksut

Benefits

Tuet

Student card

Opiskelijakortti(1)

Apartment Search

Asunnon haku

FAQ (logged in)

UKK - logged in

Prototype Evaluation

  • Prototype presentation to a student from the target group (1 person) and collecting feedback verbally
  • The student also participated in the interview during the research phase
  • Due to the timeline and the prototype's incomplete status, formal usability testing was not conducted
  • Based on the feedback, small adjustments were made to the prototype
    • For example, improving the readability of the homepage and standardizing buttons
    • The remaining suggestions were incorporated into further development proposals
  • Overall, the prototype received a quite positive response

Notes and Development Ideas

General

  • It would be beneficial to investigate the different stages of the administrative process even more thoroughly, as many factors often influence the progression of the process (e.g., higher education institution, student organization, student housing foundation, the student's personal life situation, etc.).

Usability Testing and Iteration

  • Due to time constraints and the reduced size of the team, usability tests could not be conducted, making it difficult to assess the service's usability and the achievement of goals comprehensively.
  • A more in-depth evaluation of the prototype, for example through usability tests, as well as additional iterations, would have been useful for evaluating and developing the service.

Chat Function

  • The idea was to also implement a chat button in the lower right corner of the prototype, which would allow users to get advice in the form of a chat or send a message to the relevant party.

Confirmation of Important Decisions

  • For important decisions, it would be beneficial to confirm the selections with the user before submitting the information.
    • To achieve this, a pop-up window could be implemented, for example, for accepting the study place and confirming attendance.
    • The pop-up would appear when the button is pressed, ensuring that the user verifies the selections are correct.

Consideration of Individuality in Content

  • The selected study place affects the content displayed. For example, university students will not see content meant for students in universities of applied sciences (UAS).
  • The certificate copy section is only shown to individuals who need to submit certificate copies.
  • Contact information for the student's own institution is provided in communications.

Instructions

  • Possibly additional instructions related to applying for financial aid, as applying for aid was identified as the most challenging part in the user research.
    • For example, when it is possible/appropriate to apply for student financial aid.

Housing Application

  • Finalizing the content of the section
    • This is challenging because the procedures of housing foundations vary.
    • It would require more in-depth research on the topic.
  • Information on whether the housing application has been successfully submitted.
  • Additional details about the apartment before acceptance, e.g., what floor it is located on.

Student Card

  • Different versions of the section's content were created, with the current state and one alternative version. However, the final content and functionality logic were left unfinished.
  • The challenge was determining when the section is complete, as all student cards are generally voluntary but sometimes essential in certain situations (e.g., for access rights).
  • This issue becomes more prominent if the user wants to apply for both a digital and a physical student card.
  • Based on feedback, there is a need for information on when the card will be available for pickup.

Progress Bar

  • Visually representing the progression of the administrative process.
  • This was not implemented at this stage, as not all steps are mandatory for everyone, and the process may proceed in a slightly different order depending on the situation.
  • Possibly a section-specific progress bar for multi-step sections (e.g., student card and housing application).

Mobile Version of the Prototype

  • Due to time constraints and the size of the team, it was not possible to implement a mobile version.
  • However, the design solutions of the prototype considered functionality on mobile devices as well.

More Efficient Utilization of Responses from Educational Institutions

  • The responses from educational institutions also highlighted many issues faced by exchange students.
  • Although this work did not focus on exchange students, the responses from educational institutions can be used to improve the administrative process for exchange students.

About

An interactive prototype of a service that gathers services and information related to starting higher education studies | Created with Figma

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published