UI/UX for a Web 3.0 App

Setting the precedent for web 3.0 apps in communities

Smart Waterloo Region
Smart Waterloo Region

About the project

Data playground is an app created for the Smart Waterloo Region Innovation Lab. The goal was to create an app that is used as a platform to collect data from the community and improve access to community events. The app is built in Web 3, which means that it uses a decentralized system that runs on the blockchain. Users of the Data playground app are able to participate without fear of monetization of their personal data.

Problem Statement

Users of the Data playground app need to be able to understand how their data protected, be able to take surveys, and register for community events.


Data playground is set to be released in the app store by the end of 2022. I'm eager to see how people respond to its design and find way improve the app based on user feedback!

My Role

UX/UI Designer + Researcher

Design Process

The entire design process including storyboarding, wireframing, prototyping, and creating the user interface resulted in a visually aesthetic and functional app.

Storyboarding & Wireframing


I looked at apps used to find events such as Facebook, Meetup, and Groupon. I was also inspired by images that I found on pinterest and dribble. I built on that foundation and integrated increased visibility of data protection.


Lo-Fi: Pen + Paper (Muji Gel Ink Cap Pen 0.38 in black and Crayola coloured pencils 24 pack)
Mid-fi: Adobe illustrator

Usability Testing

After mapping out the user journey, I held a few user testing sessions. During the sessions, I showed users the storyboards from onboarding to creating a survey/program. Based on the usability testing, I found some key points of confusion and made adjustments during wireframing.

Testing Prompts

  • Where do you go to find events near you?
  • What are features that you enjoy about those apps/websites?
  • Do you know what web 3 is?
  • How can you be incentivized to do a survey?
  • Does the user journey feel accurate?
  • How can it be improved?
Storyboard of creating an account
User flow for creating an account
Rough wireframing

Prototyping & Creating The User Interface


I was inspired by how the fashion industry has integrated Web3 and the metaverse. Specifically, virtual runways and NFTs. I find that high fashion brands are good predictors of trends that will be popular in the future and also show what design elements are timeless.


Mid-fi: Adobe illustrator, Figma, and Blender

Usability Testing

I created a testing scenario where I planned to show users 4 different style options for the design of the app. I than used guerilla testing to find out which style was most preferred. Guerilla testing means going into a public place such as a coffee shop or work space to ask people which style of prototype they prefer. Test participants were chosen randomly. I gathered the data and chose to use the style that was preferred by the majority of testers.

Testing Prompt

Which of the following design style do you prefer?

Style 1
Style 2
Style 3
Style 4

The Final Iteration

Key Takeaways

The final design includes 60+ screens that I made in Figma. To help with integration I created a design guideline that front-end developers can use a reference when developing the app. The mesh gradient in the background is from the Mesh gradients plugin on Figma and the 3D illustrations are from Icons8 - 3D Casual Life collection.


Truly, no UX/UI book, Pinterest surfing moodboard, or testing out can replace rapid prototyping. James Clear, the author of Atomic Habits, explains that there are motions and actions to accomplish a goal. I often get caught up in the motions with paralyzing perfectionism as my greatest hurdle. I found the best way to tackle these fears was head on in a journal, and to ask for feedback throughout the entire design process.

If I Could Time-Travel And Start This Project Again...

  • Include Android perspectives in my exploration research
  • More notation for each step I took throughout creating the design, so writing isn't such a pain
  • Set a time limit for mood boarding and road mapping, rather than get lost in it

Thanks To...

Jumanah, Ashleigh-Ann, Jahmeeks, Krish, Sankalp, Saba, and Grayson at the Smart Waterloo Region Innovation Lab for being so supportive! I could not have done it without you <3

Now What?

I sent over the Figma file, design guidelines, and folder of assets used to the Smart Waterloo Region developer team. The app will likely launch by the end of 2022. I'm going to crunch this down into a couple of digestible videos for social media talking about the design process + tools I used, so look out for that!

Interested in working together? Get in touch today.