Virtual Torch Tech(VTT)




PROCESS OVERVIEW


In this project, I worked as a UX designer with a cross-functional team. When I joined, another designer in the team has already done preliminary research to validate proto-persona. I used the research data and analyzed their needs through rainbow sheet based on the results from focus group session. Then I created the information architecture, wireframes to ensure users can access all info they need. After this, I designed the first phase design which has main functionalities and conducted usability testing to iterate the design.

Challenges

No centralized platform to share info and collaborate with community members
As a big community, NYU IT department uses many different services to form groups and collaborate with others. For example, they used Google groups and Communities of Practice to form or join interested groups. They used NYU Events to access event info. Sometimes, they landed on the website, NYU Torch Tech to learn about other departments’ info or people. However, the website is mostly statics and have poor navigation.
Stakeholders with diverse background
This project involve many stakeholders with diverse backgrounds, including graphic designers, librarians, administrators, politicians and so. Even though they all worked at NYU, their perspectives are different. We should consider the various perspectives.

Problem Statement


Analysis

NYU Torch Tech Website Heuristic Evaluation
First of all, we do the heuristic evaluation for the previous VTT website to understand all the problems. One of the most serious problem is that the website is lack of interactivity. There is even no heavy user for the website.










Who are our users?
Based on the 1:1 interviews with 6 people worked at NYU IT, we basically divided they into 2 groups: IT-professional and Non-IT Professional, as these 2 types of people behave differently and also have different goals. Both of them are interested in having a digital space to share or access tech knowledge. Also, they would like to have a place make networking easier.







Understand Users’ Intentions
We conducted first focus group sessions to understand users’ intentions. Based on their feedback, their expectation and intentions can be categorized into 4 categories: knowledge-sharing, networking, events, and projects. I introduced the rainbow sheet analysis method to the team and this helped my team better understand users’ intentions.







Design Goals

We set up the basic design goals based on users' feedback. The general goal here is to design an engaging, efficient, and easy-to-use collaborative knowledge-sharing and networking platform. (Analysis created by Sarth, me and Maria)

• Knowledge-sharing and learning
⁃ Ask Questions and answer questions
⁃ Share knowledge with others
• Networking
⁃ Search people who have skills they need
⁃ Participate in more events (upcoming events or events nearby)
⁃ Connect to others online. (“Follow” like Twitter?)
• Better and easier navigation
⁃ Landing page with clear objectives and directions
⁃ Responsive web UI
⁃ Clearer menu tabs



Priority of the features
Based on our interviews and analysis, we understand the priority of different features. This helps us create our information architecture. As knowledge share has the highest priority, we decide to have this functionality featured at home page.


Main Features and structure

Information Architecture
Based on the rainbow sheet and the evaluation of previous website, me and my teammate defined 5 main features: knowledge-sharing, networking, events, projects and Community of Practice for VTT.

Also, we will have a landing page to introduce the platform and attract new users to the platform.
Here is the information architecture that I created for the site:








User Flow
To further define users’ actions, we created user flows for different features to gain a better understanding of how users will use it.






Wireframes
At this stage, we used wireframes to discuss with our stakeholders and better understood what kind of information they want to know about. We created most of pages based on the information architecture.(Created by me and Maria Shin)

Challenges when creating wireframes
At this stage, we encountered some problem when we discussed with our stakeholders. As most of them in the focus group session are not familiar with wireframes, they want to see colors on the components which represented NYU branding. As a result, at this stage, after we confirmed the info on the wireframes, we move to next stage, Hi-Fi prototypes.

Hi-Fi Design

Color Palette for VTT
Considering that this project is associated with technology and also our users asked to design a “young and energetic” website, we decide to not use traditional NYU purple at this phase. I created and defined the color for the website. We planned to have the detailed visual guideline in next phase.





Accessibility
When we designed the system, we also considered accessibility and confirmed all color passed WCAG 2.0 AA standards.







