Use Case
Over years of projects, our teams had fallen into habits where collaboration was not always at the forefront. This lead to developers and designers misunderstanding and even resenting one another. By creating rough wireframes, we were able to create a culture of collaboration by bringing the teams together to create rough sketches together. After documenting them, both developers and designers could focus on their tasks and later merge their outputs together. This solved both a cultural problem and increased velocity.
Challenges
- Derive a standard set of functional AEM components and page templates to
- Enable content creators to create and publish pages themselves, without having to rely on development colleagues
- Serve as starting points for content creators to add or subtract components when authoring new pages
- Improve the site information architecture by embedding taxonomical information in the components and templates
- Simplify content authoring through a plug-and-play model
- Offer content creators recommendations on what components and templates to use based on the situation
- Deliver instruction materials to Red Cross's content creators on best practices for leveraging the new components and templates, as well as teaching them how to move of visitors to and through the donation funnel
Method
- Identify basic content needs for a given page, based on previous research and existing page content
- Prioritize the content to provide a first level of layout hierarchy
- Leverage the component design system to create wireframes
UX Outcome
We created content-driven wireframe mockups that allowed developers and visual designers to work in parallel. The developers were able to code rough pages based on divisions and the previously designed component design system.