“We need to be mobile first” — Mobile UI improvements for lecture information (2019)
Designed using Adobe XD and Chrome Inspector
The closed accordion above is the old design.
The closed accordion above is the new design.
The open accordion above is the new design.
Context and the problem
- On mobile it wasn’t clear to users that something was an accordion
- What could be visually done to help indicate to users that the accordion could be opened and closed?
- We wanted to bring the closed accordion inline with the design of our accordions used elsewhere on the site by removing the plus sign and adding a chevron.
- I also had the accordion change color when opened — helping users understand something changed.
- We also felt it would help users to know they could then look for more information.
- Calls/emails into our customer contact center dropped significantly — nearly 60%.