A walkthrough of the redesigned and redeveloped AMBOSS in beta, captured 7 February 2019. A question is shown on its own, then with accompanying articles with tooltips, the media viewer, and different highlighting options.

AMBOSS v2

The team had spent more than 4 years building AMBOSS before I joined them, and not long after we released the media viewer they’d discovered the value in design-guided planning and a more disciplined approach to building the web UI. As the business needed more and more out of a codebase that hadn’t been informed by research or design, nor built to scale, the team was eager to put their new values in practice, so we embarked on a redesign.

A collection of screen captures of an article in AMBOSS before the redesign. Anecdotes from focus groups, the only form of research available to us, indicated issues with: 1) icons with unclear purpose and mixed functionality in the upper-right corner (before scrolling down), 2) an inconsistent visual hierarchy, 3) inefficient use of space, 4) and a fixed-width design which only worked on laptops and desktops. In the redesign we aimed to improve all of these points and more.

A long journey, put briefly

I had built a prototype that we used to build consensus around this redesign, which prioritized a single source of truth for the visual design, took a mobile-first component-based approach, and could be fully rendered on both the server and in-browser. This demonstrated to our team that the technical obstacles blocking solutions to user feedback were solvable.

Our first mockup prototypes for the new AMBOSS sought to unify certain groups of functionally similar but otherwise unrelated features into thematically coherent interaction designs, e.g. the “lists” design shown here. The aim was to reduce the engineering cost of redeveloping these features by reducing “snowflakes”.

After hiring a senior frontender to lead the technical side of the UI, I transitioned to the lead UX design role in which capacity I hired three other designers and one user researcher. We worked closely with our agile coach and newly appointed product owners as well as with the growing engineering team over the following 18 months to redesign and rebuild AMBOSS to be substantially more maintainable, iterable, user-friendly, and ready for the world than ever.

Equipped with the body of feedback we’d received from users, I began working with business leaders to establish the system of user stories underlying the functionality to be released in the redesign. Meanwhile, a colleague developed style tiles which would guide the visual design.

A selection of wireframes and statecharts which were used as the foundation for later higher-fidelity designs

We prioritized creating and maintaining a visual design system which binds the didactic content and the app chrome together in related, tangible layers, revealing the content’s structure to the user through clear visual hierarchies. The layout was carefully considered to use similar patterns for similar functionality throughout the app’s broad range of content experiences, meanwhile scaling those patterns to fit any content on any size viewport.

Some of our final designs, as delivered on Zeplin here, stress-testing the modular layout we’d created to facilitate multitasking.

NEXT is easier to navigate than legacy; the overview of the page is clear so people know where to go.

…The acceptance of NEXT is very high, mostly due to a combination of the improved navigation and improved clarity/overview.

…The new design works more up-to-date with the times and gives AMBOSS a fresh and contemporary feel.

Our user research efforts’ positive findings indicated the redesign was definitely worthwhile, and its negative findings were excellent opportunities to iterate on the existing designs. We were pleased to see that after more than a year of hard work, our efforts had lived up to our expectations and confirmed many of our design hypotheses.