.

 

Slack App Redesign in 8 Hours

Design Challenge

I have really enjoyed using Slack desktop app for chatting with teammates among different slack teams for more than one year. And the product positioning for Slack is a platform for team communication. However, every time I switch to use the iOS Slack mobile app on the go, there are several usability pain points in the mobile version of Slack app that I hope to address through this redesign exercise.

My Solution

 

 

Before Redesign

analysis process

First of all, I did a quick competitor analysis with iMessage, Facebook Messenger, Facebook Workplace, and WhatsApp, to see what aspects they did better than Slack mobile app. I also studied the desktop application of Slack, to see what are the key functions that Slack tries to keep consistent among the desktop version and its mobile app.

After that, I did two usability testings with two of my friends. User A has used Slack mobile app on a daily base, while User B never used Slack mobile app before. I asked them to use the iOS Slack mobile app to send messages, add reactions to one message, and to find a channel in a different slack team (requiring switching team). As a result of my studies, I compiled the list of usability issues below.

 

Usability Issues

  • Too many interactions on one page, need integration & simplification

  • Main page is a specific chatting page for a certain group – can cause confusion: Which team does this group chatting below to? Where am I in the App?

  • Text Typing Area
    •  Arrow button - difficult to add reaction to others' messages
    • other functions simplified to “+” button (different ways to add photos/emoji)
  • Two way swipe for 2 side bars
    • Re-organize into one hamburger button, slack channel switch move to navigation bar, etc.

 

Visual Analysis

  • Overall style - need to be less busy, cleaner
    • Grid
    • Color pallet (too many colors)
    • Add fun elements

 

Sample Process Sketch

 

After Redesign

Redesigning Main Page

  • Considering the main functionality of Slack app is to support team communications, I redesigned its main page to display all new messages instead of showing the user a specific group chatting page.
  • Moreover, I integrated the two top navigation buttons into one hamburger button, to make the interface less busy.
  • The bottom navigation bar is also a new feature, with important interactions nested in previous side bars.
  • Lastly, I also redesigned the Slack logo and overall color scheme, so it's cleaner and more flat in terms of colors.
 
 

"+" Button on Main Page

In order to allow easy access to main functions such as writing messages, uploading files, creating new groups, I designed a floating "+" button on the main page.

 
 

Integrated Side Bar

Instead of previous two side bars on the left and right sides, I redesigned the side bars to integrate them into one right side bar. The previous left side is not easy to use for most people, if they use single hand interacting with mobile phones.

 
 

Chatting Page

  • I formatted the grids for profile image, time, name, and message content, to make it cleaner in terms of overall visual style.
  • I replaced the unclear "up" button in the typing area with emoji button and "+" button, so that the UI is easier to understand.
 
 

Long Press a Message

I redesign the long-press effect to a single message, so that the reactions/star mark are closer to the targeting message. And I also removed three unnecessary buttons from the bottom menu, eg. "cancel", so that the menu is less overwhelming for users to use.

 
 

D3.js - Interactive Visualization

I worked with my fellow student, Dina Bseiso, at UC Berkeley School of Information using D3.js to visualize a dataset of the Times Higher Education World University Rankings for 2011-2016 from Kaggle's World University Rankings.

We created two visualizations for this dataset: a parallel coordinates and a radar chart, and we thought through how to use these two different visualizations with the same dataset based on different strengths and weaknesses. We decided to use the data differently in each chart, with the parallel coordinates showing every original record in the dataset, and the radar chart showing a set of aggregated data derived from the dataset.

You can click on the images below to view each chart online.

 

 

Highcharts.js

Using the Excel Pivot Table tool, I notice there are two major features of the online music business trends dataset to be visualized.

First of all, the trend among the total number of tracks purchased for each genre was increasing from 2012 to 2014 but dropped during 2015, while the percent purchased as streaming music was continuously increasing from 2012 to 2015. So I’ve designed a main line chart to show this trend and the total number of tracks for every genre over the years.  Click here to view my full report on my design process.

Infographics

The Death and Life of Detroit

This is a narrative infographic case study on the economic conditions of Detroit's yesterday, today, and tomorrow.

Infographic - Racial and Economic Levels in Detroit

 

Mind Mapping - Data Visualization / Graphic Design

Overview

Team Work | Contribution: 50% | Instructor: Perry Kulper | 2013.10

Tools - Rhinoceros 3D modeling, Grasshopper, Image Analysis, Adobe Photoshop, Illustrator, InDesign, AutoCad

This project is a representation of a food assembly of pomegranates and egg with time-based data collection. It maps the imagination of the yesterday and today of the pomegranate and the egg from the perspective of network of the food and philosophic thoughts of entropy.

 

San Francisco Crime Data Visualization and Analysis - Tableau

Introduction

