how to create a website for free

Intranet Design / Minerva

Timeline: May - June, 2016
Role: Intranet designer and project owner
Function: UX/UI Design, project management
Tools: Pen&paper, Workflowy, Adobe Illustrator

​Minerva Schools at KGI is a new university that leverages technology to integrate interactive learning and global immersion into higher education. Students take classes in an online seminar format and travel together to 7 different cities over the course of 4 years. If you haven't noticed, it's also the school I go to. :)

Where is the information?

"Emails, Facebook, Whatsapp Group, The Hub...Where can I find the information?!!"

The Hub 1.0 was a basic wiki site with plain white background and a sitemap in all caps on the left. Students complained about how difficult it was to navigate through the website and stopped using it. Students were constantly asking for updated information on unofficial communication channel like Facebook and WhatsApp and it was simply very messy and disorganized - impeding the efficiency and creating frustration towards the organization. 

Seeing the palpable frustration in the community the drastic contrast of quality between Minerva.kgi.edu and Student.minerva.kgi.edu(our intranet), I proposed to revamp the website multiple times over the semester and was finally given the approval and the budget to do so in the summer.


WHAT WENT WRONG?

The google analytic results showed that students mostly only used the search bar for information, and it made sense:

1) the content was not grouped in a mutually exclusive way;

2) the categories are not clear as what they entail;

3) the design was very bland and thus not inviting for students to explore. 


GOALS AND NEEDS

The Hub should serve primarily as a centralized communication platform for students and staff. As a crucial channel that students interface with frequently, it is crucial that

1) the information on The Hub is optimized for navigation, readability, and scannability;

2) the design follows the principles of the Minerva Brand and aligns with other products;

3) the site is dynamic and can be easily updated by staff with time-sensitive information.

Information Architecture

​The information architecture of the old site was conveniently based on the structure of the organization. As the organization structure was quickly evolving, such HR categorization became ambiguous to students. I then turned to the traditional universities for inspiration but quickly realized that our unique model (for example, our global rotation model makes what “international students” entails very ambiguous ), was ambiguous to students. Another challenge was posed by the fact that the majority of Minerva students are from outside of the US. Therefore some of the conventional usages of terms in the US college system might not make intuitive sense to the student (for example, Work-study is overseen by the financial aid department). 
Mobirise

User Testing/Card sorting:

Approaching the problem with a human-centered design and being very aware of my potential bias in designing this site as a student, I made sure to use user test the few versions of site maps. I used workflowy to test on different students (while taking classes on information architecture Lynda.com) and validate the proposed designs. 

Card sorting was a decent way to validate the ideas and organization of content. However, it was not precise and cannot be fully relied on because of subjectivity and our international student body. For example, in the US, students naturally understand work study is under the department in charge of financial aid, but at Minerva, where the majority of the student body is from outside the US, this won’t make intuitive sense and will be something that they will need to learn (which is also a potential point to include in onboarding/orientation). 
Mobirise

Production Phase

CONTENT STYLE GUIDE

A scannable and clear website can't only rely on good design for visual hierarchy, but also effective copy, one that was structured and written in a succinct and digestible fashion. Therefore, before going into the full production phase, I made a content style guide for everyone that's involved with creating information on the website to familiarize themselves with. No wall of text will be allowed to paste into the text editor without extra thinking. Everything needs to be either bullet-pointed or have straightforward heading and titles.

WIREFRAME AND DESIGN

The design of the site needs to look and feel like the Active Learning Forum, which is the “virtual classroom” of Minerva students take classes on. On top of that, it should align with the brand of Minerva to add to the credibly of the content. Therefore, the color, layout and typography styles all evolve out of an internal class platform style guide.  

I created mockups of modular pages with an emphasis on typographic hierarchy, with the aim that students will be able to know what page they are on (location), the category of the resources that they are browsing (relationship). Content is chunked for readability and scannability, with important information in a different format to draw attention. 

Mobirise

Time was the primary constraint that we were faced with. The implementation process took a while as the collaboration between different content providers and the design of the site was stagnant due to competing priorities over the summer. We ended up building the site with a rather flexible Wordpress theme that allows easy customizations. I finished building most of the pages with placeholder text during this month-long internship and handed it off with a thorough guide to content auditing and building pages to the next student intern. ​

Result and impact

Mobirise

The Hub 2.0 was up by the start of Fall 2016 semester, the first time that Minerva has two classes, one in Berlin and the other in San Francisco. This was what students needed, so they were very happy that finally there was a place containing all the important information, ranging from what their degree plans should look like, to where is the closest grocery store in the neighborhood they live in Berlin. Staff provided positive feedback on the ease of updating the pages as well. 

One of the major learnings for me was that project management skills cannot be ignored by designers. It's highly important to set expectations with stakeholders and periodically check in with them and reiterate the expectations. It was rewarding for me to practice how to convey the value of thoughtful design that was not necessarily appreciated by everyone.  

Mobirise

Thanks for viewing! 

© Copyright 2018 Qiqi Xu - All Rights Reserved