- Planned and conducted card sorting workshop with stakeholders (3 people) to gain understanding of domain and information architecture.
- It helped me find a structure & content of website, label categories and navigation, and decide what content goes on each page.
- Planned and conducted participatory design workshop to uncover new ideas priorities, and flows.
- The outcome was it provided me a quick & clear understanding about needs of stakeholders and users.
A website that acts as a communication platform between University coaches and school professional to share TRAILS program documents. School Professionals execute the TRAILS program on K-12 student (in Michigan only) to treat them from mental health. This is a cross-platform website on desktop, tablet & mobile.
I was the Lead Product designer for this project. I planned and conducted generative & evaluative end-user research.
Analyzed qualitative research data to deduce insights to design sitemap, sketches, wireframes, brand & style guidelines including icons and visual design.
Tools I used are Adobe Illustrator, Photoshop, Sketch, Invision, Zeplin.
Poor UX in Old website
The old website had usability issues. Users felt lost in navigation, browsing & searching for program documents was complicated, esoteric jargons which resulted in lack of clarity on how to use the program documents, a cluster of unorganized documents, broken document links, pain in accessing documents, etc. In the end people felt unmotivated in using & visiting the website.
- Planning & running user-centered requirement gathering workshops with stakeholders (3-4 people) to understand requirement & their expectation.
- Interviewing users (6 people) to discover the challenges in their journey and understanding their needs & goals.
Benchmarking UX/UI standards
- Conducted comparative analysis to get a better understanding competitor in the domain. Selected 4 out 6 competitors to study because they had the similar target audience, market organization vision.
- I choose 8 parameters to rate our competitors on a scale of 0 to 4 and plotted them on Spider graph.
- The stakeholders (4 people) had rich tribal knowledge in this domain. To discover it and understand expectation I planned and executed a comparative analysis workshop with them.
- Key findings were, organisation of documents was important, maintain optimal text detail, & aesthetics must be neat.
- Conducted 6 user interviews to discover the challenges in journey while using websites. Participant were chosen based on their role (4 university coaches & 2 school professional) and experience in this domain (2 experience, 2 mid-level, 2 amateur).
- To obtain information about the context of use, and how university coaches use the website I conducted contextual interviews.
- Questions asked were on demographic, how & why do they use current website, what motivates them to visit competitor website, list of other favorite websites outside the current domain.
- Created affinity diagram to understand the types or problem users were facing and what is the root cause of the problem.
- User feels lost in navigation.
- Jargons on website are confusing.
- Organisation of information on website is puzzling.
- Sharing of document resources is prime interaction among users.
- Interaction with documents are frustrating.
- PDF resources are not user-friendly.
- Most of the users use Windows operating system
- Mostly users come on the website and share documents among each other.
- User had problem accessing the documents.
Scoping & Refining
Rendering User Needs
- Attacking the user challenges and solving it.
no more lost in navigation
User were feeling lost in website because of elusive wandering left-navigation.
To fix this I added organized left-navigation and breadcrumb.
Structured & organized documents
Documents was cluttered and unorganized in older website.
I organized the documents into two different sections. School professionals usually browsed in Manuals section and university coaches’ favorite section was Resources.
Browsing made easier
While browsing for right document users had to download it to view it. Their downloads folder was overloaded with duplicate files.
To solve this problem, I added first page of document as thumbnail so that user do not have to download it and can make a quick guess by looking at the thumbnail.
- It’s not easy to talk about design. Every problem has 'n' number of potential solutions.
- It was difficult choosing a best among these infinite solutions.
- However by following good UX practices and focusing on users' need I was able to win on the challenges.
Adding Prime interactions
The prime purpose of university coaches & SP to visit the website is to share a document by sending links in email, printing and sharing physically and downloading to read it.
To speed up their process of work I added these three prime interaction on hover of each document.
Feedback is important
When user clicked the Copy URL link they were confused whether the url was actually clicked or not.
Adding feedback on interaction made user gain trust on their interaction.
Intuitive "Show More"
To keep page length organized, I decided to show only 3 documents in a section. However, during usability testing, I discover that "Show More" button was not intuitive to the user as they cannot locate rest of the document.
I repositioned the "Show More" button and added a visual clue by showing a sneak peak of the remaining document.