VIGP Client System
The journey of designing end-to-end flows, UX and UI for VIGP Client System while collaborated closely with different teams.
Product Background
About VIGP: VIGP empowers international students to learn, grow, and succeed in the US. With trusted and personalized counseling services including summer camp, college preparation, school application and ongoing mentor, VIGP counselors will help their students to create a study plan based on students’ interests and goals.
About Project: This project is about to create a business client system service for VIGP company’s users: student and counselor to organize and track tasks of the service process.
Project Introduction
Project Goal
Create a client system that works for VIGP’ users: counselors and students, and solves both users' pain points
Users
The primary user of the new system is counselors at VIGP who provide educational consulting to international students. The secondary user will be international students who need the service provided from counselors.
Challenge
Balanced between business goal and client’s goal. Iterated the design in time during the design process when the business goal changed.
My Role
Our design team responsible for this project includes 3 designers. The whole work was created 70% by me and I led the design team and was responsible for designing end-to-end flows, UX, and UI while collaborated closely with different teams. We had to finish the design and hand-off to developers within 5 months. I rolled up my sleeves to initiate user research and ideation.
What I Did
-
Conducted user interview and competitive analysis to understand user needs and pain points.
-
Mapped out the user flow and information architecture.
-
Called stakeholder’s meeting to make sure everyone was on the same page.
-
Wireframing and prototyping.
-
Conducted AB testing on specific features and usability testing on user flow.
-
Iterated and refined design based on user feedback.
-
Final Mockups.
-
Worked with developers to implement the design. (Q & A)
Duration
We had to finish the design and hand-off to developers within 5 months.
User Research
User Interview
Research goal
The research goal is to understand the service process between counselors at V. I. Global Partners and students. Our goal is to identify pain points for our users and to build a better user experience.
Who are our target users?
-
VIGP’s previous and current students and parents
-
VIGP’s counselors
Synthesis helps us took all the information we've collected from both users, organized it into patterns and themes, and translated those themes into insights. This step is to zoom out and look at our findings anew through a process.
Since, we have two types of users: clients and counselors. We have summarized the needs of clients only and needs of counselors only, we also organized common needs of all users.
Key Research Questions
Q: What obstacles do users face when they track their application process?
What They Said
Findings
-
Students and counselors are using different platforms or tools to keep track of tasks that are inaccessible to others.
-
The current method VIGP is using for organizing task is lack of standardization and difficult to manage.
Insights
Users need a system to manage and prioritize tasks, deadlines, documents in one place.
-
For Counselors - A space to organize students’ files, school lists, to-do tasks, and deadlines.
-
For Students - A space to sort all documents and keep track of assigned tasks.
Q: What feature would you recommend including in the system?
What They Said
Findings
97% of VIGP counselors and students enjoyed using Google Drive and Google Doc. Google Drive is a great place to store and edit any application materials since it is easier to track revision through Google Doc.
Insights
A system intergrating Google Drive and Google Docs where both counselors and students can access files directly through the link.
Pain Points
-
Counselors need an easy-to-use working system to help them organize student’s tasks and documents
-
Students need a space to keep track of tasks assigned from the counselor.
-
Both Users need an effective way to collaborate with each other and engage in the service process actively.
Competitive Analysis
Personas
We created personas, they helped us to understand and empathy with our end users. We recognized that different users have different needs and expectations as well.
Ideation
With the analysis, I called out meetings with co-founders and developers to make sure everyone was on the same page and aware of users' pain points. As soon as we were all on the same page concerning the objectives, we started working on user flows, information architecture, and how to help users achieve tasks. We defined key features to solve users' pain points first.
I also came up with ideas of system structure that shows the pages with features.
We did the usability test and users are quite familiar with this flow. We received many positive feedbacks from this initial version. As a result, we decided to move to wireframes and had another round of user testing.
After discussing with my teammates, I mapped out the user flows to show how does the user accomplish the task step by step. For example, the path for counselor to create a new task.
Key Features
The objective of the VIGP Client System is to solve our users’ paint points such as organizing issues for our users and creating a unified space for both counselors and students. The key features provide by the product for VIGP Counselors are:
Student List
The student list helps the counselor to overview students each counselor is consulting. Information such as covered services, student academic history, and college plan allows the counselor is under student profile to help view everything in detail.
To-Do Task & VIGP Task
The To-Do Task allows the counselor to create tasks assigned to the student individually. It helps tracking and managing tasks that need to be complete.
The VIGP Task is a space designed for the counselor only. It helps each counselor plan and prioritizes tasks. Separating tasks for the student and the counselor gives the counselor a more direct and accessible space to utilize.
The objective of the VIGP Client System is to solve our users’ paint points such as organizing issues for our users and creating a unified space for both counselors and students. The key features provide by the product for VIGP Students are:
Track Process & Tasks
The system serves as an agenda for students. They can view the overall service progress and to view tasks assigned from their counselors.
Finding Related Materials
Integrating Google Drive & Google Docs into the system allows students to save the link to documents or drive. Counselors will create a task for students to paste the link to the file in the To-Do Task, and students will then provide the link to the file or drive for counselors to access through files.
Any related material from students will be listed on the service module, so students can find the file easily.
User Flow
Student User Flow
Main User Flow For Students:
View Service Progress & File Link
Counselor User Flow
Main User Flow For Counselors:
View Student Information & Assign To-Do Task
Information Architecture
Wireframe & Prototype
This is the version 1 we created. We did a user testing internally at VIGP for some feedbacks on the system. We gathered feedbacks and discussed with our Product Manager (PM), developers, and internal users.
Version 1 Wireframe Student View
Version 1 Wireframe Counselor View
Internal Feedback on version 1 wireframe:
-
Product manager gave us the feedback is that there is too much content or tasks on one page of so that users would be confused and lost.
-
Developers said that they can only display the calendar, but not made it operable.
-
VIGP users thought that they didn’t need the calendar function of the menu because they were not used to track and find tasks by using the calendar.
Therefore, we iterated our design base on their feedback, and here is our version 2 wireframe.
Version 2 Wireframe Student View
Version 2 Wireframe Counselor View
Highlights of Design Changes from W1 to W2
Change 1: Remove Calendar from Menu
We did some changes from the 1st version, and one of the main changes we made is to remove the calendar.
Our PM suggested taking out the calendar because the workflow of our counselors is based on service progress, not time constraints. Counselors want to set a deadline for each task is just to plan out the desired time frame, not a fixed deadline. Our developers also point out some technical issues in which the calendar would not be interactive.
Therefore, we decided to take out the interactive calendar but keep it as a display to inform counselors of some recent activities.
1st Wireframe
2nd Wireframe
Change 2: Simplify Module Service Page
We also made some changes on the student’s end from the feedback we got from internal user testing. The service module on the 1st wireframe is too complicated to understand. It creates an information overload issue for our users. To solve the problem, we moved some of the session / information and made sorted tasks into different sessions on the service module page.
1st Wireframe
2nd Wireframe
Testing
However, things didn't go as we planned.
After revising our 1st wireframe to the 2nd, we faced an issue where VIGP has decided to change its business process. Instead of assigning students to counselors based on the service, now each counselor will be in charge of a few students and take care of all services to the student needs.
After understanding the updated needs and pain points from users, we defined the wireframe and made version 3 wireframe.
Version 3 Wireframe Student View
Version 3 Wireframe Counselor View
Highlights of Design Changes from W2 to W3
Change: Service Module Change
We made some changes from our 2nd wireframe. We changed the system from service-based to student-based, allowing the counselor to find each student faster and easier to find what service the student needs.
2nd Wireframe
3rd Wireframe
We did the usability test and users are quite familiar with this flow. Both users though that they can easy to use this system, they didn’t spend more time on finding the task and tracking the task. We received many positive feedbacks from this version 3.
Iteration
Shifting to the new business process, we finalized all the wireframes and did a usability test on our targeted audience - VIGP Counselors and Students.
As this is an iterative process, we already know that our work is never done. We had continuously been testing, measuring, getting feedback, learning, updating, adding new features on so on and so forth…
Highlights of Iteration
Change 1: Create Task Button
We changed our CTA by moving the location and making it into a button. The design of the CTA in our 3rd wireframe takes up a whole task space to show where to create a new to-do task. However, to-do tasks are created by the counselor based on the service needs, which could include a lot of tasks. To make the user interface cleaner, we simplified our CTA into a button giving our users a consistent experience.
3rd Wireframe
Final Mockup
Change 2: To-Do Task Template
The other major change we did from our 3rd wireframe to the final design is the task template. The old design of the task template does not have a clear hierarchy and readability. To solve the issue, we reorganize the layout to make the interface cleaner. We also added the delete option on the task template allowing our users to remove the task when needed.
3rd Wireframe
Final Mockup
Final Mockups
The high-fidelity simulation of the finished product that delivers the visual look of the product design—including typography, iconography, color, and overall style. Mockups establish how the users will interpret the brand through its visual identity. During the mockup stage, we offered a more realistic perspective to stakeholders and can help reveal problems that weren’t so apparent in the wireframing and prototyping stages.
Login Page Design
We also created 3 styles for the login page, and finally we chose the first one as consistent with business branding.
Client System Final Mockups
Student View
Student -- Task
Student -- Notification
Student -- Profile
Student -- User Account
Student -- Setting
Counselor View
Counselor -- Dashboard
Counselor -- Task
Counselor -- VIGP Task
Counselor -- Notification
Counselor -- User Account
Counselor -- Setting
Takeaways
Iteration and communication are the essence of design.
This was a really exciting and fun project for me to work on as it provides real value, involved a ton of research, and detailed interaction work. I learned some important takeaways from this project related to product and business processes.
How to adapt changing requirements
Business goals were always changing and the constraints of the platform also affected every design decision. The scope of the project was constantly changing too. I had to adapt to those changes and still deliver the best design in time with tight deadlines.
How to strike a balance between business goals and users' needs
It is important to persuade the PM with evidence from user testing and design rationale. I should always do A/B testing with different iterations of the design so that we can better align different goals.
Communication is the key
Communication is really important during the overall end-to end design process. I learned a lot about how to collaborate within cross functional teams and how to improve the workflow of real product development.
