ABOUT: I interned at Thingthing as a Visual Designer for 3 months. Over there I had the opportunity to work both on the visual and the UX design of their main product: a digital keyboard. Moreover the company was acquiring Fleksy, the fastest mobile keyboard on the market. Due to this big acquisition, the company had to combine the two products. This led me working on the creation of personas, user flows and scenarios in order to better understand the current users of both products. Moreover I collaborated on the creation of the main UI for the new product that merged the features of Thingthing keyboard with the great functionalities of Fleksy. This allowed me not only to work on the visual material for the rebranding but also on the main UX process in order to figure out which was the best design for the product. In doing so I created several low-fidelity paper prototypes and high-fidelity digital prototypes with Sketch App and Photoshop. Additionally, wireframes were used to show the main flow and how the design was changing through time due to user research and collection of feedback. In order to cut the frustration of switching between apps, the company was trying to implement a searching option between apps inside the keyboard itself. Since this concept was fairly new, together with the design team, I had the chance to brainstorm and experiment new ideas. The whole design process took several months and it is now visible on the app Fleksy.com
AIM: Killing the pain of switching between apps
This project is under NDA. The company was previously contacted in order to ask permission for the shared content. However, keep in mind that not all the background work can be published.
The showed material is the result of a collaborative effort of the Design Team. Additionally, all the company team members were involved in the general design process through information sharing, feedback, and suggestions. Please, read the ABOUT section to better understand my contribution to the project.
Visual Design Process
Following, the final outcome. These visual elements were created for marketing purposes.
The first banner is the image that the company was using to accompany their Facebook and Twitter posts. The focus was to provide the idea of a Keyboard as a Platform. Therefore, the most used and well-rated application (Calendar) was used as the main content.
The second one is a postcard that was used in a tech showroom event. Therefore, the aim of the postcard was to give a clear idea of what the product was, and to highlight every awards and honourable mentions received.
The third visual element is a banner used in a presentation event. The banner had to be big and each component had to be visible from far away. Anyway, a hierarchic structure was needed. Here the components that were requested to feature in the banner: Logo, Product, Slogan, Awards, Mentions, Link.
Note: The postcard and the banner were used in the same event. Therefore, the design language had to be the same.
UX Design Process
AIM: Create a searching option between apps inside the keyboard itself
User cases and user scenarios were used to identify the user needs. Based on that, it was also possible to understand which service was useful for the users.
Sketches and Wireframes were initially used for the brainstorming phase and to explore the early-stages of the design process.
User flows were studied in order to elaborate how the users would use a service. Additionally, it was essential to create a common and shared experience across all the services.
Higher fidelity prototypes were finally created in a digital version with Sketch App. Those were then used to pitch the idea to clients, investors and potential partners.
The following images show the mid/final stage of the process, where a template and a user flow were designed and then implemented as a trial for some services.
Note: The images have been shrunk, the quality had been lowered on purpose, and a carefully selection was done in order not to disclose too much information.
Following, the final stage of the design process. These images feature an high fidelity digital prototype of the product and were used to present the idea to possible partners.