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.
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.
Sketching helped visualize the site flow.
After few iterations I narrowed the scope to the most basic needs.
Clarification on website features.
It helped me push usability to the forefront.
Concrete site map was finalized.
User were feeling lost in website because of elusive wandering left-navigation.
To fix this I added organized left-navigation and breadcrumb.
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.
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.
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.
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.
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.
