My Role and Responsibilities
Usability tester & UX researcher/designer
I worked on the user testing first and collecting and analyzing feedback from the beta version and then designing the module accordingly via conceptual sketching, low and high-fidelity wireframes. This was common for all modules.
Methods
Usability Testing, User Testing, Brief Surveys, Research Analysis, User Flow, Information Architecture, Hierarchical Task Inventory, Pen and Paper Sketching, Wireframes and Hi-Fi prototypes.
Overview
CP Converge app is an app used by enrolled students who are pursuing higher education abroad to use the services offered by college pond. The goal of the entire project was to design a mobile-first application. Furthermore to identify users for beta testing and collect their feedback and solve the problems to design solutions. It has various modules.
The Challenge
To foundationally test the current version of the application with the beta testers to attain feedback that can be used for refinement of the design and the user experience.
The Cause
The existing modules had a cluttered UI and no thumbnails due to the wrong UI and information architecture of the various sections: depicting one article, event, or video.
The Solution
A better intuitive layout was needed to help users perform tasks quicker like searching articles, videos, and booking appointments quicker alongside creating a more spaced out UI.
Platform
Mobile application
Tools
Adobe XD
Duration
September 2019 - April 2020
Application Features
Articles
The articles section was one of them, It was designed as a part of my internship at CPConverge. This section provides relevant articles for the students to go through during their application process. It adapts to their field and also to their likes and dislikes.
Videos
The video section provides videos regarding application instructions, recordings of webinars, seminars, and meetups for the students to go through during their application process.
Book Appointments
This section helps users book appointments with counselors for in-person and online appointments.
Events
The events section provides relevant webinars, seminars, and meetups for the students to go through during their application process.
Profile
The profile section stores and asks users to onboard their basic data. This module comes up during onboarding and a user can edit it using the profile section in the hamburger menu.
Design Process
Understanding User Needs
We used the existing BETA version to test and get some initial feedback from a set of volunteering students who are enrolled with the consultancy. We signed them up using email and then shared brief qualitative survey questions and short on-call interviews regarding the particular module.
Research Analysis
We conducted one on one moderated interviews and online task-based surveys. This aided us in gathering quality insights into how the users perceived the process and also helped us test the beta version. After getting the survey details from the research participants we created a Google sheet of their feedback. This helped create patterns and helped create user-centric design iterations.
Spreadsheet of User Feedback
The research resulted in the identification of these distinct thematic conclusions:
The application information architecture wasn't intuitive enough. Participants were getting confused with misplaced CTAs and information.
The User Interface of the application was really cluttered and chaotic, users needed more breathing room on a screen as they got really overwhelmed.
The Dashboard or the landing page didn't contain all the required information and thus needed user testing to determine what will be useful:
Users ended up liking clips of their recent applications, data, and calendar with shortcuts to all.
Post this we started to create sketches and lo-fi wireframes. I have mentioned the exact steps in my User-centric research and design circle.
User Centric Design Approach
Pen and Paper Sketching
After understanding the problem which in this case was the confusing user flow, the lacking favorites page, and related options on other pages of the module. Users found it difficult to research every time so the favorites page was much needed. On this basis the sketches were created.
Medium and High Fidelity Wireframes
After creating the pen and paper sketches, I translated the designs to high fidelity mock ups on Figma. During this process, I created a design system that helped define the design of the application for all the modules. Here is Articles and Video modules for reference:
Articles
Below are the medium fidelity and the high fidelity mock ups for the articles module of the application. This potrays the production version of the designs.
Videos
Here are the medium and high-fidelity mock-ups for the video module that provides sample videos to be viewed and used as a reference and for guidance during the application process.
Learning and Key Takeaways
User feedback research
The quality of the design is really dependent on the feedback you get for your existing version. And it is important to drop the ego and focus on what the user wants.
Aggregate curate and design
I got to analyze the feedback and help create solutions for the design problem using sketching and wireframing.
​
Product success
The application went live on both IOS and Android where it received good reviews. We were able to reduce the overall application timeline by 30% and increased our user base by 70%.