📨 Let's Chat with 1 Click📨

Product Page Redesign

Overview

Dive chat is a startup that I worked as a lead designer on the web design team and the system design team.

This project I acted as a principle UX designer.

Role

Designer

Project Type - Freelance - Start-Up 
Duration – 21 days  
Design Tools - Figma, Framer, Supernova.io, Flutter, Adobe After Effects, Flutlab.io
Roles - Lead Product Designer for Dive ( Me ), Chief Technical Officer - John Hendrick, & Chief Financial Officer - Luca
Deliverables - Hi-Fidelity Prototypes, Slide Decks, Lo-Mid-Hi Fidelity Wireframes, User research Data, Photography and local community partnerships. 

Note - Despite me developing the entirety of each of these features and their data monitoring receivers, I am looking to be considered for Product Design and UX Research roles only.

July 2019- March 2020

The Overview

Whether you are looking to shop your favorite artists, discover new talent, or simply seek inspiration for art of your own– our client wanted to introduce a convenient way of perusing a digital gallery right from the comfort of your own home.

Branding
Product Design
Product Strategy
How can I apply?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
How can I apply?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Where do I sign in?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Will I be able to get refunds?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Is shipping included in the price?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
What is your return policy?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less

To create a seamless ecommerce experience allowing users to browse and purchase prints from the palm of their hand.

Before any project begins we highlight goals, and communicate what our clients deem as must-haves/non-negotiables. With long-term growth front of mind we conducted research to determine if there is enough market share to fuel this project, who this particular market share consisted of, and key design/functionality elements that would appeal to the right users! After numerous testing, prototyping, and surveying we answered some questions like:

Who does this app appeal to?

What standards will our user best respond to?

Would simplicity enhance usability for the targeted users in this market?

Etc

Challenge

How can we increase user retention in a community building platform? 

Whether you are looking to shop your favorite artists, discover new talent, or simply seek inspiration for art of your own– our client wanted to introduce a convenient way of perusing a digital gallery right from the comfort of your own home.

Branding
Product Design
Product Strategy
How can I apply?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
How can I apply?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Where do I sign in?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Will I be able to get refunds?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Is shipping included in the price?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
What is your return policy?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less

To create a seamless ecommerce experience allowing users to browse and purchase prints from the palm of their hand.

Before any project begins we highlight goals, and communicate what our clients deem as must-haves/non-negotiables. With long-term growth front of mind we conducted research to determine if there is enough market share to fuel this project, who this particular market share consisted of, and key design/functionality elements that would appeal to the right users! After numerous testing, prototyping, and surveying we answered some questions like:

Who does this app appeal to?

What standards will our user best respond to?

Would simplicity enhance usability for the targeted users in this market?

Etc

Background

👋🏿 Welcome to Dive Chat!

Solution & Impact

Whether you are looking to shop your favorite artists, discover new talent, or simply seek inspiration for art of your own– our client wanted to introduce a convenient way of perusing a digital gallery right from the comfort of your own home.

Branding
Product Design
Product Strategy

How can I apply?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
How can I apply?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Where do I sign in?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Will I be able to get refunds?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
Is shipping included in the price?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less
What is your return policy?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Read More
View Less

To create a seamless ecommerce experience allowing users to browse and purchase prints from the palm of their hand.

Before any project begins we highlight goals, and communicate what our clients deem as must-haves/non-negotiables. With long-term growth front of mind we conducted research to determine if there is enough market share to fuel this project, who this particular market share consisted of, and key design/functionality elements that would appeal to the right users! After numerous testing, prototyping, and surveying we answered some questions like:

Who does this app appeal to?

What standards will our user best respond to?

Would simplicity enhance usability for the targeted users in this market?

Etc

The best solution was changing Dive Chat's interaction patterns to promote retention around high friction areas of the app as it would keep core functioning logic and simply require composition changes. This is important because despite Dive existing for 2 years prior to this project, the product never implemented user feedback in the design process prior.

Impact - 5 new feature directions were created from this design sprint and each one proved to boost user retention by at least 50%  with more then 90% of users preferring the newly proposed features.

People Problem

People need a simple way to find things to do around them.

Constraints

When it comes to an experimental solution like this, we need to approach it with some conditions for success. A few of the official constraints I had included....
-        CEO and CTO wouldn’t spare engineering or designer talent on the project
-        I would need to design, code, test, and analyze so I had to design and research with the technical time commitment aspect in mind
-        My work schedule had 35ish hours dedicated to my main work duties so I had to work with the prior appointments I had for me and my team I lead
-        Only 21 days to design, code, test, redesign, recode, and evaluate.

Context

The way this design sprint goes will be a bit unusual due to the fact that I was doing this project while working as the Web Design team lead, user research lead, workshop curriculum coordinator (for how to use design tool like Figma and Framer ) , while mentoring 5 brand new, upcoming junior designers and 2 engineers. But let’s not get too detailed on my duties technical and leadership duties and just focus on the design aspect of Dive Chat X in this case study.

The goal will be to make a new Dive application in just 4 weeks based on the research we already have and direct insight from our churned user base. (i.e. we are gonna get help from people who turned down our product in the past )

The goal will be when the app is done, we will select 8 student organizations to participate in a beta test of the new version of Dive Chat during launch week on August 1st and measure if retention and/or growth were achieved. 

Why this Approach?



This strategy is commonly used in businesses that are looking to innovate with employees internally. Those who create such ideas are known as Intrapreneurs ( kind of like entrepreneurs, but they innovate to test new ideas for the larger company with a faster turn around ) . If you are interested in projects like this or work like this, you should explore famous Intrapreneurs such as Paul Bachheit - the man behind the innovation of Google's Gmail.

Solution.

The final solution includes changing the composition of the application on Dive, as well as the layout, interaction patterns, and adding several simple to implement functions that boosted retention significantly. This design solution was generated because of the large network of employees the young startup has and me leveraging my role as a lead designer to independently conduct research and contact over 100 Dive employees and 200 ambassadors  to gather over 1000 survey responses to the product across several states. 

Business Value

If retention is improved from the current 2% to 10%, we won't need to hire over 20 of sales representatives.

Now you are probably wondering how we got from before to after right?  The original Retention System that Dive used was really simple - we leveraged our 200+ loyal college ambassador program to get student organization leads to bring their organization members onto the platform. That was enough of a tool to build initial buzz about Dive because of the delayed launch date. 

The closer we got to the launch of the program, our initial idea was to hire a new set of employees to “teach” student organization leaders how to use the product with a 20 person Customer Experience team. The issue here is, the resources needed to hire 20 people is costly and it would be better if we could build an application that can retain users on its own with 50% success.


Define

Problem Definition
Stakeholders

First thing is first - lets empathize!  Below you will see a set of initial personas and requirements that were underwork since before this project.

So to build personas, I started off asking some basic questions:

What is the goal  for this design sprint? -  To test new ways to boost retention for Dive. 

What is the main issue? - Users don’t want to switch from their current messaging platforms.

What are the user’s goals? - To communicate & interact with local organizations in universities.

What are their pain points? - Switching to Dive Chat as a messaging app in inconvenient since it disrupts their current workflow.

What metrics do I need to work with?
- Decreasing the churn rate each month. (Churn Rate - percentage rate at which customers stop subscribing to a service ) 

Whether you are looking to shop your favorite artists, discover new talent, or simply seek inspiration for art of your own– our client wanted to introduce a convenient way of perusing a digital gallery right from the comfort of your own home.

Who's the Customer?

Their is also a distinction on the main kinds of consumers this product will be catered to.  My goal is to increase retention of Main Consumers, not sub consumers

  • Main Consumers: Members of Local Organizations, College Students 

  • Sub Consumers: High School Students People looking to explore their college community / town.

Design Requirements

Customer Requirements

  • Easy to Use

  • Retention must grow

  • Buildable for Web, Desktop, iOS & Android

Metric

  • Easy to Use: Decrease Clicks by at least 1 for each changed flow

  • Retention Must Grow: By at least 2% over the course of a month

  • Buildable for Web, iOS, & Android: Use Flutter because it exports Web, Desktop, iOS, and Android

