dias normais

Role: UX/UI Design

  • Clark

    Clark

    Mockups completed as part of the hiring process for the Sr. Product Designer at Clark.

    Bedarfscheck

    Insurance Details

    Solutions

  • Bigland Monitor

    Bigland Monitor

    Client:
    Bigland    		Type:
    Web App, Software as a Service    		Year:
    2019

    Contributed with information architecture and visual design for a human resources / recruiting app.

    Bigland Monitor Cover
  • Carro Fácil

    Carro Fácil

    Client:
    Porto Seguro    		Type:
    Mobile App, Subscription    		Year:
    2018

  • Service Provider App

    Service Provider App

    Through the past year I’ve been commissioned to create a series user interface designs for a Porto Seguro Faz’s internal apps.

    While most of my time was dedicated on supporting the existing features in the current app, like fixing some quirks and tweaking the flow to improve the user experience, I did find some time to rethink the entire interface. That’s because the existing one didn’t follow most, if any, of the Material Design principles.

    I’d spent a couple dozen hours browsing the documentation, reading the guidelines, testing and experimenting with the available UI libraries. I swi! through many apps on the Play Store, downloaded dozens for reference and created many more mockups.

    Anyways, my first challenge probably coming up with these new designs was to refine the user experience without adding new current features or displaying information that wasn’t already available.

    Web App

    While analyzing the existing screens and designing the new ones I was constantly confronted with the Material way of organizing stuff, prioritizing information and hiding superfluous chrome from the user, which onto itself was very interesting to do.

    Material Design Principles

    Making use of the Material Floating Action Button (FAB) to highlight the primary action.

    What’s interesting about these projects is that neither had made good use of Material Design principles even though they targeted Android devices. Designers whom I’ve talked to also seemed to ignore some of the basic stuff and even out of the apps I’ve downloaded for reference, few of them had a well designed user interface.

    For example, in another project I’d worked with in 2017, this time for Prombox — a financial management product for undergraduate students – and we’d been using a Material design CSS library with dozens of components, good documentation and somewhat well- organized code. Nevertheless, we failed to build a consistent, throughly thought out experience.

    Many of available components weren’t really optimized for mobile devices and primary actions not well defined that led to a degraded user experience overall. The visual result was good enough but usability wasn’t on par.

    Eventually, I le! the project but I’d still pitch a redesign which featured a stripped down interface progressive disclosed information. Admittedly, a more fitting approach when designing for small screens.

    Tabs shows different views of a selected item and cards displays only the most important information.

    For me, the best part while making these projects was dealing with the screen size restrictions which really limit what you can do on a handheld device but once you get the hang of it really make things easier and straightforward to use.

    In conclusion, I’d guess that even though there has been some time since these guidelines were published by Google it seems there’s a lot yet to come in terms of applying and popularizing these principles.

  • Porto Seguro Faz

    Porto Seguro Faz

    One of the most important projects I was involved with at Porto Seguro Faz was the redesign of their e-commerce website. Unfortunately some of the early sketches and wireframes are missing, hopefully, I will update this post with new material soon.

    The goal of the redesign was to give costumers sufficient information about the offered services such as availability, price and any important small print leading to a correct purchase.

    Landing
    Service details
    Checkout

    Early design proposal for the product page which featured some high-density information through the page. A brief description at the top highlighted the given service for quick reading. Content was grouped and formatted to include rich media and links for additional info

    Fast-forward a couple of months, customer service interviews and research helped restructure and refine many of the content blocks of the page, moving down less important info and highlighting some of the most important ones.

    Many of these changes went through a testing phase during which I setup A/B experiments to understand if the proposed changes would actually improve the product conversion rates.

    Lastly, transactional emails were updated to better reflect the new visual design language, to prevent misinformation, recurrent customer services, and unneeded inquirers.

    Email redesign showing all available information about the requested service order.

    There were a handful of ideas, proposals, and experiments that didn’t see the light of the day, though. All in all, this a really good experience, particularly when some A/B experiments didn’t turn out the way the team expected.

  • Wine.com.br Mobile

    Wine.com.br Mobile

    How a new mobile website improved the user experience and increased conversion rates.

    Summary

    Client:
    Wine.com.br    		Categories:
    Wine, Consumer, Retail, E-commerce, B2B    		Year:
    2014
    Duration
    6 months    		My Role:
    UX/UI design, front-end development, CSS, HTML, and JavaScript.

    Background

    At Wine.com.br, we’d known for some time that the store’s mobile traffic had increased day after day, sitting roughly at 25% of the total traffic at the time. On the other hand the mobile e-commerce conversion rate was lagging behind of what was expected, well below the measured for customers coming from desktop or tablets.

    Admittedly, our mobile shopping experience was broken. I mean, it suffered big performance and usability issues because of our desktop website which didn’t support responsive layouts which required the user to pan and zoom to navigate whilst we had to support old browsers such as IE7/8, thus hurting page load times.

    The goal was to improve customer engagement with a more thoughtful design and blazing fast loading times.

    The Process

    With that prospect in mind I started to sketch some pages and built a rough but useful paper prototype which helped me get sense of the device.

    Cardboard iPhone mockup and sheets of paper.

    Another cool thing I made was a couple of storyboards. At first they seemed a little silly — they featured some cartoonish star-shaped human figures — but after a while I realized they were excellent on bringing light to some of the context in which the mobile website could be used.

    A quirky storyboard depicting an use case for Wine’s mobile website.

    After some consideration I moved on to Axure RP to make some diagrams and draw the wireframes with a bit more of fidelity, perhaps adding some interactivity to make things swift and understandable for both developers and managers.

    I’ve already used the software a couple of times by then and though it would be a no-brainer but the reality was that Axure seemed too complicated this time. I needed something with higher fidelity but still lightweight, which would allow me to mock pages with variable content, not just “Lorem ipsum” all over the place. Gosh, I hate Lorem ipsum!

    So what I finally did was to build a live prototype using HTML, CSS and a handful of PHP and JavaScript functions to jumpstart the development, cutting off unnecessary Photoshop/Fireworks layout comps altogether. I worked closely with my colleague Hideki Katsumoto to pick the right colors, fonts, sizes and spacing for all page elements.

    The project was well received by the stakeholders and was given the green light. From that on, we can easily reassess the pain points in the customer’s journey, tweaking and refining when necessary.

    Diving into CSS and HTML

    Fortunately, we were able to push some great improvements to our front-end workflow. To begin with, we ditched the monolithic, conventional way of doing CSS with a modular, component-based, BEM-like architecture that gave us more control over our style sheets, improving overall performance and maintainability.

    .OffCanvas {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.OffCanvas-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
}

