Embedded Files
Revolutionize campus information distribution and elevate student belonging and engagement.
Build a responsive, efficient, and effective information hub endorsed by over 14k users.
Our Impact - Combated misinformation during COVID-19.
At the beginning of the COVID-19 pandemic, before school opened, I decided to utilize our vast influence and information efficiency to broadcast a series of health notices to protect campus health and safety.
During the pandemic, there was an anxious atmosphere on campus. We thrived to provide the most timely and accurate information to combat misinformation and halted the spread of panic.
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.
Opportunity
Students wanted to engage in campus events.
Through the user journey map, the pain points were apparently usability issues. Changing those pain points into opportunities could be the solution to the problem.
However, after interviewing the participants for further information, I found that students actually wanted to engage in campus events. They simply wanted a better platform to gather information more efficiently.
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.
Why social media? Why Instagram?
Naturally blends into daily routine.
To effectively deliver information to students, we need to understand what channel they use to gather information.
The truth is students check their social media far more often than their emails. Choosing social media as the platform is naturally blending into their daily routine.
More active students on Instagram.
We researched for choosing which social media. Although almost every student had a Facebook account, Instagram had more active users, and the difference was marginal.
Let's fix it.
Design Process - Information Architecture Design
Understand and prioritize the needed information. Test it. Launch it.
We conducted interviews to rank the importance of the information. Based on the insights, I worked with the art editors and produced the template on the right. We ordered the text based on importance, using font size and weight to build visual hierarchy and flow.
Through usability tests, we observed a significant decrease in scanning time. Students also said the appealing visuals made them more willing to check out the events.
The template was not perfect, but we decided to launch the new service and test it out.
Information Architecture Breakdown
The events are the main reason for participation.
Date and time are the foremost logistics info.
The speaker and the location are ranked last.
Scan at one glance. Increase scanning speed by 300%.
Design Decision - Why blurry photos?
Instagram is "image-first". Eye-catching is everything
Instagram is an "image-first" social media platform. To capture the attention of our target audience, we must use photos. However, we also wanted to enable students to scan the event information at a glance without going to the captions. Semi-transparent blocks could increase the readability, but blurring the photos could further enhance the usability.
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.
Collaborated with 60+ organizations with over 94% satisfaction rate.
Since most of the collaborated organizations hadn't built their own Instagram page or without significant followers, we collaborate with over 60 organizations to help boost their events. Through the post-event survey, we got an average satisfaction of over 94%. 93% of the organizations indicated their interest in future collaborations. We also successfully brought more participants to their events.
NTHU InstaNews was recommended on forums as the "must-have" resource for incoming students.
But! We can do better.
How did we iterate and improve?
Use KPIs to measure outcomes. Listen to the users and iterate.
We created a series of KPIs (key performance indicators) to measure the success of our service, including growth in followers, post interactions, exposure, etc.
We analyzed the interaction data to curate the most relevant feeds to the student community. After 3 months, we had a good grasp of what kind of events were more likely to spark students' interest.
We also had a survey open to the public to constantly gather feedback.
Analyzed the interview data, gathered feedback, and generated insights.
What's working?
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.
News selection guideline & information architecture.
After hundreds of posts, our editors had trained a keen sense of good events and content. The content was one of the critical reasons for our growth. We also had a good grasp of how to display the information more efficiently.
What could be better?
Commissions won't fit into the template.
Although the template I designed with the editors worked in most cases, occasionally, we had commissions that required customized layouts. We had to modify the template, but that caused an inconsistent experience.
Different customized content was not visually consistent, which might harm the brand identity.
Distracting backgrounds compromise usability and introduce additional work.
Most backgrounds were selected to match the events. In most cases, we would use the images found on the event website. However, sometimes, the backgrounds could be too vibrant and distracting.
Furthermore, most of the time, editors had to hand-pick the font color to match the backgrounds, which decreased the image production efficiency.
Room for improvement in scanning.
All of the information was aligned to the center in the original design. Although the original template showed a dramatic increase in usability, with longer titles, the texts became harder to scan as the start of each line was hard to anticipate.
Besides, the contrast in font size was not pronounced enough. Sometimes the title font size was similar to the logistics information, which caused a decrease in visual clarity.
Finally, there wasn't any visual element to help the users to group information together. As a result, the information seemed unorganized from time to time.
Design Decisions
Simplify.
The goal of this iteration was to reduce complexity and redundancy. From the logo, information architecture, visual flow, and interface, every single element was carefully examined.
Keep the iconic visuals.
Through interviews and surveys, the blurry background and semi-transparent blocks had become the signature of our platform. Therefore, the team decided to keep these visual elements to ensure brand integrity.
Systematic design.
The solution to the challenge of the inconsistency in special content was to design a template as well. With all the past experience, we now could build a design system to satisfy most use cases.
Design Process - Gestalt Principles & Ockham's Razor
Remove redundant elements. Create better clarity through concise grouping.
To improve usability, I worked with art editors to ideate 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.
Design Process - Scan with F-shaped Pattern
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.
The final design enables the users to quickly find the information even with 1/3 of the size.
Design Process - Consistency
Consistency across all templates.
Even though the two templates served different purposes, the top part design remained the same. This enhances the sense of systematic design and further secures the professional image of our brand.
The standard template aims for the highest efficiency.
The special content template enables us to use the space freely.
9 iterations, 20+ designs, 30+ internal tests, and 3 public tests before launch.
Final Design
We keep everything you like, just better.
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.
Results
Over 70% of our users favored the new design.
After launching the new interface, we conducted a survey to understand our users' thoughts. Over 70% of the audience responded that they preferred the new design. Because the information was clearer to scan, without distractions, the overall experience was elevated.
Increased scanning speed by 160% with the clearer visual flow.
The new visual flow was designed to help our users scan the key information faster. Usability tests suggested the scanning speed significantly increased by 160%.
Reduced image production time by 50%.
When designing the second-generation interface, I also considered how to reduce image production time. Now we had customized backgrounds, so editors no longer needed to find pictures for backgrounds.
Searching and editing photos were removed from the process, and therefore, I cut the production time by 50%.
Steadily grew users to 5k.
With all the improvements in the rebranded NTHU InstaNews, we steadily gained more subscribers. Before I stepped down from the design manager, we had reached the mark of 5k followers.
We are currently the most trusted and influential campus news media with 14k users.
The time when the special content template shone.
Combated misinformation during COVID-19.
The template for special content really shone during the COVID-19 pandemic. At the beginning of the pandemic, before school opened, I decided to utilize our vast influence and broadcasted a series of health notices to protect campus health and safety.
During the pandemic, there was an anxious atmosphere on campus. We thrived to provide the most timely and accurate information to combat misinformation and halted the spread of panic.
Key Takeaways - Think agile.
Do it first, then think about making it better.
I wasn't expecting NTHU InstaNews to be such a success. However, if I wanted to make it perfect at launch, this platform would probably still be under development.
From this experience, the most valuable takeaway was: taking action even though there is still ambiguity. Doing is the best way to counter ambiguity.
Key Takeaways - Think as a manager.
Prioritize the tasks, make plans, and stay flexible.
As the tasks of the organization grew, sometimes it could be overwhelming. Prioritization was especially important. I focused more on the development of the second-generation interface because I knew it could relieve the editors' workloads.
Making plans was helpful to manage the editors. However, since our belief was to be responsive, there's always an emergency waiting to be tackled. Staying flexible was the primary way for me to stay balanced.
What I would love to do?
We can still improve.
The rebranding of NTHU InstaNews was a huge success, but there is still room for improvement. As we collaborated with more organizations, they wanted to gain followers as well. The new interface should build around this mutual benefit.
Designed from 2019 - 2020.
Google Sites
Report abuse