Slack iPhone redesign concept

UX/UI design - Sketch

header@2x.png
 
 

📋 1. Description of the project

This article has been originally published on Medium.

Like most people in the tech industry, I have used Slack in my work on many occasions. But while I always thought that the UX was intuitive on desktop, I felt the iPhone version could be improved. I decided to analyze in detail what could be revised and to propose a redesign concept.

 

🔬 2. UX analysis of the current Slack app

analysis_1@2x.png
analysis_2@2x.png
analysis_3@2x.png
analysis_4@2x.png
 

👨🏻‍💻 Process and work

3.1 Low-fidelity mockups

Once I understood the issues I wanted to fix on the Slack UX, I started to do low-fidelity mockups.

Some of my early drawings

Some of my early drawings

 

3.2 High-fidelity mockups with Sketch 49

Once the low-fidelity mockups were finished, I started working with Sketch. But before I even started sketching the redesign concept, I wanted to reproduce the current Slack iPhone UI. It allowed me to better understand the design of their iOS application and ensure that my proposal would respect Slack’s design.

I did the original UI for both the “Aubergine” theme and the “Hoth” theme

I did the original UI for both the “Aubergine” theme and the “Hoth” theme

Once the original UI was reproduced in Sketch, I started my redesign concept. I made sure to use the prototyping feature of Sketch 49 as you can see below. You can also download the file and try it for yourself. I also uploaded the prototype on Sketch Cloud if you want to preview it directly from your browser.

prototyping@2x.png
 

3.3 Versioning with GitHub + Git LFS

I used GitHub (with Git LFS) in order to manage the different iterations of the project.

GitHub allows me to easily see the changes for each commit I made

GitHub allows me to easily see the changes for each commit I made

 

💎 4. Outcome: Redesign concept

You’ll find the most important screens below along with some explanations:

 

▶️ 5. Preview the prototype

You can preview the prototype directly from your browser thanks to Sketch Cloud: sketch.cloud/s/5n99y

 

⬇️ 6. Download the file

You can download the Sketch file on sketchappsources.com.

It contains:

  • 15 artboards of the original Slack UI as of March 2018
  • 14 artboards of the redesign concept