Platform for cryptoart.
Art_Value App is an online platform
where numerical art is created,
distributed and traded.
It uses blockchain technology to secure
the market as well as generate unique
With Art_Value numbers matter.
ART_VALUE is an enduring art project by
Das Vegas since 2009, consisting of
installations, interventions, artwork
production, critical designs, evocative
experiences, and interactions.
It all started by conducting workshops with the researchers from the KTH- Royal Institute of Technology, Stockholm University and RISE- Research Institutes of Sweden, by now it ended up at the KTH Innovation.
The main focus of the platform is to
engage users in generating digital art,
bid, buy and sell artworks while keeping
an extreme minimalist design. Users
would be immediately direct to the home
page where auctions (both generative and
traditional) are taking place.
Other features are a gallery of the artworks available, a calendar to keep track of upcoming auctions and a profile page to manage their private collection.
As mentioned above, the project was
based on workshops to understand what
art collectors, digital enthusiasts and
crypto devotee need in a platform to
create and share their artworks.
Interviews and surveys were used to define the features while user testing was the to go tool to implement the functionalities and for the iteration of the overall design process.
Esports streaming service.
Znipe's mission is to enhance the
viewing experience of esports fan,
engage audiences through an interactive
and personal interface that better suits
their viewing needs.
The constant development and creation of new features and ways to attrtact users is at the center of their journey.
Znipe provides the streaming technology to Riot Games' esports streaming platform "Pro View". The service distinguish itself from the competition by being a premium service, offering mutiple POV (Points of View) of different players at the same time, customize content, live stats and more.
As part of a UX Team, I was tasked to
generate and create new features and
functionalities for the streaming
platform "Pro View".
We wanted to give users more control on the broadcasting service like an audio toggle for in game communication between players, live chat with other viewers and private rooms to enjoy the show with their friends.
Another task was to focus on ideas and product proposals of customized content and services for ESL (Electronic Sports League) and their audience. The creation of a hub for Fanpass members (their season viewership subscription service), where users receive tailored feed based on set preferences.
The hub would provide a way to compare user in game stats with their favorite player, videos, compilations and highlights of their favorite team, a personalized schedule of matches not to miss and broadcast of pre game and post game interviews and panels.
Another goal was supporting the redesign and prototyping of Znipebase, the internal tool used by Znipe's operations team to broadcast esports events.
For the ideation of the new
functionalities in "Pro View" we started
by the requests of the current users
that were posted in specialized blogs
and threads offered by Riot Games.
Following that, a workshop was organized guided by the creation of Personas representing different types of users: an ambitious gamer, a super fan of a specific player, an esports analyst and an esports fanatic. The workshop held different activities such brain write, affinity diagram and post-it voting.
The ESL Fanpass product proposal was based on material and research given directly by ESL.
To redesign Znipebase, the tool used by
the team responsible for the broadcast,
extensive interviews and participatory
design techniques were put in place,
like contextual inquiry and hierarchical
All the design choices were then integrated in a functional prototype and repeated user testing was conducted.
Portable changing room.
The challenge at the Thefit. was to transform its 3d scanning technology into a simple and usable app for users to receive accurate recommendations on cloths size while shopping online.
TheFit. changes the online experience of
the future by powering personal,
relevant experiences for millions of
shoppers, bringing transparency to
consumers and data driven insights to
Users take two pictures, with any smartphone, according to instruction in a web app. Within one minute, a personal Body ID is created containing the users body measurements, which can be used online to shop the right size, made to measure products or for virtual fitting.
TheFit. has a mission to revolutionize the fashion industry and make it more sustainable to change the online experience of the future.
As a member of a UX Design team of two people, I was tasked with testing, researching and redesign the app in order to make it usable to users and match their needs before the launch of the beta scheduled in 4 weeks.
Immediately after having joined the
team, user testing proved that its
usability was still not as good as we
hoped for and therefore not yet ready to
No user was able to interact with the app to get the desired outcome due to several factors: instructions on how to use the app were not clear enough, the UI of the camera wasn't giving the correct affordances to how operate it correctly and users didn't know why to sign up to the service, how to access their profile and change their measurements.
After multiple rounds of redesign, prototyping and user testing, we were able to bring the app from an early prototype to a beta release for market.
[Discovery & Challenge]
As a team, the first thing that we jumped into was conducting usability testing paired with think aloud to understand how would users interact with the app and its breakpoints. We gave the task to 10 users to open the app, take a picture, find the recommended size and sign up to the service.
To our surprise, all users had difficulty in achieving these tasks and their goals during the testing or reported it in the debriefing session.
The pain points that emerged where the following:
- Inability to operate the camera.
- The recommended size was not matching their real size of clothes.
- Didn't see the value in signing up to the service.
Attention to instructions.
The first problem that we wanted to
tackle was users not receiving the right
This was due to the fact that the algorithm powering the camera was extremely precise and in order to obtain the best results it was necessary to follow specific instructions. Most users where skipping the instructions and jumping directly in the camera UI, so having more prominent instructions was necessary.
To solve this we designed a series of screen containing more direct and eye catching instructions and signifiers like "wear tight fitting clothes" and taking the picture from head to toes.
Affordances & Constrains.
The most prominent problem was that
users couldn't figure out how operate
the camera. The camera itself was not
allowing to shutter until specific
requirements where met like the perfect
vertical alignment of the device.
Most users were not aware of this and couldn't take a picture and, in case they took it, it was purely accidental.
Another recognized issue was that users, to try to keep the camera at waist level to capture a full head to toe picture, were most of the time bending their back and see through the phone from a prohibitive angle instead of just taking a knee or sit down, se we had to hint at that as well.
To avoid these situation it was designed
in camera UI, a level on the right side
to guide the vertical alignment and a
set of instructions to guide the users
in operating the camera.
Once the instructions where followed, the instruction would disappear and the shutter button would highlight in green to allow the picture to be taken.
Why should I sign up?
The last aspect of the app left to
address was onboarding the users on the
service and being able to communicate
why signing up was convenient.
The Fit. would have kept users measurements and sizes only if they would have sign up, otherwise each time that they would have want to use the service they would have gone through the same process again.
To solve this, we made the instructions on why signing up more prominent at the end of the process.
[Conclusion & Perspectives]
The redesign gradually adopted more
streamlined and direct instructions in
comparison with the original version of
Affordances and signifiers alongside constrains were applied to better guide the customers' user experience.
At the end of the 4 weeks limit time before the beta release of the app, all users tested were able to understand the instructions, operate the camera with confidence and aware of why was important to sign up to the service.
It was a race against time and we had to take our knowledge of methodology and bent it to the situation to come up with the best effort and result possible.
The Fit. would have kept users
measurements and sizes only if they
would have sign up, otherwise each time
that they would have want to use the
service they would have gone through the
same process again.
To solve this, we made the instructions on why signing up more prominent at the end of the process.
A new website building tool.
Weblify is a web design company based in Stockholm, Sweden. Its customers are mostly small to medium businesses that needed a refreshed online image and wanted to increase their funnel of visitors.
Dealing with a huge number of customers, Weblify was in need to find a way to streamline the production and optimize the team workflow. Components and assets that were used in the development of a websites were stored in a separate system that was difficult to access for the team.
The set goal was to create an easy and accessible database of these components, assets, template and sections that the production team was using more frequently to boost the process and at the same time offering new functionalities to improve the user experience.
As a UX Designer I was tasked to understand user's needs and workflow, come up with possible design solutions, prototype them and then implement them in collaboration with a Full Stack Developer.
After the initial research it became
clear that it was necessary to tailor
the experience based on the design
team's workflow and not just creating a
place where to store templates.
To convey this, we designed and developed a company plugin that allowed the team to access templates, components, sections, website demos, stock images alongside implementing elements of instrumental interaction in the ui to improve the usability and performance.
Reorganization of the components used to build websites, contextual menus, drag and drop features, filters, immediate access to stock images, automatic picture resizing, macro controls and global settings of sections, colors and fonts were integrated to improve the UX.
[Discovery & Challenge]
The production team main tool to create
websites was Elementor.
Elementor is a visual Web Builder plugin for WordPress that utilizes widgets to populate a web page with text and content.
During the research phase, techniques like critical interviews, cognitive walkthrough, shadowing and hierarchical task analysis have been adopted to gather data regarding the design team needs.
The results highlighted the major pain points for our production team to solve:
- High cognitive load of the UI.
- Repetitive tasks in the editing.
- Need to set up the workspace each time for a new website.
- Selection of stock images.
- Tweaking the images and resize them properly.
Persona & Affinity Diagram.
During the design process we gathered the data collected through the interviews and created Personas. Two personas and an extreme character where created to better lead the future design development, to reflect the different tasks of the production team and to guide us in identifying their needs.
A Web Designer, a Demo Designer and general user with no experience in Web Design.
An affinity diagram was used to brainstorm concepts and keywords, ideate possible solutions and bring to the surface different functionalities.
To implement our solutions as a team we created a Weblify Plugin through hooks in the code thanks to Elementor and WordPress' opensource nature.
A better UI and Media Section.
The first problem to solve was the high
cognitive load that the UI was asking to
As a first step we decided to declutter the interface and we reorganized the widgets’ side menu in contextual categories and removed all superfluous widgets that were not used by the production team.
As a second step, we focused on the
problems that were taking the most time
to our production team, like setting up
the workspace, the selection and
resizing of the images.
To solve these, it was designed and created a menu, called Media Section, where it was possible to access and filter all previous components created (sections, demos and subpages) and a tab that was grating access to stock images through an Api, in this way, our production team didn't have to navigate through multiple browser tabs (since everything was stored externally) and work directly into Elementor's interface.
As a last point, we made every container adjust the size of the image automatically so it was not necessary anymore to resize them manually.
Another need of our user was to have a
solution to the repetitive tasks during
the editing of a website.
Whenever a client asked for a change in the design the production team had to change it, and most of the time it involved the color of buttons, the font and the selected images.
All these tasks are repetitive through out the website since you had to change them each one singularly.
To avoid the repetition it was designed
and developed a menu of macro controls
in which the production team member
could enter a specific parameter for an
item and it will automatically change
the other items in the same category
Users can select directly all the font types based on content, can apply color to all the same type of items and populate the website with images based on keywords input.
One final step that we took, was to try
to automate the demo process, so our
demo designers could create fast designs
to present to clients.
Immediately after entering the workspace, the users would already have the basic sections and components uploaded and they can decide which type of section or component add to the demo from a side menu.
It was also possible to retrieve content from other's website URL if the client already had a website.
This final outcome, paired with macro controls made the creation of demos and websites extremely fast and effortless.
[Conclusion & Perspectives]
These solutions became Weblify's backbone, the Media Section and Demo Generator are considered the most valuable assets for the company’s production.
Is again important to underline how the research conducted in the early stages was decisive for the development. A deep understanding of the user’s workflow led to the discovery of multiple tasks that could have been automated and taht did not require constant attention for the Demo Designer team and the Production team.
This led to a more organized workflow,
improvement in performance and higher
satisfaction in interacting with the
Design and development of a website dropped from an average of 3 working days to 1 and demo acceptance rate from clients remained unaltered.
Various projects carried out during the years.
Prototype of a e-learning software
created for the EU vs Virus hackathon. A
simple app for online teaching that
provides a conference call tool, a
shared file editor and a file management
system. The idea is a much needed answer
to the struggles that arise from
Most teachers have to learn and struggles how to teach through a platform made for conference calls and not suited for teaching activities.
During my education at Université of
Paris Saclay, we were tasked with
creating some small interactive
experiences using augmented reality.
The first project created was a small game to learn the basic musical notes on a virtual piano. The interface would prompt a note and the player was supposed press the correct key.
The second project was an interactive
exploration game of different cultures
around the world. The player was able to
control a small spaceship through the
use of a marker and free to explore a
projected representation of the earth.
Once a point of interest on the surface
was found, it was possible to play a
small video showcasing the local culture
of the selected region.
The games were all developed in c++, alongside a phone with AR capabilities in a cardboard head mounted device, printed markers and the vuforia toolkit.
Interactive fishing game developed
during a lab project in haptics, tactile
and tangible interaction at the Royal
Institute of Technology (KTH) in
The concept was to in interact with the Novint Falcon, an haptic cotroller, to simulate the activity of fishing. The goal was to guess the size of the fish caught (small, medium, large), based on the force applied by the haptic device.
The game was developed enirely in c++. At the end of each testing section a small survey was submitted to determine if the experience was satisfying and to match the answers given by participants with the system logs about the size of the fish.
Small collection of different user
interface designs created for practice
The interfaces have been created with different devices in mind to showcase.
All the presented material have been made using Adobe XD and Adobe Photoshop.