A fragment of the new Information Architecture.
The project for the organization The Arms Trade Treaty was complex and included the areas of the backends and communication improvements, conferences service support, web-based reporting and website redesign.
The target audience was the Secretariat and all State and Signatory Parties of ATT. The aim was to modernize and improve the Secretariat's work.
Team
The project was delivered by e-Durable SA (Switzerland) and Hycom S.A. (Poland).
My role
Lead UX Designer and focal point of contact for the teams based in Switzerland and Poland. I mainly concentrated on the website redesign part and supporting other areas.
Information Architecture
The previous website needed a new content organization altogether with new functionalities. Naturally, we started the process here. Due to the complexity, we decided on the hierarchical structure.
First, we did the content inventory and audit. Next, by sorting and prioritizing, the new Information Architecture was created. It was crucial to understanding the scope and the relation between modules, and to visualising the user's navigation paths.
Mobile version of the ATT home page designed in Axure.
Wireframes
This step was inevitable due to the volume of the screens and functionalities. I decided to use the low-fidelity mockups to focus on the navigation, user flow and functionalities. They were designed in Axure with the desktop first approach since it was a primary device used by the Secretariat and State Parties.
We did from one to two-three iterations, depending on the complexity. Luckily we had the Secretariat on-site, and they were incredibly open and communicative, giving feedback and precious suggestions as one of the end users.
The most challenging parts were the Annual and Initial Reports pages containing much information about submitted reports. We added graphs and filters to display a visual summary and allow reports search.
New home page on tablet device.
Visual Design
The visuals were kept fresh and light. The chosen styles were aligned with the current ATT logo, with tones of blue and grey.
The graphic designs were made in Adobe XD.
We were proud of the general outcome of a clean and well-structured portal.
Final thoughts
What I have learned from this project I could summarize in a few points:
Don't be afraid to engage end users in the whole project. The more they are engaged, the better chances are the final product will meet their needs.
The visuals, even simple wireframes, are crucial to designing and delivering a product that will meet the expectations and ideas of all parties involved in the project. And they save a lot of time too!
Whenever you can use the software or tools out of the box, use them instead of designing from scratch. The good ones usually require just small modifications for a better user experience.
+ 100
screens
2
international teams
+300
reports submitted online