Tad Blake-Weber, UXC | Portfolio

40 Indian Road | Waltham, MA 02451 | Email me

Home 9 Project 9 Mobile improvements for lecture information (2019)

“We need to be mobile first” — Mobile UI improvements for lecture information (2019)

Designed using Adobe XD and Chrome Inspector

Find a lecture accordion

The closed accordion above is the old design.


Closed accordion with chevron

The closed accordion above is the new design.


Accordion open with chevron

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?

The Design

  • 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.

Results

  • Calls/emails into our customer contact center dropped significantly — nearly 60%.