Embedded Files
Revolutionize campus information distribution and elevate student belonging and engagement.
Build a responsive, efficient, and effective information hub endorsed by over 16k users.
Identify Problems - Ineffective Email Bulletin
It all started with curiosity and observation.
Compared to my cohorts, I was active in various stimulating campus events. However, I noticed that for numerous inspiring events, only a few students attended.
As a designer, I was curious about this phenomenon. Asking people around me, I was astonished that they had no idea about the events on campus. I realized that students wouldn't check the school bulletin emails, which could be a potential reason for low participation.
There was a misalignment between students and the crucial channel for the university to deliver information.
The screenshot of the campus bulletin email contains information about campus events and important notices.
Few students attended campus events.
Students ignored the bulletin email.
The information channel was broken.
Over 60% of the students on campus won't check the email bulletin, and here's why.
Mapping the experience of information gathering.
To understand the underlying issues, I started with mapping the experience of gathering information for events from the bulletin emails.
I observed the participants' reactions, analyzed the touchpoints, and identified the pain points.
Find the bulletin email.
With neutral state of mind, and doesn't expect anything.
Scan through the list and find the interesting event (or not).
Irritated because the titles are too long and vague.
Click the link and go to the event's website.
Frustrated because only find flyer slogans.
Scroll further down to find all the logistics information.
"Finally..."
Usability Issues
Hard to scan.
The titles of the events are usually too long, but at the same time, they don't provide sufficient information for students to know about the events.
Not well-organized.
The bulletin email was not designed for the recipients. The information was organized for bureaucratic systems to run with the least effort. The information is not well-organized and often repeated.
Too many steps.
Through the journey mapping, I found that there are too many steps before students can get logistics information. The information is also hard to find on the webpage.
Simplify - The Goal of NTHU InstaNews
"We've got everything you need to know."
To fix the broken information channel, I recruited a team and founded an organization "NTHU InstaNews" which aims to collect all the important information and distribute it efficiently and effectively.
Our goal is to simplify the process of gathering information for students.
Let's fix it.
Information Architecture Design - Gestalt Principles & Ockham's Razor
Remove redundant elements. Create better clarity through concise grouping.
To improve usability, I ideated a new information architecture. We removed redundant captions like "speaker". We added more contrast to different font sizes.
We broke down every information element and tested different grouping effects. Based on the final design, I constructed a visual design systems framework for the organization to ensure brand integrity and consistency.
We eventually found the best way to group information and achieved better usability through multiple iterations.
The final design enables the users to quickly find the information even with 1/3 of the size.
Quicker scan with F-shaped composition and highlighted background.
People are used to scanning with the F-shaped pattern. Based on that psychology principle, users can now scan from top to down, left to right.
In the previous iteration, we found that changing the opacity of the background could further improve the readability of the text. For this design, the title and date had a more solid background color to enhance visual hierarchy. This design facilitated scanning speed as well.
Scan at one glance. Increase scanning speed by 300%.
Backgrounds catch users' attention and strengthen the brand identity.
Since the blurry backgrounds, transparent blocks, and brilliant colors are the signature look of our platform, the redesigned interface kept those features.
Besides the clear visual guide, aesthetics was a crucial aspect of NTHU InstaNews. The new series of backgrounds were carefully made to give people a pleasant feeling through the curvy shapes. The colors are vibrant so that they can catch the users' attention.
Milestones
Gained 1000 users within 2 month.
After launching, we quickly gained students' endorsement. Within the first 2 months, we gained over 1000 users (over 10% of the registered students). During interviews, students said that NTHU InstaNews satisfied their needs to efficiently find events. They also stated that we helped them explore campus events that they never knew existed.
Fostered campus connections and belonging.
With the higher engagement rate among most campus events, students responded they felt more connected to the bigger campus community.
This was an unexpected but very rewarding feedback we got.
NTHU InstaNews was recommended on forums as the "must-have" resource for incoming students.
Our users like...
Distinctive aesthetics.
Our users complimented the graphics through the survey or direct messages. Compared with other fan pages, our distinct look helped our users identify our posts. The aesthetic also made the experience even more pleasant.
Consistent style.
The consistent visual elements, such as blurry backgrounds and semi-transparent blocks, created a high-quality and professional feel for our audience.
The standard template aims for the highest efficiency.
The special content template enables us to use the space freely.
The most trusted and influential campus news media with 16k users.
Designed in 2019.
Google Sites
Report abuse