.OffCanvas-sidebar--primary { ... }
.OffCanvas-sidebar--secondary { ... }

.OffCanvas-content { ... }

.OffCanvas.is-menuOpened .OffCanvas-sidebar--primary,
.OffCanvas.is-cartOpened .OffCanvas-sidebar--secondary {
  visibility: visible;
}
.OffCanvas.is-menuOpened .OffCanvas-sidebar--secondary,
.OffCanvas.is-cartOpened .OffCanvas-sidebar--primary { ... }

    The naming convention is heavily inspired by Nicolas Gallagher’s work with some minor additions. To glue everything together we choose LESS as our CSS preprocessor and Grunt as the task manager.

    The process also included the creation of image sprites, icon fonts, touch icons, retina images and so on.

    Results

    The CSS work and development efforts to cut JavaScript footprint combined resulted in page load times twice as fast as the desktop version and a 25% increase in the e-commerce conversion rate over the previous months.

    Desktop website
    Mobile website
  • Trajetos+

    Trajetos+

    A person holding an iPhone displaying a mockup of the Trajetos app.

    Using public transportation in a city new to you? With Trajetos you get off the bus at the right spot whilst learning about surrounding places of interest.

    Summary

    Kind:
    Graduation Project    		Keywords:
    Transit, Information Architecture, Wayfinding, Geolocation    		Year:
    2012
    Duration:
    one year.    		My Role:
    Research, UI/UX Design, Programming, Video Production

    Challenge: The lack of easily accessible public transportation information challenged me to explore how people perceive and navigate in the city, and also to create a research-based mobile app to help people reach their destination.

    As a person who likes to travel a lot and who primarily gets around in the bus, I started to notice many shortcomings in the way mapping tools and services like Google Maps work and the way ordinary people understand, communicate and locate themselves in the urban space.

    Here I present some highlights of the research, reference material, and the creative process to design and code the app concept prototype.

    Background and Inspiration

    I became interested in researching public transportation, transit information, wayfinding and urban planning sometime around the end of my graduation.

    The project started with a literature research on the various methods for understanding and making sense of cities and resulted in the prototyping of a web app for mobile devices.

    Ultimately, the inspiration for this project came from the general lack of mass transit information and the fact that. to this day, many people in my hometown Vitória, and in many places in the world, use landmarks as the main part when asking for directions.

    Beirut’s first street atlas

    Similar to Vitória, people in the city of Beirut also use common knowledge such as landmarks to navigate and find their destination.

    Literature Research

    In the book The Image of the City, Kevin Lynch lists five distinct urban elements which are fundamental to how the urban environment is observed and understood:

    • paths — the streets, sidewalks, trails, and other channels in which people travel;
    • edges — perceived boundaries such as walls, buildings, and shorelines;
    • districts — relatively large sections of the city distinguished by some identity or character;
    • nodes — focal points, intersections or loci;
    • landmarks — readily identifiable objects which serve as external reference points.

    These elements created the foundation I used to develop the app. Later in the book, Lynch would describe their importance for developing some orientation strategies:

    In the orientation process, the strategic link is the image of the environment, the generalist mental image of the exterior world held by the subject. This image is the product of the immediate perception and past experienced memories.

    Kevin Lynch, 1980

    At the same time, I began walking and riding on some unusual bus lines in Vitória, taking quick notes and listing some of the features and landmarks that caught my attention the most. Of course, trying to see your hometown with new eyes is somewhat difficult, but an important exercise to make.

    Different streets, neighborhoods, and landmarks provide unique visual cues used as affordances for urban explorers.

    Another important aspect during my research was understanding how people process and express geospatial concepts in their own way.

    Much of the details that exist in our physical environment are compressed and abstracted away. One’s visual representation when giving directions resembles more a diagram than a cartographic map. Gone are details like precise street angles, shapes and distances. In place, there are lines intersecting at forty five, sixty, and 90 degrees. The London tube map, for example, is a rational, abstract representation of a system that favors legibility and information density to physical accuracy.

    A loose comparison between the London tube map and a simplified map of the city of Vitória.

    Aris Venetikidis explained exactly this train of thought during his talk at the 2012 TEDxDublin conference, a comprehensive case study for making sense of maps.

    Making Sense of Maps

    Either way, that’s to say that both detailed maps and schematics are abstract representations of our reality but each one favoring an aspect they want to focus on.

    Design

    Moving on, I started working on the design of the app itself and a requirement I did settle with early on was that this app had to run on mobile browsers.

    I tried many different concepts for how to display transit itinerary while also aggregating other type of media and information. Some ideas were borrowed from apps like now defunct Path, Google Maps, Foursquare, and other timeline-driven apps.

    Working in some early designs, sketching on paper was crucial to iterate quickly.

    Low fidelity wireframes showing the app main timeline interface, as well as some of the itinerary information, including landmarks, icons, and street names.

    Additionally, to support the development and testing of the prototype, I mapped the complete route of a couple different bus lines, including the popular 164 line connecting the Forte São João and Jardim Camburi neighborhoods in Vitória.

    Speaking of bus routes, all public transportation data I needed for this project, such as bus stops locations, line names, etc, wasn’t readily available through some kind of API, so I had to scrape those from the city’s restrictive transit website, making the whole process a lot more complex to begin with.

    Development

    The app works by tapping into the user’s smartphone location data and placing it in a timeline-like interface which lists the next bus stops, road names, points of interest and street view level images. The user can also open a map to get a higher level view of the bus route.

    This switching of abstraction on information systems has been also present in the work of Bret Victor on the essay Up and Down the Ladder of Abstraction.

    How do we explore? If you move to a new city, you might learn the territory by walking around. Or you might peruse a map. But far more effective than either is both together — a street-level experience with higher-level guidance. Likewise, the most powerful way to gain insight into a system is by moving between levels of abstraction. […]

    Bret Victor, October 2011

    Much effort was put into making sure the experience using the app was fast and fluid. To achieve this, I used CSS transitions to smoothly move the timeline items from one place to another.

    The prototype made heavy use of JavaScript, the Zepto.js framework, and the Google Maps API, for measuring distances, displaying route information, and retrieving the user’s device current location. There was also some PHP involved to help streamline the process of fetching and parsing the data.

    End Result

    Using public transportation in a city new to you? With the Trajetos app you get off the bus at the right spot whilst learning about surrounding places of interest. It works on the browser so you don’t have to download anything!

    “It’s like Google Maps’ directions but for riding the bus with ease.“

    View landmarks, points of interest, photos, route information, and never get off the bus in the wrong stop ever again!

    Finally, I created a small videoclip to illustrate a common use case o the app. In the video, a man uses the app to be notified when he’s about to reach his destination.

    Trajetos – Itinerários de ônibus com pontos de referência

    Final Thoughts

    The code for the Trajetos app prototype is available on Github. Fork it or download the corresponding research paper (PDF, Portuguese only).

  • Localizador de Amigos

    Localizador de Amigos

    Friend Compass, or Localizador de Amigos in Portuguese, helps you to meet new people interested in the same things you are. It tracks your location and shows a list of tags you can use to filter people nearby.

    This project was part of the Multimídia II class, during my Industrial Design undergraduate course and it’s worth noting that this project dates back from the year 2008.

    At the time almost no one had a smartphone. In fact, I’d seen an iPhone in person once. The main resource available was screenshots found on the internet, basically. This was even before Google debuted its Latitude app. Nonetheless, geolocation apps were a thing and something I was interested about.

    So in the summer of 2009 I spoke at Campus Party Brasil’s CP Labs panel to a group of curious and investors about the app with some interesting reactions about user privacy and creating the business. It was a very nice experience indeed.

    Video of one of the usability test sessions, in Portuguese.