Foreign exchange student program
CCI Greenheart
CCI Greenheart offers cultural exchange programs in the U.S. that connect Americans with international students.
CLIENT /
CCI Greenheart
USERS /
CCI Staff, Partners, Participants, Host Families, Field Staff, Employers.
ROLE /
UI/UX Team Lead, Research, Visual Design.
WEBSITE /
GO App
Is a large-scale student management system which consists of about 25 vast modules that cater to various user roles and is used by hundreds of global members.
Those interested can apply, communicate and visit the profiles of their associates and stay informed about their application, program, school, stay and other whereabouts from beginning to the end of their course using the Greenheart Online (GO) app.
GO Modules and Communication chart
Problems
-
The system, developed approximately eight years ago, was outdated and cumbersome.
-
Each module held a ton of information with no visual clues and worked differently.
-
Users faced difficulties to complete their tasks with speed and efficiency due to an inefficient information architecture.
-
Each task took plenty of clicks, scrolls and scanning through multiple screens before a decision could be made.
-
Users often made errors and missed out on various important and time-sensitive tasks due to lack of heads-up.
Solutions
-
Standardized all modules to improve familiarity and usability.
-
Streamlined workflows to shorten timescales and reduce overhead.
-
Reorganized information to take advantage of screen width.
-
Transformed a text-heavy application into a dynamic visual experience by using panels, tiles, iconography and color codes.
-
Redesigned the navigation flow to help the user traverse the application efficiently.
-
Redesigned 'Work Queue' module to help the users address their tasks as per priority.
-
Introduced 'Alerts' and 'Notifications' features to provide users insight into progress toward goals.
GO, a design of an intuitive student management platform.
OLD - Admin Dashboard
NEW - Admin Dashboard Design
My Responsibilities
As a UX Design team lead I:
-
Took ownership of quality assurance.
-
Generated clear concepts and designs from beginning to end.
-
Created guiding principles and operating procedure for the team.
-
Lead client discussions for requirements, testing & feedback.
-
Collaborated with cross-functional teams.
-
Contributed to staffing decisions on project work for new designers.
Created a UX Work Model for fellow teammates to follow and ensure an error-proof timely submission
Research | How I got there
As a creative team, we engaged ourselves to perform a study of its core online application, in order to determine the feasibility, effort and time for developing a completely new system.
Understanding the User in User Experience
During our user research and deep dive sessions with the organization staff, I learned about the difficulties they were experiencing when it came to:
-
Usability
-
Structuring
-
Redundancy
-
Finding/Managing content
-
General design problems
-
Performance and responsiveness of the application
OLD - CCI Greenheart’s online application hosted and supported by Adage Technologies Inc.
Based on the gathered information during user research, I worked
on creating task models, sitemaps, wireframes, and prototypes.
Deep dive into various use cases and scenarios
Sticky notes exercise
with CCI staff
Task Flows
Participatory Design - dashboard sketches by CCI staff
User Pain Points
Based on the user testing and feedback sessions some of the biggest issues the users faced were:
-
Navigate to multiple screens to complete one task.
-
Took a lot of time and effort in finding information.
-
Being unable to view multiple records in one view.
Why Panels?
-
Eliminates constant back and forth between screens.
-
Packs more information and functionality on one screen.
-
Organizes information dynamically.
Wireframes
Various sizes and combinations of panels used in the new design.
Order to Complexity
I started visualizing data into vertical panels. With user validation, I started moving the blocks of information into panel containers determining what needs to be seen by default versus what can be hidden when not required and what can be moved under new sections to reduce information overload.
MEDIUM FIDELITY WIREFRAMES - Information Structuring
User Pain Points
The users faced issues with the dashboard work queue module such as:
-
Saw all tasks regardless of their role restrictions.
-
Difficulty in taking quick actions on priority items.
-
Task delegation happened only via verbal or email communication.
-
Took over the entire screen space allowing no room for other useful features.
Redesign of Work Queue Module
-
Designed the queue to only surface the important tasks the user needs to know about and take action on.
-
Sorted the long action list by user roles, types and categories then by user’s job description as a member.
-
Incorporated a way to support task delegation.
-
Resized the module tile to provide other statistical, task-based, notification-based system for the user.
NEW - Work Queue Module
Wireframes
Structuring of the Work Queue module that allows users to become aware of what’s new in the GO system.
The applications held a lot of similar information displayed differently on various user screens. In order to make the UI consistent and to cut down on development effort, I chunked the relevant information in form of tiles which could easily be reused across the app.
HIGH FIDELITY MOCKUPS - School Module
Visual Design
Keeping the overall brand in mind I interpreted data visually in
more than one way, but always with the goal of simplification,
reducing redundancy, maintaining consistency, and giving
most importance to usability and hierarchy to make the design
intuitive and user-friendly.
Navigation Elements, Flows, Titles and Pagination Bar Design
OLD - Admin View of Entity Details Page
NEW - Admin View of Entity Details Page
Hierarchically aligned tabs and orderly labeled bars for easy understanding of the page flow
NEW - Admin Menu Bar
'Rewind back button’ takes the user back to the entity landing page in just one click (reduced 10 steps to 1)
OLD - Tabs
NEW - Application Tabs
OLD - Pagination
NEW - Pagination
Quick rewind Clicking on ‘...’ (on the right) will show the next 5 page nos.
Quick forward Clicking on ‘...’ (on the left) will show the previous 5 page nos.
Incorporated user’s wish of using ‘Heart Shapes’ into meaningful Progress Bar Tabs
OLD - Admin Dashboard
NEW - Admin Dashboard
‘Dashboard’ & ‘Work Queue’ module revamp
-
Structured the module into a tile container with panels and filters to provide room for other necessary features on the dashboard.
-
Added ‘Assign’ feature for the lead roles to delegate and manage the queues for other staff members.
OLD - Admin Work Queue Page
NEW - Admin Work Queue Page
-
Lead roles can manage and take actions on updates whenever a change occurs.
-
Enabled completing a task on the same page without needing to travel to the source page and fetching for information where the queue was generated.
-
Reduced the number of steps to complete the task from 15 to 5.
OLD - Admin View of Participant Application Page
NEW - Admin View of Participant Application Page
-
An admin can emulate the profile view of a participant.
NEW - Region Management Page
NEW - Listing Page
NEW - Participant's View of Application Page
What we accomplished
We addressed user pain points and needs with the older application by incorporating an efficient information architecture, new features and by resolving the fundamental design problems of a text-heavy application.
-
This enabled users to accomplish more tasks in less time.
-
Prevented errors in task completion.
-
Eliminated frequent searching for information.
-
Informed users what needs attention.
-
More visual clues helped easy identification of important information in the text-laden application thereby reducing information overload.