WanderVision header (1)-min (1).png
Duration

June 2020 - August 2020

OVERVIEW

I spent the summer of 2020 as a UI/UX Design Intern at SuperWorld, a company at the forefront of digital real estate in virtual and augmented reality. During my

10-week internship, my team and I designed and shipped end-to-end

onboarding flow that allows new users to create an account, learn about blockchain real estate, and get familiar with buying and selling on SuperWorld. We also completely redesigned SuperWorld’s user interface and visual identity.

Team

Ulka Patil (Designer)

Jennifer Xu (Designer)

Lucie Bolé (Design Lead)

Hrish Lotlikar (CEO)

My Role

UI/UX Design Intern

UX Researcher

Visual Designer

Product Strategy

At a glance...

How might we make a user’s first experience with SuperWorld simple and engaging?
PROBLEM

SuperWorld's users are seeking a unique, engaging experience on the real estate platform. However, SuperWorld lacks an onboarding experience to introduce new users to the platform. Also, the current process of buying real estate frustrates users.

IMPACT
SOLUTION
An end-to-end onboarding flow and guided tour that allows new users to create an account, learn about blockchain real estate, and get familiar with SuperWorld’s key functionalities. My team also redesigned the flow of buying and selling properties.

By providing users with an interactive onboarding experience, an

engaging guided tour explaining the platform's navigation, and a simplified transaction flow, SuperWorld will retain more users and increase the number of real estate transactions.

  • 40% increase in users per week

  • 30% increase in sales per week

  • 10x increase in total transactions

DESIGN PROCESS

So, how did I get to my final solution?

  • User Interviews

  • Heuristic Evaluation

  • Stakeholder Interviews

  • Affinity Mapping

  • Design Opportunity

  • Site Mapping

  • User Personas

  • Low-Fidelity

  • Mid-Fidelity

  • UI Iterations

  • Usability Testing

  • High Fidelity

  • Feature Brealdown

  • Usability Testing

  • Reflection

BACKGROUND

What is SuperWorld?

SuperWorld is a real estate platform where users can buy and sell virtual plots of digital land all over the world, through augmented reality. Each property on SuperWorld is an AR version of an actual plot of land, which users can purchase using the cryptocurrency Ether. Users can then utilize their plots of land for e-commerce, digital marketing, content creation, or other monetization opportunities, and receive a portion of all revenue generated by these activities. SuperWorld describes this technology as "real-life Monopoly" on the blockchain.

RESEARCH
 
USER INTERVIEWS

Understanding our users' perspectives

To discover how new and experienced users navigate SuperWorld, my team and I conducted seven semi-structured interviews. We also observed users as they performed specific tasks on the real estate platform, such as creating an account, buying a property, and connecting a blockchain wallet.

7

users

19-36

age

1hr

duration

Goals

1.  Observe users of varying experience levels as they navigate SuperWorld

2.  Understand users' thoughts while interacting with real estate map

3.  Discover pain points with buying and selling properties

Tasks

1.  Enter the real estate map and create an account

2.  Select and connect a wallet to your account

3.  Using the search bar, search for a property

4. Demonstrate how you would purchase a property

KEY INSIGHTS
1. Complicated Technology

SuperWorld’s technology is based on complex concepts like cryptocurrency and augmented reality. With no informational resources to turn to, new users struggle to understand these concepts.

2. Confusing Navigation and Interface

SuperWorld’s real estate platform has lots of buttons, tabs, and icons, but no instructions on how to use them. Overall, the interface is cluttered and confusing for users to navigate.

3. No Guidance

Since there is no explanation of the real estate platform’s purpose or core features, users are forced to learn virtually everything on their own. This frustrates users and ultimately drives them away.

HEURISTIC EVALUATION

Evaluating SuperWorld's usability

During our user interviews, we discovered several issues with the usability and navigation of the real estate platform. To further analyze SuperWorld's UI and note down any problems with the usability, my team conducted a heuristic evaluation.

"Create Account" button is too small and not intuitive

Frame 1 (1).png

Users can only explore the map after connecting a blockchain wallet

Significance of grey map tiles is unclear

Transaction notifications are not noticeable

"My Properties" tab is cluttered and overwhelming

Property tiles are small and do not provide enough information

Icons are not prominent

or intuitive enough

STAKEHOLDER INTERVIEWS

Understanding the company's vision

To further refine our objective, we conducted two stakeholder interviews with SuperWorld executives. Our goal was to understand their long-term vision for SuperWorld’s website and define exactly what our solution should accomplish to meet users’ needs.

KEY INSIGHTS
1. Time for a Makeover!

Because SuperWorld is such a new company, they haven’t had the chance to fully flesh out a clean UI with a consistent design system. SuperWorld’s outdated website is overdue for a makeover.

2. Educating New Users