The 3 main consumer requirements that Dive Chat as an app must meet are simple: must be easy to use, must be scalable to provide an experience across a campus, and must be navigable without an onboarding process. 

Research Results

Secondary Research - 
I conducted literature reviews on 42 publications relating to messaging systems, group communication, and local community growth.  During this research several key facts stood out to me, but for the sake of what is most relevant to this case study, these facts helped inform my build measure learn cycle.  

User Surveys - 
I knew I needed to get a lot of help for this project so prior to starting it, I got the lead for marketing and the Campus Programs lead to help me get a list of individuals who I could contact. I sent out 4 surveys during the first week of this project and I got back 120 responses. The nature of these responses and surveys will be explained as the case study goes on. But here are some of the key takeaways.

User Interviews - 
Before building anything, I also set up daily user interviews to ask people to complete tasks in the normal Dive app for the first 2 weeks and I did the same interviews for the next 2 weeks using my new form of Dive Chat to measure success. I interviewed college students, organizational leaders, and potential sponsors.  

Pain Points

I knew I needed to get a lot of help for this project so prior to starting it, I got the lead for marketing and the Campus Programs lead to help me get a list of individuals who I could contact. I sent out 4 surveys during the first week of this project and I got back 120 responses. The nature of these responses and surveys will be explained as the case study goes on. But here are some of the key takeaways.

Thanks to the people problems found with the surveys, I was able to develop 5 core Pain Points I thought were best to focus for this sprint.

- Unorganized user flow  -
The messaging flow was deemed unclear to 70% of users. Common struggles included navigating across the 3 main messaging channels (Events, Group Chats, and DMs ) for daily needs.
 
- Useless system without groups -
Even if we got a user to try Dive because their organization required it, the users neglected the app and in some cases formed special group chats using other platforms instead. Of 21 interviewed university organization leaders contacted, 8 planned to uninstall it before showing it to any of their fellow officers because they couldn’t test the product themselves as they didn’t have any groups to work with. 

- Too Complex - 78
% of interviews stated (unprompted) Slack and/or Discord was much easier for them to keep track of missed messages.  This was a problem since Dive was founded on the premise to be much simpler to learn than other channel based messaging systems.

- Scalable ( Web, iOS, and Android Modes ) - One of Dive’s most frequently brought up internal issues is how the iOS product is normally the “favorited version” of the app with Web and Android often being ignored. It seems users were able to figure this out as well. 90% of android feedback / comments from user reports were on broken functionality of core features such as notifications or sharing. This was because the app updates for iOS were more frequent then Android updates because the C-Suite had a preference for iOS devices over the android population. This was a problem since 65% of smartphone users use Androids and organizations valued letting anyone with any device being able to communicate equally. This issue is also pertinent to the Web Version of the application as all users will be able to use a Web Version of the app. 

- Unique Value Proposition -
Many organizations find this app is more complex than Slack, Discord or Facebook groups. Of 30 organizations that chose not to use Dive Chat, 28 stated Dive didn't offer anything their current message system wasn't offering. We need features that set Dive Chat apart by leveraging our company mission to build communities in college towns.

Ideate

When it came to brainstorming, I needed to start out with doing competitive SWOT analysis about our approach to growth. Since this case study is on Growth and Retention of Dive users, I found the two most important things to include were Dive's Weaknesses and Dive's Threats.

Dive Chat’s Weaknesses - Our churn rate for schools with an ambassador program was high as it was, but schools without an ambassador program hardly used the app and often rated it negatively. This is a problem since Dive’s plan is based around how Student Organization leads need to get on board to get users on the platform. However, my surveys and interviews revealed that groups couldn’t justify switching costs of getting everyone used to a new platform when the current platforms they use work fine. 

Dive’s Threats - I’m gonna go out on a limb and say that most of the people reading this case study are people who are familiar with Slack, Discord, Groupme, and Facebook right? It is no surprise that when asked which platform groups are interested in using as a group messaging platform, Slack, Discord, and Facebook were preferred by 87% of our population.

Competition

Several of Dive Chat's is currently one of many channel based messaging tools that can be used by college students. Alternatives include Slack, Groupme, Discord and Facebook Campus.

Ideation

Prototyping with Build Measure & Learn Cycles

When it came to ideation, I spent day 1 and day 13 just ideating different use cases and different product features and tests I could run. I also set up all my user interviews so I could take an Agile approach to understanding users as well as testing my new ideas on a day to day basis. For each idea, I storyboards and wireframes for about 46 mockups and 51 ideas including changes to copywriting. Due to the length of this case study, I will show those upon request. ( my email is olusolababatunde.sb@gmail.com ) I also hosted several interactive brainstorming games on these days. They include the following:

·        Virtual Game of Scribble
·        Sticky note affinity Mapping
·        Virtual Brainstorming in Miro
·        Whiteboarding with Jamboard & Stormboard

5 projects at once
There were 5 main projects I tackled based on the user insights I got from the research above. Each of these concepts, on their own, could be a case study in its own right.  However, I will show how they all contributed to the growth of the product retention!

The 5 core people problems are:
·        Unorganized Flow - How can we clarify the user flow to do basic tasks by altering our architecture? 
·        Useless without Groups - How can we provide value to users who don't have any groups to join with Dive? 
·        Too Complex - How can we alter the design system to simplify the user experience on Dive Chat?
·        Scalable - How can we make Dive be uniform across iOS, Android, and Web app versions? 
·        Value Proposition  - What can Dive provide that our competitors don't have? 



Solution 1 - Unorganized Flow

Design Thinking

Core Problem - Unorganized Flow

People Problem – Users stated it was hard to keep track of messages and events across Event Chats, Group hats, and Direct Messages ( DM’s ) compared to alternatives

Solution – Simplify the system so there is only one



Is this a problem?
Of the 120 survey responses, 71 mentioned the tool was hard to learn. These responses were organized with Grounded Theory using python to analyze the free response questions to group similar responses. This must be a problem as understanding app navigation is fundamental for anyone being able to fully use an app. In addition, it takes at least 2 more steps to open a group message compared to our competitors like Slack or Discord. And we take 5 more steps to work then our biggest competitor Groupme.

Wireframing
18 wireframes were generated for this problem and each focused on reorganizing the composition of the screen to “simplify” the design experience.

Below are a few of the interaction patterns I was considering.


Top 3 solutions
Top 3, from left to right, include the bubble grid, the iMessage List, and the tile navigation. I chose these options as they held the most visible number of group chats on the initial launch of the app. I assumed that if users are able to see all their groups, they wouldn’t think too much about how many steps it takes to find something.   

Design Validation

But which one is the best you are probably wondering? Allow me to explain a bit of my vocabulary first. 

There are 4 kinds of messages you can get on Dive Chat :
- Dives
- Channel based messages from organizations
- DMs or Direct Messages - messages with 1 recipient and 1 sender
- Group Chats - like DMs but with several people instead of one person d
- Event chats - these are temporary chats that are generated when you say you are attending an event

The first solution applies a bubble-like decision system. It focuses on removing the bottom navigation bar and lets people find chats based on their 7 most viewed messaging systems. The second option is familiar for iOS mobile users as it is a carbon copy of iMessages but with a distinction on the top for group chats, group messages, and user event chats.

This version lets people see, from a systematic view, all their messages for chats, channel-based messages and event based messages.

The third one is a composition that was designed to allow users to view up to 8 chats at once and it groups direct messages and group messages together ( as seen on one’s phone normally ) Now each has their merits and weaknesses so it is best we test them on some users!

Composition Testing
Test Details
- 30 individuals were given a test to find basic information about groups on a prototype.
- They were asked to find which group had 4 unread messages.
- This test was designed to see which could be navigated the fastest without prior knowledge of the app or its structure

Each version had 10 testers and I averaged the time it took each person to complete the tasks as you see to the side.

Results

Explain
Based on the chart you see above, people were able to understand the Tile Mode design better than any other design as they were able to complete tasks 3 times faster in this mode than the current iMessage mode. 
The Winner and the Reason
The tile mode won for a few reasons. A handful of them may be contributed to …
- Unique grid system
- Decreases the amount of clicks to find a group
- Allows you to view up to 12 groups at once ( more than the original 6 groups )
- Fastest speed meant strangers could learn and navigate the product easier

