Slack App Case Study

An app to improve the mental health of college students
ROle
Sole Designer
Date
July 2024 (3 weeks)
responsibilites
UI Design, UX Design, Wireframing
OVERVIEW

This case study aims to simulate a role as the sole designer at a startup company that is building new ways for companies to stay connected and work together. Our goal is design & develop features that can seamlessly integrate into every workflow, capitalizing on cutting edge technology to enhance the user experience and secure product market fit. In this particular case study, I looked into features that could improve the application Slack.

PROBLEM

With the current state of Slack, users can be overwhelmed and have a hard time catching up to all the missed messages when they return from an extended period of being offline, leading to time being wasted on catching up on information and sifting through clutter.

SOLUTION

Create an AI assistant that offers various types of summaries (conversation, action items, Q&A, etc.) and functions as a generative AI chatbot.

DATE
January 2024- March 2024 (10 weeks)
TEAM
Bret DuBois, Zahrah Mahmood, Michael Welsome, Peter Nguyen
ROLE
Wireframing, UI design, UX design, prototyping
OVERVIEW
This project was developed for an upper-division design course at UC San Diego known as Social Computing. This course delves into the convergence of social behavior and computational systems. The project entailed designing a functional social computing experience tailored for use by multiple individuals within a defined context.
view our presentation here
SOCIAL SETTING
UCSD students are thrown into a life of independence, usually with not much financial support. Many students have never cooked in their life, but figuring it out is a vital skill for saving money and eating healthy. More often than not, cooking will happen in someone's home allowing for asynchronous and synchronous virtual interactions. Since the students attend the same college and thus live near each other, it is convenient and beneficial to cook in a co-located environment.
PROBLEM/OPPORTUNITY
This transition to college often has students longing for a way to combine the best of both worlds: the warmth of community dining and the satisfaction of a home-cooked meal. Many attempt to cook in their own spaces because of physical or social barriers that prevent them from sharing this experience with others, turning what could be a collaborative and enriching activity into a solitary one. For those who are navigating the kitchen for the first time, this isolation can amplify the challenge of cooking. WeCookt is designed to address this very gap, offering UCSD students a chance to not only enhance their cooking skills but also to forge connections with their peers through the universal language of food.
RESEARCH
Methods
We surveyed a total of 31 college students regarding their cooking experiences and opinions. The survey included a series of questions aiming to understand their cooking habits, challenges, and the social aspects of cooking most important to them.
GOALS
Our main objective was to understand the experience of cooking as a student and how a social computing platform could alleviate these challenges and foster community through food.
FINDINGS
Our research highlighted a clear interest in recipe sharing and discovery with a significant number of students considering a community-driven recipe exchange feature to be quite useful. Such a feature reportedly would benefit their cooking experiences which underscores the importance of WeCookt to prioritize and improve this functionality. Additionally, the variety in usage of social media and cooking apps for discovering recipes indicated an opportunity to integrate this into a central platform tailored for student needs.
DESIGN PROCESS
OVERALL GOALS
Our team wanted to make WeCookt a platform where people of all cooking levels can use what they have at their disposal to learn and cook recipes in a fun, rewarding and collaborative manner.
USER JOURNEY
A typical scenario of someone who was looking to use the app to find recipes that they could make based on what they had in their pantry was the key scenario and journey that we created our user flow around. This gave us an idea of the main architecture of our app and pointed us in the direction of what features we should include.
PIGGYBACK PROTOTYPINg
For our initial ideas we decided to piggyback prototype off Discord to simulate the virtual interactions like finding a partner, as well as posts, comments, and building chatrooms.
FIRST PROTOTYPE
Prototype OverView
In our first prototyping session we wanted to display our main features of WeCookt which were personalized recipe recommendations curated by AI, hyperlocal chat rooms for a local ingredient exchange, a live virtual cook along and gamification of helping others. We used discord to simulate the virtual interactions and paper to simulate the process of cooking and the exchange of ingredients. 
view our prototype presentation here
Results
The live prototype demonstration went smoothly as we received positive feedback as the virtual cook alone was an interesting novel aspect with instructions that were easy for people to follow. The ingredient exchange went smoothly and the gamification of the demonstration (handing out candy) proved to motivate people to interact with others and support each other.
feedback
The feedback we received was helpful for our second prototype. Users found the virtual cook along feature to be novel and fun, and so they desired us to expand upon that further. They also wanted it to separate more from the crowd, asking for more novel aspects to the app. The final major notes were about making the app more community based, and catering to a specific group of people. The people we decided to choose with this remark were UCSD students, considering they are the ones who would need it most.
SECOND PROTOTYPE
prototype overview
Two weeks after our first prototype we were able to produce our second prototype and incorporate the feedback that we received from our first prototyping session. A main focus of this prototype was to expand upon the novel aspects of our app and cater towards a more specific target audience.
view our prototype presentation here
NEW FEATURES & improvements
This second prototype displayed several new features including receipt scanning to enter in ingredients, a pantry management system (alerting users of approaching expiration dates of items in the pantry), the ability to merge pantries with friends to collaborate, weekly cooking challenges and more localized communication channels to create tight knit communities. 
RESULTS
Most users preferred our second prototype as opposed to our first. They enjoyed the synchronicity of the virtual cook along. They loved the novelty of the recipe scanner, pantry management, and pantry merge, noting that they appreciated the “exploration of the less popular space of pantry and food waste reduction”. They also were happy with the community-based aspects. However, they wished that everyone could participate (similar to our first iteration) instead of a select few. 
takeaways
All of our novel features seemed to be well-received among the users. It was definitely a step-up from our first iteration, but we had neglected that having the whole class participate is what made our previous prototype so much more enjoyable.
FINAL DESIGN
The cooking experience
Users scan a receipt or enter in their ingredients to utilize the pantry management feature. Information such as expiration dates and nutritional facts can be managed. Then, find recipes based on what they have in their pantry.
Connecting with others
Users can socialize and connect with others by joining live chat rooms to connect with others or find help, or merging pantries with friends to cook curated recipes together.
Live virtual cook along
Users can then join a live virtual cook along to learn recipes with others with real time interactions with other learners or the cook along host themselves.
NEXT STEPS
To solve the problem of allowing all users to participate, we wanted to add the ability to lurk in other chat rooms. This would make it so that users can feel a part of the whole, even if they didn’t want to actively participate.
FINAL NOTE
In our final design, we combined all the feedback from previous weeks together into something that we are proud of. The app looks and feels good, and takes everything we learned into account. Live prototypes are something that none of us in the group had ever done before, but it was a fun experience, and it taught us a lot about how we can make our ideas tangible in order to receive feedback before going all in something that hasn’t been tested.
RESEARCH
METHODS
COMPETITIVE ANALYSIS

