June 2020 - August 2020
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.
Ulka Patil (Designer)
Jennifer Xu (Designer)
Lucie Bolé (Design Lead)
Hrish Lotlikar (CEO)
UI/UX Design Intern
At a glance...
“How might we make a user’s first experience with SuperWorld simple and engaging?”
Because SuperWorld is a new and growing company, first-time users are seeking an engaging experience on the platform. However, SuperWorld was lacking an informative onboarding experience to introduce new users to the real estate platform.
My team designed 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 and navigation. We also redesigned the user flow of buying and selling properties.
By providing users with an interactive onboarding experience and an
engaging guided tour explaining the platform's navigation, SuperWorld will retain more first-time users, expand their user base, and increase the number of
real estate transactions.
So, how did I get to my final solution?
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's executives describe this technology as "real-life Monopoly" on the blockchain.
Understanding our users' perspectives
To discover how new and experienced users navigate SuperWorld, my team and I conducted seven semi-structured interviews. We asked each user questions to gauge their level of familiarity with SuperWorld’s technology, and conducted a
think aloud exercise as they explored the website. 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.
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
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
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.
Analyzing SuperWorld's usability
During our user interviews, we discovered several issues with the usability and navigation of the real estate platform. These issues frustrated users and made the site less user-friendly overall. 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
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
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.
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
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
Refining questions and ideating possible solutions
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.
At this point, we came to the conclusion that SuperWorld’s real estate platform was not inviting to new users, and it needed to be made more intuitive and user-friendly. For a growing company like SuperWorld, having an engaging interface is incredibly important because it could potentially bring in thousands of new users, especially in an untapped market like virtual real estate.
"How might we make a user’s first experience with SuperWorld
simple and engaging?”
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.
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. This helped us consider what an ideal user flow would look like for SuperWorld’s new users.
Site map of real estate navigation
User flow of onboarding and guided tour
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.
User persona #1
User persona #2
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.
Throughout this phase, my team was collaborating cross-functionally with multiple other design and development teams, who were working on redesigning other elements of SuperWorld’s website and mobile app. Because of this, we had to frequently and rapidly iterate our wireframes to account for new changes to the company’s visual identity and design system.
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, keeping them updated on the status of our work. We also added and improved the functionality of our wireframes in order to allow for the Frontend Development team to begin implementing our designs.
Account creation process
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.
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.
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.
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.
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
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?
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.).
After gathering, analyzing, and implementing feedback from our users, we began finalizing our designs into high-fidelity wireframes. During this phase, we also added more advanced prototyping and functionality to our wireframes.
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.
Guided tour tooltips
1. Removed “Connect Wallet” button and reworded text to encourage users to proceed to guided tour
2. Changed “Take Guided Tour” button to “Start Tour,” to better explicate the call to action
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
1. Added a confirmation popup to allow users to confirm or cancel transactions
2. Moved transaction notification to center of screen to improve visibility
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. This design system included a new logo, an updated color palette, new typography, and new components. Using these elements, we were able to completely redesign the real estate platform's UI, in addition to the user experience.
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.
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.
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.
reported that our designs improved their experience with SuperWorld
were able to understand SuperWorld’s purpose
were able to successfully buy, sell, and change the price of a property
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!
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 I began to assume other users were just as familiar with 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.