Based on this design system, I chose to redesign the entire app to focus on the minimalistic style. So it was naturally the mode I chose to hinge my entire design system for Dive X around. An issue with the current Dive Chat was it was developed at a 48 Hour hackathon and, since then, the app has been about designing what the Engineering Team and C-Suite team thought “captured their vision” rather than asking the users what they wanted out of the system.

So this new information architecture was one that was inspired by the user input. Due to limitations on time and my limited abilities as an app developer, I had to choose 1 color to design this tool in – light mode or dark mode.

Testing & Results
Between a control & variable testing group, the results were very significant. As you can see in the graph to the side, most people found this new version of Dive much easier to understand and navigate. The variable having Dive X's and the control having the original version. After contacting 60 people, 2 groups of 30, people were 5 times more likely to pitch dive to their student orgs if they were using the Dive X version of the app instead of the original version of the app.

Results

With more time…
I would have tested all 18 concepts. I simply chose the 3 I felt were most intuitive to understand. If it wasn’t for the fact I was very tight on time with a 21 day deadline and 4 other tests to conduct, I would have included more time for testing. I also would have run these concepts by the C-Suite to ask them their thoughts. I only had time to get their opinion on one of the 18 mockups.

Solution 2 - Clarify Groups

Design Thinking

Core Problem - Unorganized Flow

Is this a problem?
Of the 120 survey responses, 71 messages mentioned the tool was hard to learn. These responses were organized with Grounded Theory using python to analyze the free response questions to group similar responses. Not only that, people need to have proof something works to believe it works so these mega groups may be a good way to prove our ability to work well as a messaging platform.  Fortunately, this is a problem that possesses a solution. Dive Chat exists for the sake of communities and communities are often looking to grow themselves.

Currently, the way someone can search for a community is only by 1 of 2 ways.
1) They must have a group request code to join a certain group  ( often populated by a link ) and
2) They must open the “For you” tab, search for the Group Discovery Feature, and look at what groups are available. An additional restriction here is you can only see groups that are made by people in your university.

People Problem – People have nothing to do on Dive Chat unless they are already in several groups. Unfortunately, people won’t recommend a tool normally unless they know the tool provides them something from the initial use.

Solution – Suggest a list of communities for newcomers to join during onboarding so they can have events to join. These groups would be massive professional groups based on the user’s preferences.


Current Onboarding Solution
The current onboarding system was found, via Google Analytics, to have a large drop off rate. In other words, people were quitting the app before seeing its full capabilities. As you can see in this video, the entire process of joining the app takes nearly a dozen screens with a lot of information that is not really needed to use the application.

So I began exploring ways I could simplify the onboarding process so I could also have room to add group discovery to the onboarding process of the app.  

Composition Testing
So, after contacting experienced users(i.e. using Dive for at least 1 month ) about how they would expect to find communities in the app, we got a very large number of responses expecting to find the group discovery function to be in Discovery  or Onboarding.  

In addition to that, almost 80%  of the people who responded didn’t know there even was a group discovery feature in Dive because their campus didn’t have any public groups. This makes sense since college organizations don’t want to have just anyone join a group without paying dues or completing an application.

Thanks to this significant data showcasing how most people expect to join Dive Chat Groups during onboarding, my solution was to build an a new Onboarding flow that encouraged searching for groups.

Design Validation

So, now that we know public groups are, pretty much, non-existent on Dive Chat, how do we give people something to do when most groups are unsearchable without a specific code? The solution I chose to go with were Global Communities!

Something interesting about Dive Chat is our very large ambassador program and how it is made up of college students, each with their own career goals and majors and aspirations. My proposal for solving this problem was to create a virtual community room ( similar to SubReddits or Linkedin Groups ) that allows people with certain career goals across the country to communicate with each other and network. 

In essence, we are basically creating groups that are catered around a specific professional theme like “Resume Critiques” that users can join at the start of the onboarding process.

The Winner and the Reason
Now we knew how we needed to shorten the onboarding process so we could make room for a community finding feature. All that remains is simply deciding which screens should be removed from the onboarding process and move to in-app experiences. Below you can see a graph of the results of how long it took people to complete certain onboarding tasks on average thanks to Google Analytics. Clearly, the profile prompt and description were taking up much more time than was needed for an onboarding process so I removed that in the Dive X program and shifted that input of information to an in-app exercise the next time someone opens the app after joining their first group.

When the new onboarding process you see was completed, I did a test to verify the success with an AB control variable group test again. The design was successful but here were the reasons why I found it successful.
·       I went with this design since it is fast, simple, and clean
·       It Gathered repeated data like student status & university by requiring a university email. (with a student email, no need to verify phone number)
·       23 out of 24 prefer this flow to the original flow
·       I promoted finding other Dives ( public groups ) in the onboarding process
·       Verification emails were sent before a user can use the full application
·       About me and Profile Prompts were moved to in-app experiences
·       No excessive animations or filler screens
·       Due to time restrictions, no password verification for this MVP

The results of the AB test are below.

Results

Each participant was asked to rate their experience on a scale of 1 to 10 for the “complexity” they found in the onboarding process. I then grouped answers together ( i.e. 1 and 2s == very simple to understand and 9s and 10s = very complex )  to identify a more obvious pattern.  As you can see in this graph, most people found the new onboarding process very simple and quick to finish.

This part, specifically, could get a case study in its own right so feel free to let me know if you would like me to present a pitch deck with more details!  

With More Time…
I would make the groups more unique for each individual based on their field of study. I.e. If someone wants to work in tech, I would make a Tech Group Dive for them to join. This way it would add value to the consumers as it will help them see Dive as a nation-wide networking tool that is has the potential to be.

Something that our competitors ( like Groupme, Slack, Discord ) tend to lack. I would also love to create a more overall “full” experience for finding groups with a proper search engine, but with all my restrictions, this was a good “proof of concept” to validate if there is a need to allocate resources to this function.

However, this would have required not only more testing, but a few people to be a part of these “sample” groups.  I’d imagine it would take at least 7 days to build these groups and build decent conversations at minimum, so it was ideal for time reasons to not test too many ideas during this 21 day sprint. 

Solution 3 - Simplify Architecture

Design Thinking

Core Problem - Too Complex

Context - Initially, we thought this may be just because users are used to Slack and have developed muscle memory for completing tasks, but during my interviews,  some people with no experience using Slack also took a long time to learn to use our tool to complete a basic task.  So this meant our solution was very simple.

People Problem – Users are taking 1.5x – 4.0x longer to complete tasks inside their group chat rooms then expected compared to tools like Slack.

Solution – Minimize the number of steps( or taps ) to use the group chat rooms so that the number of steps are equal to, or less then, the time expected. This  means, we need to minimize the number of steps it takes to create a chat and navigate the homepage.

Is this a problem?
Of the 120 survey responses, 84 responded that 4 or more of their student organizations use the same messaging platform as Discord or Slack. So, one can infer this may mean that people prefer to use a single tool to hold all their student organizations. And if forced to make a switching cost, we need to perform at least at the level of our competitors. 


After aiming to understand these interaction patterns, I chose the top 3 based on the least number of steps users would need to take. This approach was taken as minimizing the number of steps involved for the past 2 experiments has been very effective at boosting retention so I chose option C as my solution so I could spend an 2 days working on the next Core Problem . So while this core problem didn’t get much “testing” done, it was adapted to fit the new theme of the app.

Interaction Patterns
When it came to building the high-fidelity version of this design, I wanted each room to feel unique and original so I chose to add custom color changes for gradients that are pre chosen by group organization leaders. This color change is shown in the loading screen as well as a subtle highlight for the event carousel and the buttons.

Events on Top
I also included a carousel of upcoming events on top so people could search for new events as one of the first things they do when entering a group. This design was generated with the intention of making sure users knew what events were coming up in a group while allowing them to skim the chat easily.



