UI & UX

Porteiro

About the Project

Our team was tasked with designing, developing, and deploying a desktop oriented onboarding process that allows users to have an easier experience onboarding for the PORTIERO platform.

To better understand the needs and expectations of the target audience, the design team conducted both quantitative and qualitative research. A survey was distributed to existing customers of the current user base to gain insights on the current pain points.

Our Role on the project

  • User Research & Analysis 
  • Persona Creation
  • MVP Definition
  • Wireframes
  • UI Design 
  • Usabiility Testing 
  • Deployment

THE PROCESS


Build. Measure. Adapt. Learn.

  • Formulate and validate the hypothesis
  • Conduct early usability testing on current user base 
  • Define MVP
  • Focus on Research results that will benefit users

RESERCH & PROBLEM DEFINITION

RESERCH & PROBLEM 
DEFINITION

Hypothosis

Designing and building a new platform based around new technologies such as augmented reality removes all forms of familiarity with common applications. Our hypothesis is that AR is new and confusing to the majority of users.

“We believe that as we push the boundaries of what the technology is capable of as well as the UI simple enough that anyone can open the app and get started”

Research

We know from previous studies and experience that the onboarding process has a direct effect on retention rate. Popular team collaboration application Twine reduced their drop-off rate to 30% from a whopping 65% by rewiring their onboarding experience. According to a study by Business Insider, it takes just three seconds for someone to determine whether they like you or not. All sorts of things, including intelligence and trustworthiness, are decided within this short period, says UX Booth.

Personas

We set up multiple personas based on the user research we refer to several times throughout the case study.

Personas are built with scenarios that identify a realistic goal or problem while using the application. Personas focus on 3 common characteristics:

  • User needs or challenges
  • User frustrations or feedback
  • Generating a biography of the user

These characteristics will drastically affect the design decisions we develop.

Design Impact

Spending some time looking through the persona’s and diagnosing the pain points and motivations from each helped us to understand, empathize, and adapt design decisions. This process helped influence the important development of crucial needs and functionality that may have been missed.

  • Instant help function. .
  • Rating system. Helping build trust by having authentic reviews.
  • Step-by-step onboarding. Slowly guiding users through the onboarding process helps minimize pain points. 
  • Mandatory background checks. Ensuring safety.

User Stories and MVP

User research and person creation brought up the users main needs, goals, and behaviors. Therefore, we found that the main issues in our design decisions needed to solve were:

  • Background check
  • Review System
  • Easy onboarding
  • Autofill optimization 

Based on this information, we were able to create user stories and define the MVP

User Flow

We have created several user flow diagrams from every step of what the user can do in the app. From signing in to the app for the first time to checking other users' artwork. These flow charts help map out exactly what a user will go through. 

DESIGN EXPLORATION

Low Fidelity Wireframes

Low Fidelity Wireframes

We sketched several paper wireframes that allow us to draw out as many ideas as possible with the knowledge of the required elements to the applications design based on users goals, needs, and frustrations. We took these paper wireframes and built digital versions in Figma to build interactive wireframes for test groups to well…test. 

Findings

  • Users found the user onboarding to be too long.
  • Users suggested allowing a skip or set up later option for none required portions of the partner onboarding.
  • Users suggested a “continue as a guest” option.

Design Solutions

  • We removed all but email and password for user onboarding.
  • We added a “Set up later” option for all none required questions.
  • We set the default as an automatic guest until an action is triggered that requires an account.

Prototyping

Mid Fidelity Wireframing

We took our original wireframes and turned them into a black and white prototype in Figma where we iterated on feedback and defined design themes, and visual hierarchy

Findings

  • Users felt that the “flow” of things seemed messy and disorganized
  • Users suggested that we have auto fill descriptions and subscriptions as an option.
  • Users suggested removing the ‘nitty gritty’ information all together and putting it into an account dashboard.

Solutions

  • We arranged the questions that were asked again and made it even more cohesive.
  • We added common autofill suggestions for service descriptions, price points, and recurring subscriptions
  • We built an account dashboard for partners to see their profile, analytics, and a  messaging support bot.

VISUAL DESIGN

Designed For Simplification

After a few iterations and multiple tests we designed the final screens with Figma We conducted a final A/B test on some elements we were still unsure about during that process we finalized, defined, and implemented the final design patterns, elements, and colors.

Our goal was to make a simple, cohesive, and unique onboarding experience. We know that onboarding can be boring, tedious, and unoriginal. We believe we were able to build something that is none of those things.

WRAPPING UP

What did we take away from this project

Test, Test, Test.   We tested with users in person, online, users who haven't used PORTEIRO, users that were the first to use PORTEIRO, and anybody in between. We tested this onboarding process so many times and we walked away learning more and more on how to make the product better every single time.

Boring can be fun!   When you first hear about designing a new onboarding process most wouldn’t be too excited. Talking with the founder about his original onboarding problems allowed us to start in a direction that was creative and unique rather than settling for the same old sign up form. The mundane can be different.