PORTIS
Product Design
Portis is a blockchain wallet that makes apps simple for everyone. My role as the Product Designer of the company included re-designing the landing page, designing an app store and Portis' design system, as part of ownership of the whole company's design. Some of my responsibilities were designing flows for sign-up and verification, customer support system and conducting surveys. As a former Motion Designer I also carried out animations and videos when needed.
The site is online here:
OBJECTIVE
Portis' main audience are app developers since they are the entry point for integration. They should quickly understand the value of using Portis so that they can decide if they want to integrate it in their app.
RESEARCH
The former website was designed when Portis' audience were both developers and users, so there were 2 landing pages: the main landing page was in a language that anyone could understand, and developers could reach their landing page through the top menu.
Research showed that this was confusing to some of the developers, that didn't reach the developer landing page and searched for information relevant to them in the main landing page, which wasn't very informative to them. Less than 20% of the main site's visitors got to the developer page, when we know that the majority of visitors were developers.
We contemplated designing a site with a popup that divides into 2 sites: one for developers and one for users. Since during this time there was a shift towards developers(they were also the ones who moved the KPI), the decision was to make a website that was directed only to developers.
OBSTACLES
-
The developer's pain is finding a reliable, easy to use wallet with familiar user experience for their non-crypto-savvy app users because hassle causes friction and dropouts. We know this to be true from conversations with app devs in socials and in our support system. They also care about having a strong channel of support and high quality documentation.
-
If developers go to our site to quickly find answers to technical questions and run into other content that isn't relevant to them at that moment, they might get frustrated, so we have to make the technical content and support easy to find.
-
If we talk about conceptual ideals and general terms like secure and simple, without getting into how we apply them in our products, the developers will end up sending us more support applications.
From the Research Process
WIREFRAMES
After viewing the results of both our quantitative research:
-
Surveys sent to developers
-
Site heatmaps
-
Session recordings
-
Google Analytics
and qualitative research:
-
Interviews with developers 1:1
and competition research, we decided what to include in our landing page, what should move to other pages, and what isn't adding any value and we should remove altogether. The wireframes were done in Whimsical, which enabled easy collaboration with other team members, and was used to finalize the microcopy as well.
GRAPHIC-ILLUSTRATIVE LANGUAGE
The former websites contained different illustration languages, mostly kept up with the "people at work" trend combined with UI illustrations.
We wanted to make up a new language that would be specific to Portis, wouldn't contain figures (unless if there was a specific requirement for that), and would have potential to expand with time and needs. This would leave the focus on the UI of the product, shown in mockups and gifs.
I also wanted the language to help convey the "port" concept- Portis being a port or window, enabling an infinite number of possibilities for creation. This lead to using original graphics from the apps themselves.
Ghost buttons were chosen for the features to emphasize same hierarchy between features and lower hierarchy than the page's main CTAs.
Our demo app, Cryptopuppers, is displayed for more credibility since developers stated that playing around with the product was important to them.
A whole section is dedicated to draw attention to Portis' external App page, to make the developers feel more confident to integrate a product that's already used by many other viable apps.
PORTIS DESIGN SYSTEM
As part of my work in Portis, I put together our Design System. This contains:
-
Fundamentals: design principles, audience and brand personality.
-
Particles - the building blocks of the design system.
-
Compositions - elements or patterns that are a combination of particles.
Working on the Design System involved a lot of auditing, interviewing and research. The work was done with all other team members: the CEO and CTO gave input on our principles, audience and personality, developers contributed to make the documentation easy-to-use in development, and former designers provided information on the language used and design decisions made so far.
The Design System is made up of both documentation in Notion and a Figma file containing ready-to-use components.
CONCLUSION
I learned a lot from researching and designing the new landing page: how to work well with the team and communicate with the different members to make sure we deliver the best solution to our users. I also felt how spending a little extra time on research and wireframing can really bring the design to unfold itself.
From my work in Portis I understood the importance of gathering data, testing and basing decisions on findings and results rather than assumptions. I also practiced asking the right questions to identify pain points, search for flaws in solutions and find the right way to measure the outcome of the design.
Check out other UI/UX projects:
GIFTJAR
NEXTRIP