After aiming to understand these interaction patterns, I chose the top 3 based on the least number of steps users would need to take. This approach was taken as minimizing the number of steps involved for the past 2 experiments has been very effective at boosting retention so I chose option C as my solution so I could spend an 2 days working on the next Core Problem . So while this core problem didn’t get much “testing” done, it was adapted to fit the new theme of the app.

Interaction Patterns
When it came to building the high-fidelity version of this design, I wanted each room to feel unique and original so I chose to add custom color changes for gradients that are pre chosen by group organization leaders. This color change is shown in the loading screen as well as a subtle highlight for the event carousel and the buttons.

Events on Top
I also included a carousel of upcoming events on top so people could search for new events as one of the first things they do when entering a group. This design was generated with the intention of making sure users knew what events were coming up in a group while allowing them to skim the chat easily.

Technical Restrictions
There were a handful of technical limitations for this design as well. For instance, the loading screen standardized the wait time across entering different groups. At the time this experiment was conducted, the current Dive App took an inconsistent amount of time to load and open new groups. This is a technical limitation due to how some groups have a lot more data and photos then others.

The change in time was often between 0.5 seconds to 2.5 seconds so I thought the loader would make a more uniform interaction across all platforms. That being said, the best way to approach this in industry is simply to alter the code to decrease memory usage however I was on a time crunch so this loading screen was simple enough to implement.

Creating a Chat



I altered the architecture of the group creation flow to focus only on the most essential information in a quick, sequential, manner. Several of the questions ( like about which gradient color should be used ) were able to be ignored due to the new uniform color change that was being introduced in the app.

Design Validation


Due to time restrictions, I chose to not conduct design validation for this feature because I wanted to allocate extra time for developing and designing the web application as I would be coding it from scratch in addition to designing it.

With more time, I would have done AB testing as I did with the first 2 solutions. However, since the first 2 solutions performed better when the number of clicks decreased, I made the assumption decreasing clicks here would improve performance.

Results

As you can see, only the redundant, non-group chat specific questions were removed and thus we simplified the process so it takes less clicks

With more time…  
Naturally, a huge limitation on this Core Problem was the solution didn’t have much testing. There were ways I could have tested it like by asking users to complete certain tasks and ask them to recall information. However, due to coding time, I was already a day over schedule for this project due to coding difficulties setting up and retaining firebase data.

And of the 5 core problems the next one is the most demanded problem and this one was the most “vague” and thus was likely not able to be solved in the time restrictions I was given. That being said, I feel this was an essential part for Dive X as it introduces the new design system for the app and it paved the groundwork for other designers to explore this UI and iterate on it.   But in terms of facts, by decreasing the number of steps it takes to complete a task, we did make the solution “less complex”.

Solution 4 - Web Application

Design Thinking

Core Problem - Scalabe ( Web mode ) 

Context - This is a strange issue to talk about from a design perspective because Dive was originally coded in React Native with an iOS based set of features. Naturally it is hard enough to keep up with making consistent pushes to both iOS and Android versions of the app because of this constant conflict, we hardly released our Web Version of Dive except for testing purposes as our engineering team wasn’t big enough to sustain updating concurrently with the mobile app.

People Problem – How can we verify features are updated concurrently for iOS, Android and Web?

Solution – Build a web app for Dive Chat.

Technical Solution - Rebuild Dive in Flutter as a programming language and build a web version of the app that could be updated concurrently with the iOS and Android versions of this app.

I knew this issue from speaking with the engineering interns and I chose to correct it by coding Dive X in Flutter / Dart( another hybrid app development language ) as it allows exporting to iOS, Android, Web, and Desktop apps at the start of this experiment.

So … we are done with this core problem, early right? Just change the tech stack to one that supports all 4 platform modes concurrently? Not quite – we need to develop a web version of the application that can easily connect with the mobile version of the app by dynamically "feeding" objects from  the mobile app to the web version. i.e. any message, icon, photo etc for the web version will be generated based on what was made in the mobile app automatically.

Is this a problem?
100% of surveyed users claimed they are waiting for the web app and 70% claimed they would NOT use the Dive Chat mobile app without the Web app as well. Dive was able to retain users with the promise of a web version in the works, but just due to the inherent resources needed to maintain an iOS and Android version, progress on the Web Version has been slow.

As a matter of fact, the only people who got to view the web version of Dive Chat were those who requested it in user testing. Those users were much more likely to recommend Dive Chat than those who hadn’t tried the web version.

Wireframing
Before I can get into the details of how wireframing went, let me give a high level overview of how I tackled designing and developing the web version of this app so quickly. I designed Dive Chat in Figma and prototyped in Framer.io and coded it in Flutter with the backend using Firebase.

With that being said, since Flutter can export code, regardless of position and design, to iOS, Android, Web and Desktop apps, this was an exportable solution for the web from the beginning. I mainly needed to spend time coding a new version of this so I didn’t get to test many interaction patterns.



Composition Testing
Below you can see several views for web mode that were made

Design Validation

Testing & Results With more time…  As the product design lead of the web design team for Dive, I had a lot of insights I had acquired from past experiments and I inputted them into this design. So, unlike the other design changes, I knew exactly what to expect when building this part of the program out. It was mostly a “technical” design problem if nothing else. Something I would love to have though would be a fellow designer or engineer to help with this feature. Due to the physical size of the canvas associated with designing web tools, I ran out of time much quicker than I expected.

With 4 more days, I would have been able to test the various interaction patterns to make a better decision on choosing the layout of the web version. Fortunately, users were happy with any web version so this problem was successfully solved.  

Results

Due to NDA reasons, the results will be available during an interview. However, I can share that people who used the Web Version of Dive were 3 times more likely to use our referral system to invite organizations to join Dive Chat.

Solution 5 - Unique Value Proposition

Design Thinking

Core Problem - Value Proposition

People Problem – Organization leaders don’t see how Dive Chat is better then other platforms like Discord, Slack or Groupme.  

Solution – Provide additional custom features that are tailored to helping College Organizations thrive and share information.

Is this a problem? 
This is actually a pretty hard problem to quantify. The users often don’t speak directly about what features they are lacking in tools that have been adequately meeting their needs. After all, the reason some organizations use Discord over Slack tends to be insignificant in the grand scheme of things. Both are capable of doing the same things for the most part with Slack having an advantage of customizability thanks to the add-ons and custom scripts while Discord’s audio channels make it ideal for people having discussions & game meetings casually. Despite these small differences, outside tools like Zoom or Google Calendar can eliminate the issues that both tools lack compared to the other.

However, Dive Chat is different. Dive Chat lacks features that both tools have with our original value position being to make a simpler channel based messaging system. However, this value proposition isn’t very effective as Discord, Groupme, and Slack together have 7% of the market share as it is for group based communication. Student organizations may have an easier time simply teaching others to use Slack / Discord with a, possibly, an hour long seminar.

So what do we do? We can’t hope to compete with giants like Slack and Discord that have dozens of engineers, designers, and project managers in a short amount of time like 21 days right?

We will have to lack features like right now such as custom scripts and add-ons due to our restrictions. So the only thing to do is instead of focusing on our messaging side of the app, let's try innovating the “Discovery” aspect of it.

Wireframing

I went through a build measure learn cycle to develop 3 new features – Delayed Messaging, Discovery, and Audio Rooms / Stages. To learn more about these 3 features please read the Dive Chat Monetization Case study as it will be a more, in detailed, look at monetization as these 3 features I had designed well before this experiment, but I moved them up on the road map due to their ability to solve this problem.

Delayed Messages
Now, due to NDA reasons, I can’t show you screens of Delayed Messaging publicly but I can show you them upon request ( email  me at olusolababatunde.sb@gmail.com ). But as you can guess from the name, it helps student organization leaders send messages at distant points in the future.

This has been a feature that Discord and Slack haven’t included but it is something that can be crucial for student organizations. They can be developed with custom scripts, but for they are missing for organizations that lack technical programming skills. Events happen all the time and future reminders are something that organizations would be willing to pay for. Currently, Dive X was designed to allow up to 10 delayed messages by group admins only each month for free. However, admins can purchase up to 60 delayed messages for a given month.