Cryptocurrency’s recent rise in popularity is a huge opportunity for SuperWorld! It's crucial that the website provides tools to educate new users on the basics of cryptocurrency in virtual real estate.

3. Simplify Transactions

Because SuperWorld’s success depends on users' real estate transactions, the process of buying and selling properties needs to be as straightforward as possible.

ANALYSIS AND IDEATION
 
AFFINITY MAPPING

Organizing data and forming ideas

Because we had identified multiple areas for improvement from our user and stakeholder interviews, we created two affinity maps to organize qualitative data and narrow down our brainstorming. This helped us draw connections between our users’ frustrations and the potential solutions we had come up with so far.

SW Affinity Map.jpeg

Affinity map of user pain points and "HMW" statements

KEY INSIGHTS

1.  Users have questions about SuperWorld before making an account, so they need to be able to explore the platform before they start using it.

2.  After creating an account, users are unsure what to do next. There needs to be a call to action and directions to help users explore the real estate platform.

3.  Many of the features on the real estate map are complicated or limited in their usability, and need to be more intuitive.

DESIGN OPPORTUNITY

"How might we make a user’s first experience with SuperWorld
simple and engaging?”

SOLUTION

As we analyzed the user feedback and pain points gathered from our research, we asked ourselves several questions about what sort of features would allow for an optimal user experience, and what would be feasible to design given our timeline and constraints.

 

After generating a total of 13 “How Might We” statements, my team decided to design a new user onboarding process,

a guided tour, and a simplified transaction flow, in order to improve the experience of a new user on SuperWorld.

SITE MAPPING

Planning the user experience

After defining our solution, the next step was mapping out the information architecture and establishing what features the onboarding would include. We created two site maps to visualize the navigation and plan out the structure for an onboarding tutorial and guided tour. 

Screen Shot 2020-09-21 at 10.08.16 AM.png

Site map of real estate navigation

SuperWorld.jpg

User flow of onboarding and guided tour

USER PERSONAS

Visualizing our users

To synthesize all of our research and analysis, my team created two personas that represent the primary needs and goals of SuperWorld’s target users. While designing, we frequently referred to these personas to ensure that our solution circled back to their needs.

Persona (1).png

User persona #1

Persona (2).png

User persona #2

DESIGN
 
LOW-FIDELITY DESIGNS

With all of our research and planning completed, it was finally time to start designing! We began by creating several low-fidelity wireframes of the account creation flow, onboarding tutorial, and guided tour, to explore different layouts and visual elements.

Screen Shot 2021-10-20 at 11.53.51 AM.png
MID-FIDELITY DESIGNS

After creating several iterations of low-fidelity designs, we refined and synthesized these to create mid-fidelity designs. As we continued our design process, we communicated frequently with SuperWorld’s developers, in order to allow for the team to begin implementing our designs.

Screen Shot 2021-10-20 at 2.56.36 PM.png
MID-FIDELITY ITERATIONS

Account creation process

Low-Fidelity

Account Creation- Low Fi.png

Mid-Fidelity

Account Creation- Mid Fi.png
PROBLEMS SOLVED

1.  Integrating the account creation process within the map allows users to immediately start buying

and selling after signing in.

2.  Requiring users to confirm their email before proceeding ensures that an accurate email is linked to their account and blockchain wallet.

Onboarding tutorial

Low-Fidelity

Onboarding Tutorial- Low Fi.png

Mid-Fidelity

Onboarding Tutorial- Mid Fi.png
PROBLEMS SOLVED

1.  Using concise headings and a consistent layout ensures a smoother user flow and easier understanding of the information.

2.  Illustrations make the tutorial more engaging and visually appealing.

Guided tour

Low-Fidelity

Guided Tour- Low Fi.png

Mid-Fidelity

Guided Tour- Mid Fi.png
PROBLEMS SOLVED

1.  Tooltip-style popups are more engaging and make important navigational features more visible

2.  Highlighting relevant sections on the screen allows users to easily see and understand each tooltip

3.  The “Skip Tour” feature gives users the option to exit the guided tour at any time.

USABILITY TESTING

Gathering feedback from users

With our mid-fidelity wireframes completed, it was time to conduct usability testing! Using a script we wrote together and received approval for from SuperWorld’s lead designer, my team interviewed and observed three users over Zoom as they completed several task-based scenarios with our prototype. We also asked each of them to share their thoughts on the visual design of the mid-fidelity screens.

3

users

21-45

age

1hr

duration

Goals

1.  Observe users as they navigate through SuperWorld

2.  Test usability of onboarding, guided tour, and property transaction flows

3. Discover pain points that have not been addressed

4.  Understand what users like/dislike about visual designs and navigation

Tasks

1. Navigate to the map and create an account

2. Click through the onboarding and read the information. Is it clear? Why or why not?

2.  Proceed to the guided tour. Are the tooltips clear? 

3.  Which of the wallet options would you choose?

