Art_Value
Platform for cryptoart.
[Project]
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
artworks.
With Art_Value numbers matter.
[Background]
ART_VALUE is an enduring art project by
Das Vegas since 2009, consisting of
performances, exhibitions,
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.
[Goal]
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.
[Methodology]
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.
Znipe
Esports streaming service.
[Project]
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.
[Background]
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.
[Goal]
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.
[Methodology]
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
task analysis.
All the design choices were then
integrated in a functional prototype and
repeated user testing was conducted.
TheFit
Portable changing room.
[Project]
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
businesses.
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.
[Role]
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.
[Summary]
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
launch.
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.
[Solution]
Attention to instructions.
The first problem that we wanted to
tackle was users not receiving the right
clothes size.
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
the app.
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.
Weblify
A new website building tool.
[Project]
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.
[Role]
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.
[Summary]
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.
[Solution]
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
the users.
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.
Macro Controls.
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
accordingly.
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.
Demo Generator.
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
software.
Design and development of a website
dropped from an average of 3 working
days to 1 and demo acceptance rate from
clients remained unaltered.
Miscellaneous
Various projects carried out during the years.
[Weeklass]
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
teaching online.
Most teachers have to learn and
struggles how to teach through a
platform made for conference calls and
not suited for teaching activities.
[AR Piano]
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.
[AR exploration]
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.
[Haptics]
Interactive fishing game developed
during a lab project in haptics, tactile
and tangible interaction at the Royal
Institute of Technology (KTH) in
Stockholm, Sweden.
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.
[UI Designs]
Small collection of different user
interface designs created for practice
purposes.
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.