The reason for the limitation is to prevent abuse and over usage of delayed messaging while also providing a financial gain for Dive by having organizations use the feature as much as they like.

Discovery ( For Groups, Discounts, & Deals )
Discovery is a new section in Dive that was designed to replace the “For You” section. Notice how some of the changes include changing the icon from the ambiguous person to a compass for representing discovery. This is also the reason why the settings button was moved to the upper left corner of every screen so that the user will always have access to settings instead of needing to look in the For You Tab.

For you was initially a tab that held all features of Dive that did not contribute to messaging or events. This included: Settings, preferences, profile editing etc.

Discovery as a tab is really simply. By taking events that are made on Dive & events purchased by sponsors, we display searchable events for anyone on Dive Chat. This feature was designed to be rolled out from one university to the next instead of shown to all users at once. At a high level, this feature allows event owners, group owners and coupon owners to generate publicly searchable events, groups, and coupons on the Dive Platform.

The events are sourced from EventBrite so all event owners on the platform have the option to pay a small fee and we will import their events straight into the Dive Chat app. The Groups are sourced by publicly searchable groups in the area. And the Coupons are purchased as advertising space for our sponsors who would like to promote a coupon or a deal.

The basic functions are below.
-        You can find and follow organizations, events, and coupons that are found on Discovery to get notifications for future instances.
-        Discover Deals, Events, and Groups all at the tips of your fingers
-        Share your findings with other contacts or in other applications so we subtly promote Dive while providing additional advertisements for the sponsors.   

In addition to being a feature that Discord and Slack lack, this is something that can only be launched by organizations with a large network of ambassadors like Dive.

To learn more, please visit the Dive Chat Monetization Case Study

Voice Room / Stage
The Stage ( Code name voice room, the name is still undecided ) is a room where organizational leaders can host meetings basically from their phone. The feature is similar to video calling with Zoom or Google Hangout but it is severely limited in functionality. While coding this entire app, this feature was probably the hardest to build from a technical standpoint and I had to limit my design to reusing old components to make a minimum viable product so my design freedom was restricted highly.

In addition I had to put limitations such as no more than 100 people in a 1 hr meeting due to really high streaming costs. And even then, that number will likely drop down to 12 or 24 for public launch. 

Design Validation

To learn more, please visit the Dive Chat Monetization Case Study. But in short, this is how I approached validation.

I had users from the prior experiments for Solution 1, Solution 2, and Solution 4 all opt into testing the new features for value proposition. I chose them because they were all adept to using the new Dive Chat X product from the prior tests.

I did a control and variable tests again, but this time, I got people's opinions based on using the Stage and Discovery. While I need to save the data and testing for a portfolio case study presentation, I can tell you the result was that Discovery increased the user satisfaction of the product significantly while improving retention in the testing group.

Composition Testing

The testing for this feature was simple – during the time I was working on the “Complex” Core Problem and the Scalable Core Problem, I had made 2 versions of Dive for a pair sample groups to try using in an AB test. I simply asked them to use the app and when I asked them a few days later they would tell me if they were likely to recommend the app.  

Results

The Winner and the Reason
People who had the Delayed Messages, Discovery, and Stage were much more likely to refer to the app because 7/8 were willing to refer to it when it had those features compared to the control group that only had 3/8 referrals.

With more time…  
While I know the group I contacted for this procedure was smaller than the others, it was mostly due to the fact I was running out of time. Based on those results, I decided to move ahead and finished the design with the new features added on.

With more time, I would test this on more people. Something else was I tested this on individual small organizations that all attended the Same University ( Texas A&M & NYU ) due to time restrictions. In reality, I should have tested this in several schools to get an accurate representation. However, this amount of validation was enough for me to proceed in my evaluation of Dive X and Dive Original.

One of the other main takeaways I had was how technically complicated I found implementing a video conference feature for the app. I had never done it before and it was already difficult ( and costly ) to just get the video to be stored, but streaming the video live in high quality was a difficult task indeed. I would have loved help or more time to figure out how to make the feature more effective.

Lastly, in hindsight, this feature should have been the first one I tried to evaluate. I chose to start with Unorganized Flow because that would minimize repeated effort for my work in the future. But earnestly, the business would have benefited most from evaluating new features compared to a redesign of the UI.

Build, Measure, Learn Cycles

When it came to ideation, I spent day 1 and day 13 just ideating different use cases and different product features and tests I could run. I also set up all my user interviews so I could take an Agile approach to understanding users as well as testing my new ideas on a day to day basis. For each idea, I storyboards and wireframes for about 46 mockups and 51 ideas including changes to copywriting. Due to the length of this case study, I will show those upon request. ( my email is olusolababatunde.sb@gmail.com ) I also hosted several interactive brainstorming games on these days. They include the following:

·        Virtual Game of Scribble
·        Sticky note affinity Mapping
·        Virtual Brainstorming in Miro
·        Whiteboarding with Jamboard & Stormboard

5 projects at once
There were 5 main projects I tackled based on the user insights I got from the research above. Each of these concepts, on their own, could be a case study in its own right.  However, I will show how they all contributed to the growth of the product retention!

The 5 core people problems are:
·        Unorganized Flow - How can we clarify the user flow to do basic tasks by altering our architecture? 
·        Useless without Groups - How can we provide value to users who don't have any groups to join with Dive? 
·        Too Complex - How can we alter the design system to simplify the user experience on Dive Chat?
·        Scalable - How can we make Dive be uniform across iOS, Android, and Web app versions? 
·        Value Proposition  - What can Dive provide that our competitors don't have? 



Solution 1 - Unorganized Flow

Design Thinking

Core Problem - Unorganized Flow

People Problem – Users stated it was hard to keep track of messages and events across Event Chats, Group hats, and Direct Messages ( DM’s ) compared to alternatives

Solution – Simplify the system so there is only one



Is this a problem?
Of the 120 survey responses, 71 mentioned the tool was hard to learn. These responses were organized with Grounded Theory using python to analyze the free response questions to group similar responses. This must be a problem as understanding app navigation is fundamental for anyone being able to fully use an app. In addition, it takes at least 2 more steps to open a group message compared to our competitors like Slack or Discord. And we take 5 more steps to work then our biggest competitor Groupme.

Wireframing
18 wireframes were generated for this problem and each focused on reorganizing the composition of the screen to “simplify” the design experience.

Below are a few of the interaction patterns I was considering.


Top 3 solutions
Top 3, from left to right, include the bubble grid, the iMessage List, and the tile navigation. I chose these options as they held the most visible number of group chats on the initial launch of the app. I assumed that if users are able to see all their groups, they wouldn’t think too much about how many steps it takes to find something.   

Design Validation

But which one is the best you are probably wondering? Allow me to explain a bit of my vocabulary first. 

There are 4 kinds of messages you can get on Dive Chat :
- Dives
- Channel based messages from organizations
- DMs or Direct Messages - messages with 1 recipient and 1 sender
- Group Chats - like DMs but with several people instead of one person d
- Event chats - these are temporary chats that are generated when you say you are attending an event

The first solution applies a bubble-like decision system. It focuses on removing the bottom navigation bar and lets people find chats based on their 7 most viewed messaging systems. The second option is familiar for iOS mobile users as it is a carbon copy of iMessages but with a distinction on the top for group chats, group messages, and user event chats.

This version lets people see, from a systematic view, all their messages for chats, channel-based messages and event based messages.

The third one is a composition that was designed to allow users to view up to 8 chats at once and it groups direct messages and group messages together ( as seen on one’s phone normally ) Now each has their merits and weaknesses so it is best we test them on some users!

Composition Testing
Test Details
- 30 individuals were given a test to find basic information about groups on a prototype.
- They were asked to find which group had 4 unread messages.
- This test was designed to see which could be navigated the fastest without prior knowledge of the app or its structure

Each version had 10 testers and I averaged the time it took each person to complete the tasks as you see to the side.

Results

