Social

KTH - Social

Evaluating, Designing a Portal for Student Teacher Interactions at KTH Royal Institute of Technology.

Evaluating, Designing a Portal for Student Teacher Interactions at KTH Royal Institute of Technology.

/01

The Problem

KTH Social is the tool used by probably all students and faculty members at KTH to share course resources and information, timetable, discussions, check emails and plenty of other stuff. The problem is the complexity of the product, which makes the students and faculty members not use half of such features and switch to other tools like Canvas and Bilda.

KTH Social is the tool used by probably all students and faculty members at KTH to share course resources and information, time-table, discussions, check emails and plenty of other stuff. The problem is the complexity of the product, which makes the students and faculty members not use half of such features and switch to other tools like Canvas and Bilda.

/02

User Interviews and Personas

Even before we touch paper and pen, we went out to figure out the real problem and understand our users. We interviewed three students one out of which was a native Swedish student and one professor. Our interviews suggested:

  1. There is an information overload on the course pages, and they are not very well organized to navigate.
  2. An inconsistent language use throughout the interface. The juggle between Swedish and English is too often.
  3. Social is not really “social”.
  4. Although Social allows users to upload files and share, students use Google Drive or Dropbox because of better UX.
     

Based on these interviews and findings, we drew our user personas and based our designs to satisfy their requirements.

Even before we touch paper and pen, we went out to figure out the real problem and understand our users. We interviewed three students one out of which was a native Swedish student and one professor. Our interviews suggested:

  1. There is an information overload on the course pages, and they are not very well organized to navigate.
  2. An inconsistent language used throughout the interface. The juggle between Swedish and English is too often.
  3. Social is not really “social”
  4. Although Social allows users to upload files and share, students use Google Drive or Dropbox because of better UX.
     

Based on these interviews and findings, we drew our user personas and based our designs to satisfy their requirements.

mario

Tobias is a 45 year old, Associate Professor at Media Technology department at KTH Royal Institute of Technology. He has been actively involved in academia since over 10 years out of which approximately 6 years were at KTH. He is fluent in both Swedish and English, but prefers Swedish as his first language.

Currently, he teaches Interaction Design and Media Management to masters students while mentoring 4 PhD students alongside. Tobias uses KTH Social daily primarily to organise his schedule, update his courses, send out messages and evaluate his student submissions. During his time at KTH, he has seen the transitions between Bilda, Social and Canvas.

Tobias is a 45 year old, Associate Professor at Media Technology department at KTH Royal Institute of Technology. He has been actively involved in academia since over 10 years out of which approximately 6 years were at KTH. He is fluent in both Swedish and English, but prefers Swedish as his first language.

Currently, he teaches Interaction Design and Media Management to masters students while mentoring 4 PhD students alongside. Tobias uses KTH Social daily primarily to organise his schedule, update his courses, send out messages and evaluate his student submissions. During his time at KTH, he has seen the transitions between Bilda, Social and Canvas.

nilay

Alba is a 24 year old, Civil Engineering student from Spain. She has been studying at KTH since the past 6 months. She is fluent in English and Spanish but prefers Spanish as her first language.

She uses KTH Social on a daily basis to check notifications, updates and assignments related to her courses after always translating the page to English. She is also using Social to decide her future courses and tracks for the second term. She has only used Social and never used Bilda as a CMS.

Alba is a 24-year-old, Civil Engineering student from Spain. She has been studying at KTH for the past 6 months. She is fluent in English and Spanish but prefers Spanish as her first language.

She uses KTH Social on a daily basis to check notifications, updates, and assignments related to her courses after always translating the page to English. She is also using Social to decide her future courses and tracks for the second term. She has only used Social and never used Bilda as a CMS.

dani

Filip is a 25 year old, Media Management student from Sweden. He has been studying at KTH since past one and a half years. He is fluent in Swedish and English, but prefers Swedish as his first language.

Filip uses KTH Social on a daily basis primarily to check his notifications about the updates and the assignments due for his courses. He also uses Social to figure out general course information, submit assignments and to check his daily schedule. He has mostly been using Social and Canvas as a CMS and not Bilda, as most of his courses are currently transitioning to Canvas from Social.

Filip is a 25-year-old, Media Management student from Sweden. He has been studying at KTH for past one and a half years. He is fluent in Swedish and English but prefers Swedish as his first language.

Filip uses KTH Social on a daily basis primarily to check his notifications about the updates and the assignments due for his courses. He also uses Social to figure out general course information, submit assignments and to check his daily schedule. He has mostly been using Social and Canvas as a CMS and not Bilda, as most of his courses are currently transitioning to Canvas from Social.

/03

Initial Wireframes

screens-social

The team was comfortable using Balsamiq to create the initial wireframes and use Invision on top of that to test it on the audience and gather feedback.

The team was comfortable using Balsamiq to create the initial wireframes and use Invision on top of that to test it on the audience and gather feedback.

