toastyGhost
An open-source, anonymous, interactive chatroom web app.
Role
UX/UI Designer
Duration
2 weeks
Project Type
Web-App Design
Background
ToastyGhost is a web application which offers a place for users to host and join open-source, anonymous, interactive chat rooms. It is a user-focused, free option for groups to interact in comfortable, interesting ways.
I had the opportunity to work with an engineering team throughout this project to design a pixel-perfect and more polished web-based app.
There were very few features on ToastyGhost, and I needed to answer the question:
“What else could ToastyGhost offer users that would elevate their experience with the product?”
Gathering Insights
Research
In order to figure out what users in this market would need, preliminary research needed to be completed.
Specifically, I needed to answer two important questions:
What other products are out there that could be considered toastyGhost’s competitors, and what do they commonly offer users?
Who would use this product and what would they use it for?
User Interviews
In order to further explore user needs and goals with an application like toastyGhost, I conducted user interviews with five participants, all with different backgrounds.
Specifically, I allowed users to freely explore the app and become familiar with its few user flows. To synthesize user responses and identify key insights, I moved into affinity mapping.
Finding patterns in user experiences
Affinity mapping allowed me to put participant responses in one place. By completing this exercise, I was able to recognize what patterns were revealed in relationship to the specific topics which I had earlier identified.
After completing user interviews and utilizing affinity mapping, I was able to determine the following:
Users generally really liked the appearance of the app, but wanted the option to send media to friends, either from their own files or from a list of offered .gifs.
Users found that the app lacked any real safety features, and felt like dangerous people could misuse the anonymous features.
Looking at the competition
I completed a comprehensive competitor analysis on four products which function similarly to toastyGhost. I specifically looked at their features, uses, strengths, and weaknesses.
This competitor analysis revealed that anonymous chatroom products are generally unsafe, especially for minors. They lack security measures and diminish the ability to hold dangerous users accountable for their actions.
This seemed to be an area of opportunity that toastyGhost could explore.
Defining Problems and Solutions
Creating Solutions
To more clearly understand what product I was to create from findings in my research, I needed to accomplish two goals:
Understand who my user was in order to design with more empathy.
Map out how my user would navigate through the product.
Identifying the user
I was able to create a user based off of user responses from the research phase. I took five users from different backgrounds and distilled their needs and goals into one person.
Connecting business and user goals
The safety features offered by a product are important for both the business and the user. In order to detect what other goals are a priority for both toastyGhost as a business and its users, I created a Venn diagram indicating what goals would guide the rest of the project.
Using project goals to create features
In order ensure that the design phase of this project would go smoothly (and include items which revolve around user needs and goals), I created a feature set.
Mapping out user flows
To understand how users would navigate through the application with existing features and the new features that would be added, I created a user flow conceptualizing user behavior and decision making options.
Designing the Product
Wireframes and UI
Once user flows were created, it was now time to design the actual product. Starting with low-fidelity wireframes and moving upwards in fidelity, I learned a few important points:
Be explorative in low-fidelity, then refine in high-fidelity.
Communicate with stakeholders in low-fidelity to keep going in the right direction.
Use existing style guidelines to create new, interesting signifiers without losing the brand image.
Conceptualizing through sketching
I wanted to start to really visualize how user flows would look in practicality before getting into more polished designs. Therefore, I made some rough sketches in my design journal to use in user testing before moving into high-fidelity mockups. This allowed me to avoid wasting time on ideas that users would not find useful.
Getting feedback from users
Before turning low-fidelity wireframes into a high-fidelity prototype, I needed to get some insights into the flows I was creating. To accomplish this, I completed user testing on five participants, with ages ranging from 23 to 32.
My three goals with user testing were to:
Find potential pain points and design flaws in low-fidelity wireframes.
Map out what features are useful.
See if other features could be useful which were not yet created.
I gained valuable insights from users, specifically:
Users affirmed that age disclosure would improve safety and their likelihood to use the app.
Users liked the idea of being able to send media, specifically .gifs
Recreating key components
In order to successfully create mockups and a functioning prototype of the existing toastyGhost app, I needed to recreate all of the necessary UI features, including buttons, logos, and entry fields.
Additionally, I created several new items which would be included in future designs.
Recreating existing elements
Creating new elements
The UI elements which I created fit into the toastyGhost brand. Marked by bold, simple icons and strokes, playful colors, and three dimensional shapes, I created a couple of experiences which add safety and fun while keeping user needs and brand style guidelines in mind.
High-Fidelity Designs
Taking earlier low-fidelity wireframes and adding the existing and new UI elements allowed me to make high-fidelity mockups which I would utilize in usability testing. These would change tremendously, but were a good start.
Creating interactive prototypes
Usability Testing
One of the most important lessons learned in this project lies in the iterations made from early high-fidelity designs to my polished high-fidelity prototype.
Testing for usability
In order to make sure that the product was easy to use and effective in accounting for user needs, I conducted usability tests with five participants, with ages ranging from 17-32.
I defined the metrics of success for the product as follows:
Users were all able to successfully navigate through the app with no more than two pain points.
Users were all able to complete the age verification and terms agreement form.
Users were all able to successfully send media and/or .gifs depending on
allowance of feature use.
All users rated the app’s safety as at least a 5 out of 7.
Findings
Not only did usability testing reveal the strengths in the features I had designed, but they also revealed weaknesses. More needed to be done to make clear what the feature was doing to address user needs.
I found users could navigate the app without trouble, but the items that signify the features allowed to users weren’t clear enough. I needed to better communicate that if a user is over 18, they can send media from their computer, but minors cannot receive or send it themselves. While I did hit my success metrics, I needed to iterate further.
Making necessary adjustments
I added two flows to the design to better communicate that users over 18 would have the ability to send and receive media from their computer, but not to users under 18.
Features being unlocked for users over 18.
Features can’t be unlocked for users under 18
Hover tag for users above 18 trying to send media to users under 18.
Wrapping Up
Conclusion and Final Prototype
This project contributed greatly to my growth as a UX designer in a variety of different ways. First, I learned a lot about collaboration and handoff, as I worked on this real-world app with an engineering team. It helped me prepare for working with engineering partners in future projects, making sure that I design with dimensions, functionality, and code in mind. Making sure that I designed something that was not only interesting and helpful, but also possible to make, was of utmost priority in this project.
I learned how to work from an existing product without changing the look and feel of the application. Copying and creating all in one was a fun challenge, and I think that my designs for the added feature did were successful in keeping in line with the brand’s image.
Finally, ensuring that user needs and goals can be prioritized and achieved while enhancing user safety was a great lesson that I will take into future projects.