Select Page

UI/UX Design

DIGITAL ANNUAL REPORTS

While working at Fabrik I worked on a number projects creating digital versions of the annual reports that were created in-house.

My Role

Research
UI & Visual Design
Wireframing & Prototyping
HTML & CSS

IDENTIFYING
THE PROBLEM

Each printed annual report contained around 150-200 pages. Generally they were broken up into halves, the first was an overview of the business year with the second half containing financial statements. The financial pages were made up primarily of tables that had accompanying notes associated with them.

How could the user more easily navigate this much information? Is there a way to make the tables easier to read? The primary objective was to build a responsive website, with the secondary objectives to make the large volumes of data easy for the user to navigate.

R

Competitor Analysis

R

Stakeholder Interviews

R

Research

APPROACHING
THE SOLUTION

Starting the research by completing a competitor analysis of annual report websites and the latest trends in web design. As well as researching the best practices on information architecture, sitemaps and website navigation. Wireframes were sketched and guerilla testing was completed by the design team using low-fi wireframes.

The visual design was decided by the printed report, so style guides were created to convert the printed design into UI elements. High-fi wireframes were built and prototypes were tested with a mixture of stakeholders and users. A hover effect was added to the rows in the financial tables, so that when the user hovers over the rows they change colour, this was to aid the user in reading across the multiple columns in the tables.

The secondary objectives spoke about the importance of wayfinding for the users. There is a primary navigation for each main section and a secondary side navigation when you are in the sections. Breadcrumbs were also included at the top of each page. 

Wayfinding buttons were included at the bottom of each page of the notes, so that the user could navigate back and forth through the 30-40 sections of notes. A mega menu is used to house the large number of options in the primary navigation on the top of the site. 

MEASURE IMPACT

We measured impact through usability testing sessions and website analytics.

Related Projects

A selection of related projects that I have worked on are shown below.