Explain
Based on the chart you see above, people were able to understand the Tile Mode design better than any other design as they were able to complete tasks 3 times faster in this mode than the current iMessage mode. 
The Winner and the Reason
The tile mode won for a few reasons. A handful of them may be contributed to …
- Unique grid system
- Decreases the amount of clicks to find a group
- Allows you to view up to 12 groups at once ( more than the original 6 groups )
- Fastest speed meant strangers could learn and navigate the product easier

Based on this design system, I chose to redesign the entire app to focus on the minimalistic style. So it was naturally the mode I chose to hinge my entire design system for Dive X around. An issue with the current Dive Chat was it was developed at a 48 Hour hackathon and, since then, the app has been about designing what the Engineering Team and C-Suite team thought “captured their vision” rather than asking the users what they wanted out of the system.

So this new information architecture was one that was inspired by the user input. Due to limitations on time and my limited abilities as an app developer, I had to choose 1 color to design this tool in – light mode or dark mode.

Testing & Results
Between a control & variable testing group, the results were very significant. As you can see in the graph to the side, most people found this new version of Dive much easier to understand and navigate. The variable having Dive X's and the control having the original version. After contacting 60 people, 2 groups of 30, people were 5 times more likely to pitch dive to their student orgs if they were using the Dive X version of the app instead of the original version of the app.

Results

With more time…
I would have tested all 18 concepts. I simply chose the 3 I felt were most intuitive to understand. If it wasn’t for the fact I was very tight on time with a 21 day deadline and 4 other tests to conduct, I would have included more time for testing. I also would have run these concepts by the C-Suite to ask them their thoughts. I only had time to get their opinion on one of the 18 mockups.

Solution 2 - Clarify Groups

Design Thinking

Core Problem - Unorganized Flow

Is this a problem?
Of the 120 survey responses, 71 messages mentioned the tool was hard to learn. These responses were organized with Grounded Theory using python to analyze the free response questions to group similar responses. Not only that, people need to have proof something works to believe it works so these mega groups may be a good way to prove our ability to work well as a messaging platform.  Fortunately, this is a problem that possesses a solution. Dive Chat exists for the sake of communities and communities are often looking to grow themselves.

Currently, the way someone can search for a community is only by 1 of 2 ways.
1) They must have a group request code to join a certain group  ( often populated by a link ) and
2) They must open the “For you” tab, search for the Group Discovery Feature, and look at what groups are available. An additional restriction here is you can only see groups that are made by people in your university.

People Problem – People have nothing to do on Dive Chat unless they are already in several groups. Unfortunately, people won’t recommend a tool normally unless they know the tool provides them something from the initial use.

Solution – Suggest a list of communities for newcomers to join during onboarding so they can have events to join. These groups would be massive professional groups based on the user’s preferences.


Current Onboarding Solution
The current onboarding system was found, via Google Analytics, to have a large drop off rate. In other words, people were quitting the app before seeing its full capabilities. As you can see in this video, the entire process of joining the app takes nearly a dozen screens with a lot of information that is not really needed to use the application.

So I began exploring ways I could simplify the onboarding process so I could also have room to add group discovery to the onboarding process of the app.  

Composition Testing
So, after contacting experienced users(i.e. using Dive for at least 1 month ) about how they would expect to find communities in the app, we got a very large number of responses expecting to find the group discovery function to be in Discovery  or Onboarding.  

In addition to that, almost 80%  of the people who responded didn’t know there even was a group discovery feature in Dive because their campus didn’t have any public groups. This makes sense since college organizations don’t want to have just anyone join a group without paying dues or completing an application.

Thanks to this significant data showcasing how most people expect to join Dive Chat Groups during onboarding, my solution was to build an a new Onboarding flow that encouraged searching for groups.

Design Validation

So, now that we know public groups are, pretty much, non-existent on Dive Chat, how do we give people something to do when most groups are unsearchable without a specific code? The solution I chose to go with were Global Communities!

Something interesting about Dive Chat is our very large ambassador program and how it is made up of college students, each with their own career goals and majors and aspirations. My proposal for solving this problem was to create a virtual community room ( similar to SubReddits or Linkedin Groups ) that allows people with certain career goals across the country to communicate with each other and network. 

In essence, we are basically creating groups that are catered around a specific professional theme like “Resume Critiques” that users can join at the start of the onboarding process.

The Winner and the Reason
Now we knew how we needed to shorten the onboarding process so we could make room for a community finding feature. All that remains is simply deciding which screens should be removed from the onboarding process and move to in-app experiences. Below you can see a graph of the results of how long it took people to complete certain onboarding tasks on average thanks to Google Analytics. Clearly, the profile prompt and description were taking up much more time than was needed for an onboarding process so I removed that in the Dive X program and shifted that input of information to an in-app exercise the next time someone opens the app after joining their first group.

When the new onboarding process you see was completed, I did a test to verify the success with an AB control variable group test again. The design was successful but here were the reasons why I found it successful.
·       I went with this design since it is fast, simple, and clean
·       It Gathered repeated data like student status & university by requiring a university email. (with a student email, no need to verify phone number)
·       23 out of 24 prefer this flow to the original flow
·       I promoted finding other Dives ( public groups ) in the onboarding process
·       Verification emails were sent before a user can use the full application
·       About me and Profile Prompts were moved to in-app experiences
·       No excessive animations or filler screens
·       Due to time restrictions, no password verification for this MVP

The results of the AB test are below.

Results

Each participant was asked to rate their experience on a scale of 1 to 10 for the “complexity” they found in the onboarding process. I then grouped answers together ( i.e. 1 and 2s == very simple to understand and 9s and 10s = very complex )  to identify a more obvious pattern.  As you can see in this graph, most people found the new onboarding process very simple and quick to finish.

This part, specifically, could get a case study in its own right so feel free to let me know if you would like me to present a pitch deck with more details!  

With More Time…
I would make the groups more unique for each individual based on their field of study. I.e. If someone wants to work in tech, I would make a Tech Group Dive for them to join. This way it would add value to the consumers as it will help them see Dive as a nation-wide networking tool that is has the potential to be.

Something that our competitors ( like Groupme, Slack, Discord ) tend to lack. I would also love to create a more overall “full” experience for finding groups with a proper search engine, but with all my restrictions, this was a good “proof of concept” to validate if there is a need to allocate resources to this function.

However, this would have required not only more testing, but a few people to be a part of these “sample” groups.  I’d imagine it would take at least 7 days to build these groups and build decent conversations at minimum, so it was ideal for time reasons to not test too many ideas during this 21 day sprint. 

Solution 3 - Simplify Architecture

Design Thinking

Core Problem - Too Complex

Context - Initially, we thought this may be just because users are used to Slack and have developed muscle memory for completing tasks, but during my interviews,  some people with no experience using Slack also took a long time to learn to use our tool to complete a basic task.  So this meant our solution was very simple.

People Problem – Users are taking 1.5x – 4.0x longer to complete tasks inside their group chat rooms then expected compared to tools like Slack.

Solution – Minimize the number of steps( or taps ) to use the group chat rooms so that the number of steps are equal to, or less then, the time expected. This  means, we need to minimize the number of steps it takes to create a chat and navigate the homepage.

Is this a problem?
Of the 120 survey responses, 84 responded that 4 or more of their student organizations use the same messaging platform as Discord or Slack. So, one can infer this may mean that people prefer to use a single tool to hold all their student organizations. And if forced to make a switching cost, we need to perform at least at the level of our competitors. 


After aiming to understand these interaction patterns, I chose the top 3 based on the least number of steps users would need to take. This approach was taken as minimizing the number of steps involved for the past 2 experiments has been very effective at boosting retention so I chose option C as my solution so I could spend an 2 days working on the next Core Problem . So while this core problem didn’t get much “testing” done, it was adapted to fit the new theme of the app.

Interaction Patterns
When it came to building the high-fidelity version of this design, I wanted each room to feel unique and original so I chose to add custom color changes for gradients that are pre chosen by group organization leaders. This color change is shown in the loading screen as well as a subtle highlight for the event carousel and the buttons.

Events on Top
I also included a carousel of upcoming events on top so people could search for new events as one of the first things they do when entering a group. This design was generated with the intention of making sure users knew what events were coming up in a group while allowing them to skim the chat easily.



