ASCD
Empowered Educators Empower Students.
ASCD is a platform that equips educators with the tools they need to provide a healthy learning community.
Client.
ASCD
Team.
Appnovation
Deliverables.
Information Architecture
Wireframing
UI Design
Mockup
Prototyping
Timeline.
2020 - 2021
ASCD (Association for Supervision and Curriculum Development) is a non-profit organization founded in 1943 with the mission of providing tools for all educators including superintendents, teachers, principals, and professors.
The Challenge.
ASCD is regarded highly in the industry as a source with a long-standing history. It was in need of a refresh on the user flow and experience - especially with the updated ways education is taught in the recent years since Covid.
Goal.
User: Find material that supports their learning/teaching
Business: Increase engagement in existing users and bring in new users
The Research.
UX audit was performed on the existing site. A lot of content pages had been added over the years, cluttering the site and diluting the brand identity. This also resulted in the navigation being very confusing and frustrating to use - making it difficult for the user to get to the information they wanted. The brand started to see users leave for competitors that are much newer in the market.
UX Audit of Website
These were some questions we asked ourselves after the research to guide our design decisions
How do the users want to consume content? How do we want them to consume content?
How might we increase engagement with users so that they come back daily/weekly?
How can we most effectively onboard new members?
How can we grow the community?
How do we nurture brand loyalty?
Any new web tools/features that help educators learn?
How can we shape user habits so it benefits the business as well as the users’ learning goals?
Wireframe.
We started by creating a quick user flow of someone accessing an article, exploring the site, viewing the video material, and going through the subscription flow. In this process, we identified the crucial pages that needed to be explored.
Initial Wire Flow
We continued to build out the wireframes, diving deeper to address important features such as the navigation, consistency in design throughout, and introducing new tools to nurture users’ learning habits.
1. Navigation - Topics
The topics flow was something we put a lot of effort into making it easy to use. There are over 30 topics featured in ASCD and a lot of them very lengthy words. The previous navigation structure had ‘topics’ as the first item and featured the most viewed topics with a link out to all of the topics. This wasn’t a logical placement for the user as we want to place the most used navigation items first. Research showed that the users aren’t likely to look for material based on the topic, but rather select the type of content they are interested in (blog, books, publication, video, etc) and then narrow down the search to the topics.
Old Navigation style - Topic Flow
The new navigation has an updated hierarchy of grouping; Resources, Events, Services. In order to assist users when they do want to filter the material, we placed suggested filter guides in the search suggestions (search by: topic, grade, subject). This update allows for topics to be part of the search flow, which suites the users’ journey better - focusing on the content first.
New Navigation Style - Search & Topics
2. Events
ASCD holds a few big virtual events throughout the year and some smaller-scale events and webinars. The previous events page lacked design consistency - both from the rest of the ASCD site, but also within the event pages. This created friction and confusion for the user that stumbles upon these pages because of the drastic difference in appearance. The events pages also contained a lot of content without call-to-actions to indicate important next steps to the users.
Old Event Landing Page to details
To reduce the confusion on the events pages, we applied the updated design styles as well as adding visual hierarchy between each content blocks, including prominent buttons with each component to make scrolling through events pages easier.
New Events Components
3. Notes & Highlight
A new tool/feature we wanted to introduce to ASCD users was the ability to interact with the written content. ASCD’s users are used to consuming a lot of reading material on a daily basis.
We looked at existing competitors that offer ways of interacting with long form written content. A lot of them had simple options to save/bookmark the article. They had ways of highlighting blurbs, or leaving a comment to the author. We found that there was no way for the user to make the article their own as they read through it, like taking notes directly on the article, or share the exact place in the article to a friend.
Competitor review
Based on the findings from looking at competitors, we decided that in order to maximize the retention of the content for the users, we needed to explore ways to take notes and highlight the words, just like you would on paper.
The new notes introduces the ability to take notes and highlight text. Selecting a passage and holding it down will show the Notes/Highlight dialog. Selecting ‘Add note’ will slide open the Notes Sheet with the passage selected and a field below to fill out your note. When completed and saved, you can see the Notes Sheet with your notes and scroll through them. Closing out of the Notes Slider will show the passage highlighted with the passages numbered and the bottom ‘Notes’ Snackbar indicating how many notes have been made.
Highlighting is the same flow, selecting highlight on the Notes/Highlight dialog will highlight that passage. The highlight is a different color than a note so that it is easy to differentiate them. Selecting the highlighted passage again will allow you to edit/delete the highlight.
Notes and Highlights flow
Desktop view is an even easier experience, as the slides appear from the right you can view both the document and the notes created on the same view.
Notes and Highlights flow on Desktop view
The Notes are only available to users that are a member and saved in their profile - encouraging users to become members. The Notes/Highlight feature allows for a more sophisticated reading experience with ASCD and motivates the user to come back and continue to learn and interact with ASCD.
The Impact.
The clients were thrilled to be able to bring a new fresh look and user experience to the ASCD site. The ultimate goal was to create a better experience for the educators, to reduce friction for users trying to access relevant content and engage with the ASCD community. The update in the site will definitely encourage new and existing users to be more active members of the community.