The Visual Non-Glossary
Providing educational visuals to teachers and school districts
Problem
The website’s aesthetics and user flows may be hindering the product’s growth
Solution
Update the site’s aesthetics and usability, including adding an ecommerce user flow to help facilitate growth
Constraints
Time - 3 months to complete the project
Budget - limited funds
My Role
User researcher and designer - worked on all aspects of the site’s redesign
Learning About The Company
Who they are
Who they want to be
How can they get there
TVNG is a website that offers structured visuals to educators to aid instruction.
School districts are able to purchase licenses for their teachers to access the visuals.
The company would like to expand into new markets and offer the opportunity for individuals to purchase a license directly on the site.
TVNG would like to update their website to make it more aesthetically pleasing, user friendly, and marketable.
They would also like to add an ecommerce user flow to the site where users can purchase a license directly.
Current Site Problems
To determine how I could help the company with its goals, I had to understand the problems they were having with their current website.
Interviews with Stakeholders
“The site looks dated. I’m embarrassed by it.”
“I would like the option to purchase subscriptions online.”
“I get complaints about the login button. Customers seem like visitors.”
Homepage
Interviews with Current Users
Users viewed the site as “simply business.”
“The colors are overstimulating.”
The site was not as intuitive for users as they would like.
It was not convenient to call and inquire about purchasing a subscription if they wanted to recommend it to a friend.
Subjects page
Opportunities for Improvement
Competitive Research
I conducted competitive research comparing TNVG’s website to similar websites. I considered what worked well for other sites and how improvements can be made to enhance the aesthetics and usability of our website.
Grayscale coloring seems dull
Call to action does not stand out
Current Website
Use of icons to infer meaning
Close spacing
Colors may not meet WCGAG
Lots of reading
Lack of visual interest
Visually distracting use of color
Busy page
Comparison Website
Colors are bright and engaging
Call to action is obvious
Nice use of images
Titles, heading, spacing, description, action
Use of images to infer meaning
Less reading
The diagram adds visual interest
Clean and organized
Bulleted points
Use of color & lines for visual discrimination
Due to time and budget constraints, it was agreed to prioritize the main aesthetics and flows of the site. Not all flows were designed or built out.
Narrowed Focus
Design Inspiration
My design inspiration came from the TNVG’s logo. I wanted to remain true to the brand with the decisions I made.
Wireframing
Using the insights I gained from stakeholders, users, and site comparisons, I started wireframing.
new look that’s easy to scan
effective use of white space
ecommerce flow
Hi-Fidelity Prototype
Reasons for my design decisions:
Used colors that were on brand and toned down color variations as to not overstimulate
Minimal design and use of white space to make the site uncluttered and scannable
Wave design modeled after the logo was used to draw attention to page headings
A variable sans serif font was used for readability
Images that help users understand the product were chosen
Several design options were presented to Stakeholders. The pros and cons of each option were considered and selections were made.
Using the selected designs, I built out the prototype.
Usability Study
Using the prototype, I conducted usability tests with 5 potential users of the product to determine the site’s ease of use and uncover potential problems.
Test Plan Dashboard
User Feedback
“I have to scroll down then to the side. This doesn’t make sense”
User seemed to squint eyes on checkout page.
“I don’t want to have to click to figure out what something is. I would want it to be upfront on the page.”
Changes Implemented
Based on insights from the usability study, the following changes were made.
Combined sections and enlarged text to simplify checkout page.
Added a close button and video to help with navigation and understanding.
Added videos help users understand the product being offered.