After aiming to understand these interaction patterns, I chose the top 3 based on the least number of steps users would need to take. This approach was taken as minimizing the number of steps involved for the past 2 experiments has been very effective at boosting retention so I chose option C as my solution so I could spend an 2 days working on the next Core Problem . So while this core problem didn’t get much “testing” done, it was adapted to fit the new theme of the app.

Interaction Patterns
When it came to building the high-fidelity version of this design, I wanted each room to feel unique and original so I chose to add custom color changes for gradients that are pre chosen by group organization leaders. This color change is shown in the loading screen as well as a subtle highlight for the event carousel and the buttons.

Events on Top
I also included a carousel of upcoming events on top so people could search for new events as one of the first things they do when entering a group. This design was generated with the intention of making sure users knew what events were coming up in a group while allowing them to skim the chat easily.

Technical Restrictions
There were a handful of technical limitations for this design as well. For instance, the loading screen standardized the wait time across entering different groups. At the time this experiment was conducted, the current Dive App took an inconsistent amount of time to load and open new groups. This is a technical limitation due to how some groups have a lot more data and photos then others.

The change in time was often between 0.5 seconds to 2.5 seconds so I thought the loader would make a more uniform interaction across all platforms. That being said, the best way to approach this in industry is simply to alter the code to decrease memory usage however I was on a time crunch so this loading screen was simple enough to implement.

Creating a Chat



I altered the architecture of the group creation flow to focus only on the most essential information in a quick, sequential, manner. Several of the questions ( like about which gradient color should be used ) were able to be ignored due to the new uniform color change that was being introduced in the app.

Design Validation


Due to time restrictions, I chose to not conduct design validation for this feature because I wanted to allocate extra time for developing and designing the web application as I would be coding it from scratch in addition to designing it.

With more time, I would have done AB testing as I did with the first 2 solutions. However, since the first 2 solutions performed better when the number of clicks decreased, I made the assumption decreasing clicks here would improve performance.

Results

As you can see, only the redundant, non-group chat specific questions were removed and thus we simplified the process so it takes less clicks

With more time…  
Naturally, a huge limitation on this Core Problem was the solution didn’t have much testing. There were ways I could have tested it like by asking users to complete certain tasks and ask them to recall information. However, due to coding time, I was already a day over schedule for this project due to coding difficulties setting up and retaining firebase data.

And of the 5 core problems the next one is the most demanded problem and this one was the most “vague” and thus was likely not able to be solved in the time restrictions I was given. That being said, I feel this was an essential part for Dive X as it introduces the new design system for the app and it paved the groundwork for other designers to explore this UI and iterate on it.   But in terms of facts, by decreasing the number of steps it takes to complete a task, we did make the solution “less complex”.

Solution 4 - Web Application

Design Thinking

Core Problem - Scalabe ( Web mode ) 

Context - This is a strange issue to talk about from a design perspective because Dive was originally coded in React Native with an iOS based set of features. Naturally it is hard enough to keep up with making consistent pushes to both iOS and Android versions of the app because of this constant conflict, we hardly released our Web Version of Dive except for testing purposes as our engineering team wasn’t big enough to sustain updating concurrently with the mobile app.

People Problem – How can we verify features are updated concurrently for iOS, Android and Web?

Solution – Build a web app for Dive Chat.

Technical Solution - Rebuild Dive in Flutter as a programming language and build a web version of the app that could be updated concurrently with the iOS and Android versions of this app.

I knew this issue from speaking with the engineering interns and I chose to correct it by coding Dive X in Flutter / Dart( another hybrid app development language ) as it allows exporting to iOS, Android, Web, and Desktop apps at the start of this experiment.

So … we are done with this core problem, early right? Just change the tech stack to one that supports all 4 platform modes concurrently? Not quite – we need to develop a web version of the application that can easily connect with the mobile version of the app by dynamically "feeding" objects from  the mobile app to the web version. i.e. any message, icon, photo etc for the web version will be generated based on what was made in the mobile app automatically.

Is this a problem?
100% of surveyed users claimed they are waiting for the web app and 70% claimed they would NOT use the Dive Chat mobile app without the Web app as well. Dive was able to retain users with the promise of a web version in the works, but just due to the inherent resources needed to maintain an iOS and Android version, progress on the Web Version has been slow.

As a matter of fact, the only people who got to view the web version of Dive Chat were those who requested it in user testing. Those users were much more likely to recommend Dive Chat than those who hadn’t tried the web version.

Wireframing
Before I can get into the details of how wireframing went, let me give a high level overview of how I tackled designing and developing the web version of this app so quickly. I designed Dive Chat in Figma and prototyped in Framer.io and coded it in Flutter with the backend using Firebase.

With that being said, since Flutter can export code, regardless of position and design, to iOS, Android, Web and Desktop apps, this was an exportable solution for the web from the beginning. I mainly needed to spend time coding a new version of this so I didn’t get to test many interaction patterns.



Composition Testing
Below you can see several views for web mode that were made

Design Validation

Testing & Results With more time…  As the product design lead of the web design team for Dive, I had a lot of insights I had acquired from past experiments and I inputted them into this design. So, unlike the other design changes, I knew exactly what to expect when building this part of the program out. It was mostly a “technical” design problem if nothing else. Something I would love to have though would be a fellow designer or engineer to help with this feature. Due to the physical size of the canvas associated with designing web tools, I ran out of time much quicker than I expected.

With 4 more days, I would have been able to test the various interaction patterns to make a better decision on choosing the layout of the web version. Fortunately, users were happy with any web version so this problem was successfully solved.  

Results

Due to NDA reasons, the results will be available during an interview. However, I can share that people who used the Web Version of Dive were 3 times more likely to use our referral system to invite organizations to join Dive Chat.

Solution 5 - Unique Value Proposition

Design Thinking

Core Problem - Value Proposition

People Problem – Organization leaders don’t see how Dive Chat is better then other platforms like Discord, Slack or Groupme.  

Solution – Provide additional custom features that are tailored to helping College Organizations thrive and share information.

Is this a problem? 
This is actually a pretty hard problem to quantify. The users often don’t speak directly about what features they are lacking in tools that have been adequately meeting their needs. After all, the reason some organizations use Discord over Slack tends to be insignificant in the grand scheme of things. Both are capable of doing the same things for the most part with Slack having an advantage of customizability thanks to the add-ons and custom scripts while Discord’s audio channels make it ideal for people having discussions & game meetings casually. Despite these small differences, outside tools like Zoom or Google Calendar can eliminate the issues that both tools lack compared to the other.

However, Dive Chat is different. Dive Chat lacks features that both tools have with our original value position being to make a simpler channel based messaging system. However, this value proposition isn’t very effective as Discord, Groupme, and Slack together have 7% of the market share as it is for group based communication. Student organizations may have an easier time simply teaching others to use Slack / Discord with a, possibly, an hour long seminar.

So what do we do? We can’t hope to compete with giants like Slack and Discord that have dozens of engineers, designers, and project managers in a short amount of time like 21 days right?

We will have to lack features like right now such as custom scripts and add-ons due to our restrictions. So the only thing to do is instead of focusing on our messaging side of the app, let's try innovating the “Discovery” aspect of it.

Wireframing

I went through a build measure learn cycle to develop 3 new features – Delayed Messaging, Discovery, and Audio Rooms / Stages. To learn more about these 3 features please read the Dive Chat Monetization Case study as it will be a more, in detailed, look at monetization as these 3 features I had designed well before this experiment, but I moved them up on the road map due to their ability to solve this problem.

Delayed Messages
Now, due to NDA reasons, I can’t show you screens of Delayed Messaging publicly but I can show you them upon request ( email  me at olusolababatunde.sb@gmail.com ). But as you can guess from the name, it helps student organization leaders send messages at distant points in the future.

This has been a feature that Discord and Slack haven’t included but it is something that can be crucial for student organizations. They can be developed with custom scripts, but for they are missing for organizations that lack technical programming skills. Events happen all the time and future reminders are something that organizations would be willing to pay for. Currently, Dive X was designed to allow up to 10 delayed messages by group admins only each month for free. However, admins can purchase up to 60 delayed messages for a given month.

