The Stan Winston School of Character Arts is an online platform for learning the art and technology of character creation from Award-winning industry professionals.
They asked for our help after having some issues with their dev framework and noting a few usability problems affecting the experience of its students. Our team set the goal of migrating SWSCA's databases to a different framework, so we could be in an environment where improvements could be made more easily. As we explored the project, we saw the opportunity to redesign the whole site to deliver a richer experience for SWSCA's students and prospects.
At the beginning, I did a heuristic evaluation and came up with three important insights:
1) SWSCA’s website is content-heavy, so the structure had to be scientifically taken care of,
2) the main navigation menu showed opportunity for improvement on how it categorizes items and its nomenclature,
3) and the home page did not provide a proper on-boarding experience due to non-progressive disclosure of content, and it did not enable focus on meaningful actions such as Subscribe or Buy.
Given that these findings pin-pointed important improvement areas in the navigation and structure of the site, I put together all the site's content on a spreadsheet and came up with the content inventory.
1) SWSCA’s website is content-heavy, so the structure had to be scientifically taken care of,
2) the main navigation menu showed opportunity for improvement on how it categorizes items and its nomenclature,
3) and the home page did not provide a proper on-boarding experience due to non-progressive disclosure of content, and it did not enable focus on meaningful actions such as Subscribe or Buy.
Given that these findings pin-pointed important improvement areas in the navigation and structure of the site, I put together all the site's content on a spreadsheet and came up with the content inventory.
Then we targeted different students and divided them by their subscription level, then asked them to organize the site's content and features into groups through a card sorting study.
After analyzing the results using a dendrogram and a similarity matrix, we ended up with 5 categories that guided the design of the main navigation menu in a way that made sense for users, and it allowed us to organize the hierarchy of the home page.
After analyzing the results using a dendrogram and a similarity matrix, we ended up with 5 categories that guided the design of the main navigation menu in a way that made sense for users, and it allowed us to organize the hierarchy of the home page.
The research results were presented to the team and we continued to build from it. This process allowed us make informed decisions about the navigational structure of the site.
Post-MVP, the team was ready to implement new features, like Learning Paths (grouped related courses), for which I did a competitive analysis that helped us come up with clever and relevant ways to implement them in the revamped site.
(scroll down to know more about the story ⬇️).
Agreement values for resulting categories (similar to Cronbach's internal consistency)
Grouping categories based on agreement values
Resultant categories from card sorting analysis for new menu VS old menu arrangement
Improved menu layout using the new arrangement of categories
The following grid shows old versions of the site, improved wireframes, and visual designs from Adriana Domínguez and Sebastian Garanton.
After redesigning the main menu navigation and Home page, we moved on to improve a crucial workflow within the site: the checkout. I prepared a diagram showing different scenarios to help designers create different screens for each one:
Diagram covering different scenarios for the checkout process
Observations and recommendations to improve the checkout flow (from UX audit results)
And this was the result (Credit for Design Lead Adriana Domínguez):
Before implementation, I set up this prototype in Marvel app to spot potential problems in the flow of interactions (also available at https://marvelapp.com/46gaa0i):
Finally, I analyzed competitors and came up with the following wireframes as proposals to show the most suitable content structure for different pages of Learning Paths:
