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.
Impact
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
Inspiration
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.
Tools
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?
Prototyping & Creating The User Interface
Inspiration
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.
Tools
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?
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.
Learnings
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!