UX Design

User Interface

UX Design Report Mockup


This project was made to unite the Japanese culture, the Brazilian culture, and UX writing, and also to be a showcase of how we could help empower some ladies of a fictional UX team to gain some visibility.

They were from a UX writing team, in this fictional story they asked me to make a report because they saw and liked a lot the report that I made for some folks on a Social Media team.

This report also has a different disposition, a different grid, instead of the usual corporate grid, to emphasize that this UX writing team tried to be different.

Below we have their empathy map also showing what we were trying to achieve and the questions that were used to do this report as well.

Who is the user?
Employees interested in UX Writing updates.
  • What motivated the team to pursue a new interface project and unite Japanese and Brazilian cultures in UX writing?
  • How did the team arrive at the idea of using a manga-inspired grid for the new interface, and what was their thought process behind this choice?
  • Can you describe the team's emotional response to the project and the cultural and visual elements that influenced their enthusiasm?
  • Were there specific challenges or concerns that the team identified during the planning phase, especially related to hierarchical content organization?
  • Could you elaborate on what emotions the cultural and visual elements bring?
  • What achievements and positive outcomes it is possible to foresee, both in their professional roles and on a personal level, as a result of this project?
Based on the questions above and on other data gathered throughout, to better understand our project scope, it is possible to create the following empathy map:
An Empathy Map about this report for a UX Writing team
Figure 1: project's Empathy Map

Main idea regarding the structure, typefaces and colors.

Regarding the appearance of this report, the colors and typefaces represent the team of two ladies, Helena and Anna Julia. We used a different type of grid to create a visually appealing and dynamic report, which matches the topic.

The fonts used in this report are modern and easy to read. To make the report accessible to people with vision impairments, I chose fonts with good legibility and contrast, using a darker color for the text and a lighter color for the background. I used Inter as the headline font, a sans-serif font, and Montserrat for the main body of text.

There is an interesting and funny story about how we created this report. Helena and Anna Julia asked me to do the report, and as I'm a little bit of a comic book nerd, I brought them almost 15 kilos of comic books to show. It was raining day, and unfortunately, Anna Julia couldn't make it that day, so it was just Helena and me. We had a great conversation during which I shared my idea for the report, which was to use comics and the manga grid from One Punch Man. Helena and I were able to choose two sketches, and two versions of the interface that we could use for their report. We chose the one that is presented below. I thought this would be a useful way to display the information and communicate the report's main points.
UX Writing sketches 1
Figure 2: First sketches

Crazy-8 containing multiple text ornaments that could remind the idea of writing
My goal was to use manga and the manga grid to show the information in a unique and interesting way. I was inspired by the grids used in manga. I felt that manga grids could be used to effectively transmit the ideas in the report, which is essentially a meta-analysis of writing. This means that it is a work about writing, the act of writing, and the analysis of writing.

I also wanted to create a report that was joyful and visually appealing, reflecting the personalities of Helena and Anna Julia. I also wanted to create a report that was avant-garde and modern. I was hoping to bring awareness to the work of Helena and Anna Julia, as they had found my previous report to be very visual and appealing.
UX Writing sketches 2
Figure 3: Last crazy eights

Bottom: second from left to right, last from left to right were the two sketches chosen to be developed later.

Content of each section, shapes and forms, a more detailed perspective:

As I mentioned before, this report aims to bring together Japanese and Brazilian cultures in the world of UX writing.We are also analyzing the main character of One Punch Man's manga.

UX Report - interface

You can see that at the top of the report, there is a black and white wave pattern that looks like the sidewalk at Copacabana Beach in Rio de Janeiro. To the top right, you'll see a pattern that looks like the logo of São Paulo State, which is made up of lots of triangles and is pink to represent, in some way, our team of two women.

Above this, there is a black and white UX report that is written in a comic book style to make it more attention-grabbing and to raise awareness of the content. At the top of this banner or header, we show the month of the report, because this report was planned to be updated every month.

Below the header, there is an upside-down triangle with a picture of our persona. In the middle left section, we start describing the persona's characteristics, including their name, background (which is inspired by One Punch Man's Saitama, the one-punch hero), demographics, age, gender, occupation, goals, and motivations.

Underneath this, there is another geometric shape that takes up all the space below the two middle sections. This is where we outline the pain points, providing a summary and a pizza chart. The largest slice of the chart shows Saitama's goals and motivations, which far outweigh his pain points, as he is an overpowered superhero who finds life a bit boring because of his immense abilities.

Overall, the interface analysis shows that the geometric shapes take up all of the space in the report and that there is a sense of flow between the sections, even with the use of sharp geometric shapes.

Live Preview


Wrapping things up. This report was able to represent those two ladies and their craft and also to bring some influences that we are exposed here in Brazil, such as the Japanese culture and some regional cultures as well, such as the Rio de Janeiro culture represented in the beach sidewalk pattern, and also the Sao Paulo state represented in Sao Paulo State logo.

It was a very fun project to do because this grid was not a standard grid to do. And also it was not as corporate as someone might think because it was very different.

Thanks for your time. Thanks for listening and reading this case study..