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
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
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
.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.
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.
Site map of real estate navigation
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.
.png)
User persona #1
.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.
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.
MID-FIDELITY ITERATIONS
Account creation process
Low-Fidelity
Mid-Fidelity
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
Mid-Fidelity
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
Mid-Fidelity
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
High-Fidelity
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
High-Fidelity
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
High-Fidelity
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.
FINAL SOLUTION
MAIN FEATURES
Onboarding
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.
Buying and Selling Properties
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.