User Experience, Case Study
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.
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:
- There is an information overload on the course pages, and they are not very well organised to navigate.
- Inconsistent language usage throughout the interface. The juggle between Swedish and English is too often.
- Social is not really “social”
- 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.
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.
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.
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.
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 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 topbar 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 astrong 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.
The Grid System
While converting the above screens to high fidility, 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.
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.
Final Visual Design
Using the grids and the color system made it extremely easy for us to come up with final designs.
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 philiosophy of empowering the users and didn't base our decisions on cool visual elements but reasoning instead.
In terms of visual design, I learnt it always is good to start with a grid system and a base file for colors and icons before hand rather than find them on the go. It made collaboration much easier.
We were a team of four people with everyone playing an equally important role. We were Alexander Johansson, Ela Yudhanira, Raghu Nayyar, Sebastian Persson.