4. Please demonstrate how you would buy a property

5. How would you sell the property you just bought?

KEY INSIGHTS
1. Unclear Wording

The onboarding tutorial and guided tour tooltips need to be reworded to more clearly explain SuperWorlds's technology and how to use each feature.

2. Confirmation Popups

The notification popups are not always noticeable when they are at the bottom of the screen. There need to be confirmation popups when users click "Buy" or "Sell," as these actions can sometimes be triggered by mistake.

3. Ambiguous Button Labels

Many of the button labels are ambiguous and do not convey an explicit call to action (“Start,” “Connect Wallet,” etc.).

HIGH-FIDELITY ITERATIONS

Onboarding tutorial

Mid-Fidelity

Onboarding- Mid Fi.png

High-Fidelity

Onboarding- High Fi.png
PROBLEMS SOLVED

1.  New illustrations are more personable and relevant to the onboarding content

2.  Reworded text using beginner-friendly language, to more clearly answer each onboarding question.

Wallet connection

Mid-Fidelity

Wallet Connection- Mid Fi.png

High-Fidelity

Wallet Connection- Hi Fi.png
PROBLEMS SOLVED

1.  Changed styling of MetaMask card to call attention to it and explain its features

2.  Changed button labels from "Start" to “Connect Now” to better explicate the call to action

Transaction notification

Mid-Fidelity

Transaction- Mid Fi.png

High-Fidelity

Transaction- Hi Fi.png
PROBLEMS SOLVED

1.  Added a confirmation popup to allow users to confirm or cancel transactions

2.  Moved transaction notification to center of screen to improve visibility

DESIGN SYSTEM

Reworking the visual identity

With the help of SuperWorld’s graphic design team, my team created a new design system and styling guide for SuperWorld’s web and mobile interfaces. Using this new branding, we completely redesigned the real estate platform's UI.

SW Style Guide.png
FINAL SOLUTION
 
HIGH-FIDELITY DESIGNS
Screen Shot 2021-10-28 at 1.14.34 PM.png
MAIN FEATURES

Onboarding

65339b6f1fdd4e61bde5ef7e8c92897645a9e043.gif

After a new user creates their account, they are led through an illustrated onboarding flow. Each screen includes a frequently asked question about SuperWorld, along with a concise, beginner-friendly answer which explains SuperWorld’s technology.

Guided Tour

Once users finish the onboarding, they are navigated back to the real estate map, where they can take a guided tour. The tour introduces new users to the map’s key features, including the display tile for each property, the Properties toolbar, and their notifications. Users are also able to connect their blockchain wallet in this step.

cae8d41acc0a070560c4c50396d633bb40788711.gif

Buying and Selling Properties

eb7778d5cbd41b4c689d6071249b6a961d80ecde.gif

With the new transaction flow, users can easily buy and sell properties in just a few steps! Before a transaction is processed, users are asked to confirm the transaction, preventing any mistaken purchases or sales. Once a transaction is completed, users will receive a notification. Users can also change the selling price of their properties through the same transaction flow.

USABILITY TESTING

Measuring success

After finalizing our high-fidelity prototype, we conducted one final round of usability testing to assess the efficacy and success of our solution. We chose the same seven users from our preliminary user interviews.

7/7 users

reported that our designs improved their experience with SuperWorld

7/7 users

were able to understand SuperWorld’s purpose

6/7 users

were able to successfully buy, sell, and change the price of a property

7/7 users

found the information in the onboarding to be clearly understandable

Our users were impressed with the improvements we were able to make to SuperWorld’s website, and they expressed that our final designs were much more user-friendly and exciting to use! After receiving approval from the CEO, our final designs were completed and ready to be shipped!

REFLECTION
 
KEY TAKEAWAYS
1. Communication is Key

During these 10 weeks, I learned how crucial it is to be in constant communication with my team. Because SuperWorld is a startup, the design team is constantly making changes and creating new iterations of designs. We needed to be vocal about what we were working on and what we needed help with in order to keep our workflow running smoothly. I learned that asking questions, requesting feedback, and updating my team on my progress are all essential to creating a successful product.

2. Listen to Your Users

After learning all the ins and outs of SuperWorld myself, I became so familiar with the product that it almost biased my view of it. However, throughout the design process, we tested and retested our designs several times, and gathered lots of constructive criticism from users. I learned that although a product may be intuitive to one user, it could be confusing to others. It is critical to listen to the needs of all users, and take a user-centered approach while designing.

3. Teamwork Makes the Dream Work!

This was my very first UX design internship, so I was eager to gain as much hands-on experience as possible. Thanks to my mentors, I expanded my skills and learned so much about creating impactful designs. I also learned the importance of listening to different perspectives and incorporating multiple ideas to design the best solution. I am so fortunate to have had the chance to work in such a fast-paced environment, with designers that were so willing to share their wisdom and expertise with me.