Case Study | Press News Feed Platform
AES Brasil operates in Brazilian electricity sector with generation, commercialization and distribution of energy companies. Serves 7.97 million customers in 142 cities in South and Southeast regions with a workforce of 8 thousand employees.
GOAL
The goal of the platform was to stand as the official press news feed of all AES Brasil operations. The sponsor necessity was to centralize all its communication fronts in just one place on the internet, where the national press — which is the main public, could easily find the latest news about energy issues of the country.
CHALLENGE
We were a small team of 4 warriors: a Product Manager, a Web Developer, a User Interface Designer and me as User Experience Designer. Because of a limitation of budget, we couldn’t run any user interview before the ideation process. Besides that, we were working in an Digital Agency that was not practicing any Agile Methodology, so, collaboration was not so clear for all the members of the team and even less for the client. At this point, co creation was just a sweet dream for me.
PROCESS
With a bound of methodology resources, the project manager and I used the kickoff meeting with the customers to capture all information as possible about the different users of the new platform and their main purpose. With all the insights that we could catch, I crossed the data with a large investigative benchmarking research and started to organize all the informations that are necessary to ideate some interface possibilities.
At this stage, I used Axure RP to design sitemaps, flows and a navigable prototype of the sollution and uses these artifacts to validate ideas with the client running a process of iteration that lasted a couple of weeks.
After that, we are ready to refine and think about the visual language of the platform. So, I literally sit next to the User Interface Designer and we worked together to define some paths to follow like colors, typography, grids, cards and icons that would help to communicate some essential functionalities already detailed in the low fidelity prototype. And, in a few weeks, the "Sala Energia de Imprensa" was coming to life…
PROPOSED SOLUTION
Colors
The pallete was designed mixing all colors from the AES Brasil Brand Guide. Although the vast range of colors, the focus was to popup the primary ones, while secondaries differentiates areas of the portal.
Typography
Only the Source Sans Pro free Google Font was used in the project. Almost all its variations were applied over the interface. This specific family was chosen due to the similarity with Bliss, wich is the official brand font.
Grid
A simple 15-column grid with a 20px gutter was built to fit in the only 1280px desktop version required (yes, we talked about a responsive version, but in order to best attend the main public the sponsor decided to make an app version). This construction provides diverse card composition possibilities, with up 5 columns of content.
Cards
The cards are the principal visual appeal of this portal, we use them to differentiate distinct areas of subject by colors, icons and composition types. They are fixed-sized in order to maintain a good alignment and are spread all over the interface as call to actions for relevant content.
Advanced Search
Due to the amount of content and several news categories, an advanced search engine was created to improve the "looking for articles" experience. The user can search into selected subcategories, time period and/or keywords. In addition, the color and icon schemes are also applied here to maintain visual consistency.
Style Guide
In order to provide an accurate visual consistency trhoughout the project screens, a simple style guide was created with the Basic Design Rules — well, in early 2015 we had not been introduced to Zeplin yet,or Design Systemns as well, so we tried to find a way to make the life of our developers easy☺. Anyway, this document was very useful for the Web Developer in our team because he could fastly identify the specs for fonts, colors, rollovers, forms and more.
With all Basic Design Rules set, it was possible to materialize interfaces for all the flows in the platform.
LESSONS
As well as the efforts and nice relationship between the Project Manager, the client and me - that helped the team to minimally understand the purpose of the project and the great importance of the platform to end users, this close relationship between the UI Designer and the UX Designer was decisive for the harmony between what was desired by the client, designed by me and the final materialization of the interfaces by both UI Designer and Web Developer.
So we learn, that even when you couldn't run Agile or Lean UX Methodologies with all their practices, a good communication among all team members is always the right way for the job success. As a User Experience Designer I often talk a lot with everyone involved in my projects and I believe this is the secret that make things possible to identify, discuss and solve the most diverse problems quickly and consistently.
NEXT STEPS
After the delivery of Sala Energia de Imprensa by the team, the sponsor was so happy with the results that our Digital Agency was hired by AES Brasil to design the iOS and Android app solution for this platform and another two different projetcs for the company. Besides that, Sala Energia de Imprensa is alive and fully working until nowadays, as you can see at this link.
Do you like this? Please, feel free to leave comments or suggestions so I can improve myself as a human being and, in consequence, as a Designer. 😊
You can also email me at anataliafranciele@gmail.com or connect via LinkedIn. I’m always open (and curious) to meet and talk to other people.
Thanks for passing by!
🙏
P.S.: Sorry for the grammatical errors, I’m a Brazilian trying to practice writing in English.
