I helped a booming startup in the hotel industry switch to a mobile-first approach of their product. Check how hotels can make custom mobile apps for their guests.
Is it possible to predict the results of a political election by harnessing the power of AI through analyzing posts on social media? Social media provides good opportunities to collect data and understand social and cultural trends. How can these data enrich traditional research methods? I helped visualize an innovative research that examines the relationship between Twitter activity and election results in an Italian region.
Together with the client, we implemented a web-based platform to display and interact with data and insights coming from a pilot research, which explored the potential of social media data to monitor and predict electoral behavior. My project deliverables consisted of a responsive web experience, data-visualizations and a visual brand identity for the project.
Visit WebsiteThe main outcome of this project is a web experience, where the results of this research project are presented. I designed (Figma) and developed (WordPress – Divi) the website together with another designer. It was a challenge to design in a language that’s not familiar to me (Italian), so quite some effort was put in alignment and mutual understanding of how the content could best be presented.
The research was presented trough several graphs that explain the results of the quantitative social media analysis. I designed 18 data visualizations, that aim at displaying “dry” data in an engaging and understandable way.
As there was no visual identity of the project yet, I started from scratch. Based on several brand keywords, I developed a style guide that can be used to align all visual elements of the project. Typography, colour and styles are the visual building blocks used in the data visualizations and website.
My role in this design process was of the UX + Data Designer, where I joined after the Social Media Analysis was conducted and finalized already. Below I use the visualization of the Double Diamond to show wherein the process certain tools or methods were used.
This first step in the process was to generate ideas on how to visualize the data and how to best present it in a web experience. I value sketching as ideation method as it allows me to come up with ideas freely and communicate them with stakeholders.
Although the size of this web experience is relatively small, making a sitemap helps to structure the content and define a navigational flow. The main focus of this experience is on the research outcomes, so the other pages are merely introductory and extra information.
Wireframing helps to define the structure of the experience, without losing focus on the visual details. By roughly building the website in text-blocks and grey ‘place-holder’ blocks, the experience starts to take shape and it becomes clear where and what kind of visuals are needed. The client gave feedback and certain changes were made to enhance the experience.
After the wireframes set the structure, the content needed to be developed. 18 graphs were visualized following the visual foundation of the style-guide I made previously. Below you can find some examples of rough data visualizations on the left and the redesigned versions on the right.
With the data visualizations finished, it was time to fill in the last content of the website. Illustrations were chosen to soften and humanize the ‘computational vibe’ in the content. By adding color, typography, shadows, illustrations and data visualizations, the wireframes were transformed to the final User Interface.
After some client feedback and iterations in the final design, the static designs in Figma were developed into a real web experience using Divi, a WordPress builder. Several animations and transitions were implemented to give the experience a more lively touch.
A selection of Service Design, UX and UI projects.
