State Gazette

UI, UX

Design Team

José María Armendariz
Mariana Macías

The Official State Gazette and State Norms Library is a website made for the public consultation of the rules and statutes of the state of Aguascalientes.
Talking with the legal area in charge of updating this library, they wanted to make it a mobile app for consultation.
As a first option we made a proposal to redesign the website according to the new design guidelines made by the State, keeping the same functionality and make the right configurations in the structure to be responsive.

Official State Gazette, original website & redesign proposal

Main page from Official State Gazette. The whole site uses Bootstrap 3 framework, recently they've been working on a redesign for the entire site, using frameworks like Vue.js and Bootstrap 5.

The page works on desktop sizes higher than 992px wide. Some of the search options overlap in lower size screens. So, we also had to think about the redesign with a mobile perspective and functionality.

Screen at 991px wide.

Main Official State Gazette redesign proposal.

The first redesign proposal was based on the new design guidelines, such as fonts and colors.
The page would be divided in three sections. Header, search tools and information about the Official State Gazette and it's procedures for new norms.

For the search tools, we made a tabed section, so we could have multiple types of search without having the problem of overlapping with each other, also making it functional for a mobile screen.

After presenting the redesign proposal, our client made the suggestion to make an app. We were aware that it would be an app used by a certain kind of user.

App Design

Fortunately, most of the architecture was solved in the website redesign, so we just had to figure out which Android and iOS components would be convenient to use, and also talk with the developers to get the services that manage all the information displayed in the State Gazette.

Mini Design System: Setting the styles.

Based on Android's Material Design and iOS Apple Design Resources, we selected the components to set the search tools and sections that would be needed inside the app.
We made a mini design system, creating new components, but also reusing the ones that where set in the general Aguascalientes State Design System.

Just as in the proposal of the responsive design, we would use tabs to organize sections, a main screen to describe the use of the tools, the POE tool, Normateca tool, and contact tab of the agencies in charge of managing the State Gazette information.

The search tools would be gathered in a secondary tab menu.
The results of each search are displayed under the tool as an infinite scroll list. Each list item would open a PDF file, and sometimes a file is linked to multiple results but direct to a certain page.

The project is up at the App Store and Google Play Store