To ensure this feature would be cutting-edge and innovative, it was essential to examine similar existing features on the market. I drew inspiration from Google Chat's Chat/Conversation Summaries, Ansa's Task Categorization, Basecamp's Message Board, and Microsoft Teams' Activity Feed. Although each of these features is valuable on its own, integrating them into one could significantly enhance Slack's capabilities and elevate it to the next level.

INSIGHTS

Considering the objective and scope of this feature, my focus was on enabling users to have an organized system for efficiently digesting, sorting, and prioritizing information. The goal was to enhance user efficiency and productivity by minimizing the time spent catching up on information and sifting through clutter, while avoiding disruptions to the rest of the team. This involves incorporating search, filtering, and categorization of messages, prioritization of key information, summarization, and leveraging NLP systems. I settled on the idea of a Generative AI Assistant that would execute the aforementioned goals.

STAKEHOLDERS

Understanding that the main users of these features would be tech-savvy professionals familiar with AI capabilities, I created a journey map to pinpoint issues in the user experience. This allowed me to identify the most effective way to enhance usability and address user pain points effectively.

DESIGN

Leveraging Slack's design system, I began conceptualizing the visual and functional aspects of this feature. This process involved determining its overall appearance, identifying necessary components, and ensuring seamless integration with existing Slack features.

RESEARCH
VISUAL IDENTITY
DESIGN SYSTEM
WIREFRAMES AND ANIMATION
DATAMAPPING
SKETCHES

I began with low fidelity sketches in order to get a general sense of groupings for each of the different functionalities that I intended the feature to contain: different types of summaries, three main summarization points, a prioritization system, a prompting ability and an expandable window to provide the supporting evidence behind each of the three main points that this AI assistant would generate.

PROTOTYPE
Iterations
After each iteration of my designs, I conducted usability testing and gathered feedback from senior designers. This iterative process provided valuable insights, allowing me to refine the UI to ensure every functionality within the feature was intuitive and easy to locate. By incorporating this feedback, I enhanced the overall user experience, making the feature more efficient, user-friendly, and visually appealing.
FInal Design
My final design saw significant improvements in the intuitiveness of the feature, primarily due to enhanced spacing and a well-organized information hierarchy. Additionally, I incorporated a dark mode option, ensuring the feature is not only functional but also visually appealing and adaptable to different user preferences. This combination of thoughtful design elements contributed to a more user-friendly and aesthetically pleasing experience.
FINAL NOTE
In conclusion, working on this case study has been an extremely enriching experience. Despite being my shortest project, it has significantly contributed to my growth as a designer. I am immensely grateful to John Jusung Kim for providing me with this opportunity and for his mentorship throughout the process. His guidance has taught me a great deal about design, and I can see significant improvement in my ability to create higher-quality designs at a fast pace.

Other Projects

Let's get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.