Background
The desktop application could be divided into three main sections; A:Additional Clauses B:Clause Examples, and C: Core Elements. In the section 'C', the 'paw' icons appear next to some clauses that are able to be replaced with other clauses. Once replaceable clauses are clicked, Section 'A' displays additional clauses that are available for the clicked clause. When each additional clause is clicked, Section'B' displays the examples.
Since the app is text heavy, I was challenged by the limited screen real estate.
Approach
Exploring navigation options to display the required information.
The winner was Behaviour #1. It displays all 3 sections upfront, and no swipe was require to browse to see all 3 sections.
Wireframe
Design

You may also like

Back to Top