DOODLES APP
The Story
While enhancing my UI/UX skills, I identified a gap in the user experience for the Web 3.0 company "Doodles." In response, I developed a standalone application streamlining Doodles' information architecture for both existing community members and newcomers. The project gained widespread acclaim on Twitter, garnering significant support from the community and the Doodles team. This success not only strengthened my connection with Doodles for other projects, but also opened doors to numerous UX opportunities with leading companies in the Web 3.0 space.
"Doodles" Web 3.0 company has a promising future with over $54 million in equity funding raised. They have a wealth of NFT projects, collectibles, and merchandise, which were in need of organization and access for both members of the Doodles community and the general public.
Project Duration - September 2022 - December 2022
The Problem
Doodles currently only has one main website and lacks a mobile application, making it difficult to access news and information about Doodles in one place. I have created a proposed UI/UX design for the company in hopes of attracting the company's attention, and having a conversation about how I can contribute to their ongoing success.
The Goal
Design an app that allows existing users to access all information regarding Doodles in a centralized location, while also making it accessible to new users who may not have too much interest in Web 3.0 brands and technologies.
My Role
Design a new user experience and mobile application for the Web 3.0 company "Doodles."
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research was existing users within the Doodles community that find it inconvenient to access any information on different websites/sources.
This user group confirmed initial assumptions about Doodles information architecture, but research also revealed that it was even harder for non-community members to access information if they were interested in joining the Doodles community.
Pain Points
-
![]()
Information Architecture
Information spread across multiple sources can be difficult for the user to remember, while also discouraging community members from interacting.
-
![]()
Time
While Web 3.0 moves very quickly, time is of the essence when it comes to fresh news and updates. Most users need updated information quickly.
-
![]()
Design
Users wanted to make sure that a Doodles app would stay on theme to the Doodles project, and be exactly what they would imagine in the Doodles ecosystem.
Personas
Persona #1
Ray
Ray is a 34 year old web 3.0 / NFT collector who has a lot of experience within web 3.0 technologies, and is also a part of the Doodles community as a Doodles holder.
Persona #2
Alice
Alice is a 21 year old with little to no interest in web 3.0 technologies and NFT’s, but is open to the idea of them, being a frequent online user within other forms of entertainment and brands.
User Journey Map
Chris’ User Journey
Mapping Ray’s user journey revealed how it would be for a user like Ray to use an all-in-one application for all things Doodles.
Paper Wireframes
To produce an optimal wireframe for the Doodles application, I generated numerous ideas and sketches. As I progressed, I honed in on the most promising elements from previous iterations, incorporating them into newer concepts. This iterative process ultimately led to the development of a comprehensive paper wireframe that served as the blueprint for the final digital wireframe.
Digital Wireframes
In crafting this wireframe, I aimed to lay a robust foundation for an optimal Doodles app experience, with a focus on smooth functionality and intuitive flow. My approach emphasized simplicity, while also integrating innovative features, such as a Doodle profile page designed specifically for managing crypto wallets.
As I crafted the menu, my objective was to ensure that every essential page of the application was conveniently located in a single, accessible location for seamless user navigation. This included vital sections such as the home screen, user profiles, news, marketplaces, socials, and more, ensuring that users could effortlessly find what they were looking for.
Usability Study: Findings
Round 1
1) Users want better organization / navigation
2) Users should have access as guest / non-member
3) Users loved the color palette and translation of Doodles branding to a mobile application
Round 2
1) Users are happy about navigation / feel of application
2) Members are happy about profile pages
Mockups
In the early stages of development, users were able to log in and access the application as a member. Nonetheless, it became apparent that many users desired a "guest mode" that would allow non-members to explore the app's features, such as browsing news and marketplaces, and potentially join the vibrant Doodles community. Additionally, users requested more intuitive navigation and improved organization. Following the usability study, I utilized the feedback to craft a new and improved design that addressed these concerns. The new design boasts a user-friendly hamburger navigation and streamlined elements to reduce clutter, resulting in a more efficient and enjoyable user experience.
The second usability study yielded a resoundingly positive response regarding the app's overall functionality. Users expressed their satisfaction with how the app's branding was seamlessly integrated throughout, and praised its seamless transition to a mobile platform. Furthermore, users were enthused about the app's intuitive navigation and its ability to facilitate various tasks such as research, account creation, and marketplace browsing with ease.
Final Mockup
Final Prototype
The final high-fidelity prototype presented cleaner user flows for building a ticket marketplace. It also met user needs for better navigation and customization.
Accessibility Considerations
-
1
Provided access to users who are vision impaired through adding alt text to images for screen readers.
-
2
Used icons to help make navigation easier.
-
3
Used detailed imagery for maps on ticket selection to help all users better understand the designs.
Impact
The app caught a lot of attention on Twitter, where users tried to get the attention from Doodles themselves. You can check out the tweet HERE
One quote from peer feedback:
“I really hope this gets the attention from Doodles themselves, to develop it into a real app for the community one day!”
What I Learned
While designing the Doodles app, I learned how important it is to condense information from a brand into a universal application, where websites might have used multiple websites/sources for their brand in the past. Usability studies and peer feedback influenced each iteration of the app’s designs, and allowed me to create a final design that was super useful for both community members of the Doodles project, as well as new members that might have an interest in joining..