/04

The New Sidebar, clutter free topbar, a dedicated feed and consistent language to fix user problems.

/04

The New Sidebar, clutter free topbar, a dedicated feed and consistent language to fix user problems.

/04

The New Sidebar, clutter free topbar, a dedicated feed and consistent language to fix user problems.

/04

The New Sidebar, clutter free topbar, a dedicated feed and consistent language to fix user problems.

In terms of UX changes, we removed the top navigation and used the left sidebar for all the entire website navigation. The top-bar was completely reserved for notifications since everyone around us is used to the Facebook style notification system. We pulled out the hidden features like email and kept it visible on the top bar to enhance its visibility since its one of the most used features alongside notifications.

We added a more socially engaging design for the feed because of the initial feedback we got from the students and the faculty with a strong focus on using the platform itself for uploading and sharing documents. This allows the user to not rely on third-party document sharing applications like Dropbox or Google Drive.

 We also focused having a similar language schema to enhance the experience. For example, social uses "Send files", "Submit files", "Submit", "Complete Assignment" for the exact same purpose making it inconsistent across different courses.

In terms of UX changes, we removed the top navigation and used the left sidebar for all the entire website navigation. The top-bar was completely reserved for notifications since everyone around us is used to the Facebook style notification system. We pulled out the hidden features like email and kept it visible on the top bar to enhance its visibility since its one of the most used features alongside notifications.

We added a more socially engaging design for the feed because of the initial feedback we got from the students and the faculty with a strong focus on using the platform itself for uploading and sharing documents. This allows the user to not rely on third-party document sharing applications like Dropbox or Google Drive.

 We also focused having a similar language schema to enhance the experience. For example, social uses "Send files", "Submit files", "Submit", "Complete Assignment" for the exact same purpose making it inconsistent across different courses.

In terms of UX changes, we removed the top navigation and used the left sidebar for all the entire website navigation. The top-bar was completely reserved for notifications since everyone around us is used to the Facebook style notification system. We pulled out the hidden features like email and kept it visible on the top bar to enhance its visibility since its one of the most used features alongside notifications.

We added a more socially engaging design for the feed because of the initial feedback we got from the students and the faculty with a strong focus on using the platform itself for uploading and sharing documents. This allows the user to not rely on third-party document sharing applications like Dropbox or Google Drive.

 We also focused having a similar language schema to enhance the experience. For example, social uses "Send files", "Submit files", "Submit", "Complete Assignment" for the exact same purpose making it inconsistent across different courses.

/05

The Grid System

Grid System

While converting the above screens to high fidelity, we used a full 12 column grid system so that the designs are consistent and the product could later be easily made responsive, if needed.

While converting the above screens to high fidelity, we used a full 12 column grid system so that the designs are consistent and the product could later be easily made responsive, if needed.

/06

The Color Palette

Social-Pelette-2

KTH Social is already an extremely complex tool because of the amount features it has, so we decided to keep a very minimalistic and neutral color palette to make it feel easy and welcoming.

KTH Social is already an extremely complex tool because of the amount features it has, so we decided to keep a very minimalistic and neutral color palette to make it feel easy and welcoming.

/07

Final Visual Design

homepage

Home Screen with a full calendar view on the right, ongoing courses and notification style feed.

Home Screen with a full calendar view on the right, ongoing courses and notification style feed.

schedule-calendar

A full calendar to create and view lecture details without going to the dedicated course pages.

A full calendar to create and view lecture details without going to the dedicated course pages.

MyProfile

A dedictated profile page for Alba, she can upload her portfolio and CV here and share it with pride.

A dedicated profile page for Alba, she can upload her portfolio and CV here and share it with pride.

/08

Learning

Interviewing the users was an integral part of the course and was also responsible for the majority of the decisions we took. We practiced the philosophy of empowering the users and didn't base our decisions on cool visual elements but reasoning instead.

In terms of visual design, I learned it always is good to start with a grid system and a base file for colors and icons beforehand rather than find them on the go. It made collaboration much easier.

Interviewing the users was an integral part of the course and was also responsible for the majority of the decisions we took. We practiced the philosophy of empowering the users and didn't base our decisions on cool visual elements but reasoning instead.

In terms of visual design, I learned it always is good to start with a grid system and a base file for colors and icons beforehand rather than find them on the go. It made collaboration much easier.

/09

Team

We were a team of four people with everyone playing an equally important role. We were Alexander Johansson, Ela Yudhanira, Raghu Nayyar, Sebastian Persson.

We were a team of four people with everyone playing an equally important role. We were Alexander Johansson, Ela Yudhanira, Raghu Nayyar, Sebastian Persson.

Like what you see?

Like what you see?

logo-cold-brew

Copyright 2018 - Raghu Nayyar

Please dont steal my stuff, eat a cookie instead.