I am very interested in the crime incident data in San Francisco, especially curious about how many processed crime instances are done by different Police Departments in different Police Department Districts, and whether they prioritize to solve more violent crimes or not. Besides, I’m also very interested in whether specific time during a day, or specific day during a week, or specific month in a year would have more crime instances than other of the time periods. Moreover, with the astonishing ISIS terrorism attack on the night of November 13rd 2015 (Paris local time, which was the afternoon of November 13rd 2015 for PST) in Paris, and the ISIS terrorism attack on December 2nd 2015 (PST) in San Bernardino, CA, I want to explore with the dataset to see whether the two news had certain effects over the next day and the next few days of the violent crime numbers in San Francisco.
With these interests in mind, I came up with the following 4 sets of hypotheses to explore the Crime Incidents Dataset Recorded by San Francisco Police Department, from the link here.

 

Hypothesis p1: Do more violent crime incidents end up being processed in San Francisco, compared to property crime incidents, public-misbehavior incidents, other crime incidents and non-criminal incidents?

P1 Conclusion: Because the actual number of the violent crimes that are processed is the highest among all the 5 categories, so this support the hypothesis that violent crimes are processed more than other type of crimes. However, it would be great if the initial dataset could have specified what’s under the “OTHER OFFENSES”, one of the most crime incidents under Violent Crimes. But in reality it could vary a lot from different offenses to decide whether a certain crime is violent crime or not.

 

Hypothesis p2: Are there any relationships or trends between specific months of the year, specific days of the week, or specific time periods of the day in San Francisco?

Hypothesis p2 - Month

With the peaks and low points visually clear, it supports that there are certain relations among the total number of incidents or each incident category with month. For example, February and December tend to have lower crime incidents both in total and in each crime categories, while Violent Crime has clear peak periods in January and May.

 

Hypothesis p2 - Day of a Week

From this statistic distribution graph, we could see actually there are certain fluctuations for different categories of crimes from the 7 days in a week, and which range is the majority of the data falling into. There are also property crime outliers revealed by this graph on Friday both as extremely low or high values. This could be actually a recording result, because property crimes could be very minor like lost or theft of small personal items.
But since this graph could not show the total number of the incidents and for each crime category, so I supplement it with a stacking bar chart to cover that aspect. We can see for Fridays and Saturdays there tend to have slightly more incidents, which supports my Hypothesis 2.

 

Hypothesis p2 - Time in a Day

The first dashboard here shows a clear trend of different crime types over a different time during the different days. The overall trends of incident number changing over 24 hours show up amazingly uniformly, which also shows up on the stacked bar chart showing the same trend happening also in terms of total number of all the incidents.

The second dashboard on the next page shows the statistic distribution of all the crime incidents. You can also see the three outliers of Property Crimes happening from 18:00 to 20:00 of a day, which actually makes sense since that period of a day is a night peak, which provide a great chance to thefts to conduct property crimes. These also support my hypothesis 2 in terms of time in a day.

 

Hypothesis p2 – Days Before and After the ISIS Attacks

  • Is there an increase in the number of crime incidents in San Francisco after the ISIS terrorism attack on November 13rd 2015 at Paris, France? (my expected increase might be a result of the more potential ISIS members in U.S. getting the impact of the Paris attack)
  • Is there a drop in the number of crime incidents in San Francisco after the ISIS terrorism attack on December 2nd 2015 (PST) in San Bernardino, CA? (my expected drop might be a result of the more caution and more police force effort after this nearby shooting within the same state)

For these two hypotheses, it would be best to just show November and December of 2015, so that the subtle changes over each day impacted by the news of ISIS attacks could be the clearest for people to see. I also pointed out the date right after each attack, so that the changes could be identified immediately. From the result in the dashboard above, because there is an upward trend, it supports my hypothesis that there would be an increase of violent crimes right after the ISIS attack in Paris. However, my hypothesis of a drop after the California ISIS attack is refuted due to the opposite trend.

 

Hypothesis p3: Is there a relationship between certain police department districts and the number of unprocessed crime incidents in San Francisco?

During my exploration, I found that simply comparing the number of the unprocessed incidents for each police department district might not leading to the understanding of whether certain police department district is not putting above average effort into processing those incidents, because of the fact that for one PD district, eg. Southern PD district, they might have the most unprocessed incidents, but meanwhile they might also have the most processed incidents, just because of the total amount of incidents in that PD district is the maximum. From that point, I came up with another chart to show the percentage of unprocessed and processed incidents for each single PD district, so that we can have a more comprehensive view of the relationship between PD districts and the number and percent of unprocessed crime incidents in San Francisco. Since the distinctions among each different PD districts are easy to tell from the dashboard below, this hypothesis is also supported.

 

Hypothesis p4: Do more crime incidents happen in certain geographic areas that are known for being unsafe specified by the x (longitude) and y (latitude) values in the dataset of San Francisco? 

This Map is based on average of longitude and average of latitude of crime incidents. Color shows different Crime Categories. Size shows the number of crime incidents. Details are shown for actual crime address. The view is filtered on Crime Categories, which shows Property Crimes, Violent Crimes, Other Crimes and Public Misbehavior.

As you can see, certain areas such as downtown San Francisco and Mission Area shows a high density of crime incidents, which supports my hypothesis of that more crime incidents happen in certain geographic areas that are known for being unsafe in San Francisco.