Illustrations for Landing Page
After testing our landing page wireframes, we found that text and icons were plain and not very engaging for our users. To make it more energetic and younger, we tried to present our product feature creatively. We decided to use illustration to tell stories about the features, including knowledge-sharing, events, projects, and networking.

As out concept is “bring NYU IT together” which is about the IT community, for each illustration I put at least 2 people in. Also, the illustrations are inclusive of University and IT priorities: Diversity and Women in IT.








Design screenshots for this version

Usability Testing

Focus group and presentation with CIO/VP
In this stage, my team and I conducted focus group to test the usability and learn more about user needs. We also have meeting with CIO and development team to understand their perspective and techniques. As a moderator in the focus group session, this is a good opportunity for me to share our design with the community and talk to them in person.


Design Iterations

According to the feedback from focus group and meetings, we gained helpful feedback and then iterated design based on it. Here are some important design improvements. (Designed by me and Maria Shin.)

Landing Page






Home Page(Knowledge Sharing)



Community of Practice



Events


Final Design

After the usability testing, we improved the design based on their feedback. For example, we add NYU purple to the color palette. Also, we will curate posts/questions according to the interest they selected. (All the design are created by me and Maria.)




1. Landing Page
We created a landing page to showcase the purpose of VTT and its features. I created illustration to make the platform more creative and explain the main features. Also, we provided photos at the second section to make users feel more connected/engaged with the community.










2. Customize interests if first time logging in
Based on the findings in the focus group session, we found that our users are interested in customizing their home page according to their interests. So I designed a onboarding process for them to choose their interested topics and connect with people they know.







3. Knowledge-sharing - Home Page
The most important purpose of this platform, is to share knowledge and make a collaborative environment. We have more visual focus for the writng post section which encourages users to share knowledge. If they are the first time user, the system will guide them how to ask a question/post an article. Users can customize their interest by clicking the left-side menu. Also they can see latest events at right side menu. If they are interested in a question/an article, they can click the title to learn more. We also provide “Discover” feature for them to explore more posts/questions out of their original interest.









4. Community of Practice(CoP)
As Community of Practice(CoP) is another very important feature for VTT, we decide to briefly provide CoP details in the Landing page(external site). They can choose to view all CoPs, trending or recent CoPs. After they log in to the system, they can read more info of each community including their members and community details. If they join the CoP, they can view resources, all members and posts. They can also have their own CoPs by creating one.






5.Project Page
As many people in the IT community are interested in what others do, we have this feature for them to view others’ projects. They can find out project info like: project details, members and techniques which help them know who they can reach out to if they have any problem about similar techniques. Users can also create their own project and share with the community.







6.Event Page
According to our research, we found many people are interested in participating in events. This can help them create connections with others and also share knowledge with others in person. Users can filter the events by different attributes: upcoming, location, popularity and past events. Also, I provided a small calendar under the filter section which can help users quickly know when the events will happen.




Next Steps


First Phase Development
While development takes more time, we decide to launch the MVP first which include the knowledge sharing features, search feature and profile.

Networking page and mobile version of the design
When I left the project for my internship, we still not yet finished mobile version of the design. While there are great amount of people use mobile to browse knowledge-sharing platform, we put the mobile version of the design as top priority. Also, we plan to finish the design for networking which is another very important feature.

Make a complete design guideline
As this project was quickly developed by 2 designers, we did not build a holistic visual system at the first stage. To make it easier to build for developers, we decide to build a complete guideline as next step.

KEY TAKEAWAYS



Think from different users’ perspectives. Explain more to deliver the idea.
When we conducted usability testing aka focus group, we found out some non-IT professionals cannot understand our ideas. They even did not understand what’s “landing page”. I learned to be more empathetic and explain my design without using too many professional words as I explain to an alien.

Don’t be afraid of being criticized
In this project, we had opportunity to talk to our users in person. They gave us very insightful feedback, but sometimes their honest feedback hurt. I once heard of a user said, “I don’t like the design and it is disconnected to me” in person. It was hurt in the beginning, but then I asked him what makes him disconnected with the design and what are the elements that he did not like. It was not as scaring as I thought and also greatly help us iterate the final design.