The reason for the limitation is to prevent abuse and over usage of delayed messaging while also providing a financial gain for Dive by having organizations use the feature as much as they like.

Discovery ( For Groups, Discounts, & Deals )
Discovery is a new section in Dive that was designed to replace the “For You” section. Notice how some of the changes include changing the icon from the ambiguous person to a compass for representing discovery. This is also the reason why the settings button was moved to the upper left corner of every screen so that the user will always have access to settings instead of needing to look in the For You Tab.

For you was initially a tab that held all features of Dive that did not contribute to messaging or events. This included: Settings, preferences, profile editing etc.

Discovery as a tab is really simply. By taking events that are made on Dive & events purchased by sponsors, we display searchable events for anyone on Dive Chat. This feature was designed to be rolled out from one university to the next instead of shown to all users at once. At a high level, this feature allows event owners, group owners and coupon owners to generate publicly searchable events, groups, and coupons on the Dive Platform.

The events are sourced from EventBrite so all event owners on the platform have the option to pay a small fee and we will import their events straight into the Dive Chat app. The Groups are sourced by publicly searchable groups in the area. And the Coupons are purchased as advertising space for our sponsors who would like to promote a coupon or a deal.

The basic functions are below.
-        You can find and follow organizations, events, and coupons that are found on Discovery to get notifications for future instances.
-        Discover Deals, Events, and Groups all at the tips of your fingers
-        Share your findings with other contacts or in other applications so we subtly promote Dive while providing additional advertisements for the sponsors.   

In addition to being a feature that Discord and Slack lack, this is something that can only be launched by organizations with a large network of ambassadors like Dive.

To learn more, please visit the Dive Chat Monetization Case Study

Voice Room / Stage
The Stage ( Code name voice room, the name is still undecided ) is a room where organizational leaders can host meetings basically from their phone. The feature is similar to video calling with Zoom or Google Hangout but it is severely limited in functionality. While coding this entire app, this feature was probably the hardest to build from a technical standpoint and I had to limit my design to reusing old components to make a minimum viable product so my design freedom was restricted highly.

In addition I had to put limitations such as no more than 100 people in a 1 hr meeting due to really high streaming costs. And even then, that number will likely drop down to 12 or 24 for public launch. 

Design Validation

To learn more, please visit the Dive Chat Monetization Case Study. But in short, this is how I approached validation.

I had users from the prior experiments for Solution 1, Solution 2, and Solution 4 all opt into testing the new features for value proposition. I chose them because they were all adept to using the new Dive Chat X product from the prior tests.

I did a control and variable tests again, but this time, I got people's opinions based on using the Stage and Discovery. While I need to save the data and testing for a portfolio case study presentation, I can tell you the result was that Discovery increased the user satisfaction of the product significantly while improving retention in the testing group.

Composition Testing

The testing for this feature was simple – during the time I was working on the “Complex” Core Problem and the Scalable Core Problem, I had made 2 versions of Dive for a pair sample groups to try using in an AB test. I simply asked them to use the app and when I asked them a few days later they would tell me if they were likely to recommend the app.  

Results

The Winner and the Reason
People who had the Delayed Messages, Discovery, and Stage were much more likely to refer to the app because 7/8 were willing to refer to it when it had those features compared to the control group that only had 3/8 referrals.

With more time…  
While I know the group I contacted for this procedure was smaller than the others, it was mostly due to the fact I was running out of time. Based on those results, I decided to move ahead and finished the design with the new features added on.

With more time, I would test this on more people. Something else was I tested this on individual small organizations that all attended the Same University ( Texas A&M & NYU ) due to time restrictions. In reality, I should have tested this in several schools to get an accurate representation. However, this amount of validation was enough for me to proceed in my evaluation of Dive X and Dive Original.

One of the other main takeaways I had was how technically complicated I found implementing a video conference feature for the app. I had never done it before and it was already difficult ( and costly ) to just get the video to be stored, but streaming the video live in high quality was a difficult task indeed. I would have loved help or more time to figure out how to make the feature more effective.

Lastly, in hindsight, this feature should have been the first one I tried to evaluate. I chose to start with Unorganized Flow because that would minimize repeated effort for my work in the future. But earnestly, the business would have benefited most from evaluating new features compared to a redesign of the UI.

Testing & Iterating

Testing

Its time for the test! The 21 days were used for designing and developing the Dive X App. But something that you may be wondering is "why was 21 days the deadline?"

After the 21 day sprint, the idea was to do a control variable month long test with 2 rounds of testing to see if people would be more or less keep using Dive depending on if they used the Dive Chat X version or the Dive Chat Original version.

Procedure:
- control and a test group.
- Both groups got 2 versions of Dive: 1 version was Dive as it currently is, the other was the Dive X version with all the suggested modifications found in this experiment.
- Their were 15 different student organizations with populations of 50 or more people in the control and test group each.
- Both groups were asked to use Dive as a communication tool among officers / leadership.
- At the end of 1 month, both had to report  if they would use Dive Chat for the entire organization.

Final Results

Dive Chat (Currently) Group : The retention was 7/15 from the first batch of users for 1 month and 3/15 for the second batch

Dive X Group : The retention was 15/15 from the first batch of users for 1 month and 14/15 for the second batch

As you can guess, the user driven features of Dive X produced the best results at retention because it was focused on meeting users needs on an individual basis. It is hard to justify redesigning an entire application for an early startup, but sometimes just a different visual is what you need to get people onboard.

Summary

Above you can see the estimated impact that was used to know which features contributed the most to retention.

Not only did this provide helpful data to know what would boost retention, but it also provided 5 new problem spaces to explore and a prioritization order for each.

Professionally

Honestly, I didn’t start this process thinking I would redesign the entire app. However, it makes sense a full app redesign was needed as this product was designed initially without ever asking the users what they personally wanted. A possible cause for Dive’s Rapid success in a short amount of time was the ambassador program taking on students who had lost their internships and that forced Dive to focus on engineering more so then design thanks to the rapid growth of users.

This case study also helped explore and test a lot of ideas that the c-suite was considering such as if changing programming languages would be wise of what kind of features do users want to learn about. That being said we could have learned a lot more about the project if I had more engineers and designers to work with. 

Takeaways
As designers at startups, we need to be willing to wear multiple hats and I am more than willing to wear the engineering hat. However a few lessons along the way
- Don’t allocate only “a day for engineering”. I used to be able to rely on that when I had a small team that included several engineers. However, that was no longer viable when working on my own
- Users don’t know what they want; so sometimes it is best to test for learning to see changes in behavior.

Psychological

Thanks to my time working in several research labs as a user researcher, I have picked up a large number of psychology principles when designing. Here are my 5 most frequently used principles in my design for this  project.

Hick's Law - More options leads to harder choices.
A common trend in reducing user confusion was to minimize the number of options they have at any point in time in the app. A prime example was removing the 2 tab navigation system from the original Dive Chat.

Confirmation Bias - People look for evidence that confirms what they think.
When making the global communities, Confirmation Bias was essential to developing that solution. It is also famously used for big companies like Reddit as the founders built their own subreddits to start giving the platform traction at first.

Social Proof - People adapt their behaviors based on what others do.
Social Proof was used in tandem with Confirmation Bias. The reason Social Proof was used so prominently in this redesign, was because we needed to get users to adapt to the new channel based messaging system that Dive Chat has.

Anchoring Bias - People rely on the first piece of information they see when making decisions.
This was used frequently when choosing interaction patterns and composition of my designs. That is why I chose to up Events on top of every group chat. This way, we could get people more inclined to use the events features on Dive Chat and help provide reasons to stay on the platform.

Default Bias - People tend to not change an established interaction behavior
All assumptions made in this case study were on the basis of Default Bias. We knew what our target demographic was currently using to solve each of our problems, so Default Bias was how we focused on making everything seem familiar. For instance, the chat rooms look like normal text messaging rooms instead of online public forums like Discord or Slack.

Final Designs

Mockups

Let's See More!

Facebook

Upflex🔒