journey through web development

Tag: uni

Give me gif, Slack – case study

The aim of this case study has focused on creating a contemporary design concept that would solve the issue of poor accessibility to gifs on Slack.

Emoji and animated messages have become a part of our writing culture. Sceptics might have thought that it is a step backwards in evolution (back to the time when people use hieroglyphs, perhaps?), but there are a lot of positives about this change. Using emoji can lighten the overall mood of the text, is understood across different languages and adds the ability to quickly express thoughts or emotions. According to Contactually, “your brain processes what it’s seeing on video 60,000 times faster than it processes text.” Sending a gif or a meme can also help improve communication between co-workers and is a great way to tighten the relationships.

“Emojis have become a cultural phenomenon, shaping the way we express ideas and emotions across languages, friends, and generations.” 

Dan Rhatigan

Overview

Let’s start by shining a bit of light on Slack itself. It is a channel-based messaging platform. Create a group or accept an invitation to an existing one, and then send messages, share files, call and connect other apps (e.g Github or DropBox). Mostly used in workplaces to communicate within a team. At the agency I work for, we have one general channel and one for every project we work on. This set up helps us work as a team, whether we are based in the office, working from home or from a different city.
The current situation around the world and increased remote working make platforms like this even more important than ever, enabling communication with other members of the team.

slack desktop window
https://uk.pcmag.com/productivity-2/40141/slack

The challenge

As mentioned in the introduction, short, animated videos have become extremely popular and widely used to quickly express our thoughts and ideas. Instead of writing a long, wordy message that would perfectly describe our feelings, we can send a meme that does just that.
Using gifs and memes on Slack is possible, but extremely time-consuming and not user-friendly at all. Let’s have a look at how to add a gif to a conversation on Slack at the moment:

gifs on slack at the moment screen cast
  1. Click on the lightning icon
  2. Look for Giphy and click the link
  3. Type a word to look for meme
  4. SHUFFLE one gif at a time to find that perfect one

The issue that arises here is when you shuffle too much by mistake. You will have to spend some extra time shuffling and praying for a gif you wanted to reappear again. If you have a slow internet connection, it will elongate the search time too, as, after every shuffle, you have to wait for a gif to load.
No straight-away access to gifs also creates an issue, when the user doesn’t know how to describe the gif he/she has in mind.

Estimated time to find your meme: WAY TO LONG.

Gifs on other platforms

Facebook, WhatsApp or Twitter are only the few that have a messaging feature. All mentioned above have a gif button directly on the message tab, allowing users to quickly browse for a perfect animated message to add to the conversation. General styling and the number of extra features, like a search bar, favourite button, or grouping by a category varies throughout, but the ability to pain-free access to wanted content is present.

facebook gif
whatapp gif
twitter gif

Estimated time to find what you are looking for: approx. 10-30 seconds.

Scope and constraints

The idea that would solve the issue of poor accessibility to gifs on Slack needs to seamlessly fit into the current design of the application. The key constrain is performance. The enhancement should not lower it.
Slack is available for desktop and as a mobile app, therefore the concept needs to take into consideration both window sizes, with the focus on different users’ needs on each.

The solution

The analysis of the current design and how similar platforms are dealing with the issue have clarified, that the solution for observed time consuming and stressful access to gifs and memes should be an enhancement of the current system with a Gif button.
So many applications are using this method for quick, easy access to gifs, and reusing that familiar design is, in my opinion, the way to go.

In design, by making things that behave in a certain way appear as expected, we help our users make the most of their cognitive cache. 
In other words, we don’t make them think.”


Jason Grigsby,  Progressive web apps

The benefits of adding the gif button directly to the message window are enormous. Increased user experience will be visible on multiple spectrums:

  • access to multiple gifs at the same time to allow comparison
  • ability to browse different categories via the search bar
  • shortened time spent on searching
  • gifs visible without typing anything
  • no issue with losing the perfect meme

Design enhancement process

The process of designing the enhancement mentioned above have started from the brainstorming phase. This step is crucial to explore possible options, get inspired, and quickly iterate through different ideas.


Deliverables from this phase are rough sketches of the concept:

desktop window sketches
Desktop window sketches
mobile window sketches
Mobile window sketches

Next, the Slack window has been created in Figma. The overlay technique has been used to ensure the right measurements and spacing of the components.

slack window
Slack window. Image used as a guide from: https://slack.com/intl/en-gb/help/articles/360043092173-The-Slack-experience-for-desktop

Gif button component has been created in the style matching other buttons on the message tab.

gif button design
Gif button design

Gif button was then added onto a base layout, keeping in mind the spacing between the other elements.

base desktop layout enhanced with a gif button
Base layout enhanced with a Gif button

Lastly, the design of the open gif bar has been created for both desktop and mobile windows.

base desktop layout with an open gif bar
Base layout with an open Gif bar
base mobile layout
Base mobile layout
base mobile layout with open gif bar
Base mobile layout with open gif bar

Deliverables from this phase are desktop and mobile designs featuring a gif button.
Click the link below to view the Figma file ⬇︎

Results

Completed designs have been enhanced with animated interactions to showcase the envisioned idea. Below, you can click on the Gif button to open up the gif bar or click on the link at the bottom to navigate to the Figma file.

Conclusions

The finished product is an enhancement of the current design, solving the problem of poor accessibility to gifs on Slack. User experience has been improved by introducing quick and easy access to gifs straight from the message tab.


Positive outcomes:
→ Users can now see and scroll through multiple gifs, even without typing a phrase to search for.
→ Functionality similar to those found in other messaging platforms means less time spent by a user figuring out how the new feature works.
→ The issue of losing the perfect gif or meme have been eliminated.
→ Time spent searching for a gif has been dramatically reduced.


Do you use Slack?

What do you think of my idea to enhance the current design and functionality of Slack with a Gif button? Let me know in the comments! 👇

Liked this post? Share:

How I got into uni after I thought I never would

Since most of my days are now split between inventing things we can do while locked inside the house, and which will satisfy a short-attention-span of a three-year-old, and finishing all my uni assignments, I have literally no time (or power) for any extra-curriculum learning. Sad, but that’s how it is sometimes. After all, we are all just humans, right?

Anyway, I thought I will tell u a little story of how I got into Uni after I thought I never would be able to. I wanted to write this post for a long time to shine some light on my past and maybe to inspire someone in a similar situation to mine.

Let’s start from the beginning though…

okay, not beginning beginning, just about 9 years ago. I was 18 years old, still living in Poland. As most school leavers, I had huge dreams. I planned on studying product design and going abroad to live in the UK (English language countries always fascinated me for some reason) I’ve met my husband back then too, and as it turned out, he also planned on moving away (stuff straight from the movies, eh? Happens in real life too 😅)  So off we went into the unknown. The reality of trying to live in a totally new country is harsh though, and my plans of applying to uni fall into a second plan, while we were trying to stay afloat, pay bills and well- just live. But every now and again, this unfulfilled dream of having a higher education nudged me and made me feel… incomplete? worse? it’s hard to name this feeling…

Life went by, we moved a few times from one city to another city and the next one too, trying to find our space in this world (still looking for it 😂🤷‍♀️), we got married and had our daughter. The unfulfilled dream? It was still there bothering me, maybe even more than ever since H. got born. It sounds cheesy, but I wanted her to be proud of me. And I wanted to be proud of me, too. But how on Earth would I be able to go back to school while taking care of a child and working part-time? I was certain this door is closed for me forever. And then.. one of my friends applied and got into uni. That friend also has a child and she was working! She gave me hope and a whole lotta inspiration! (You know who you are, as I was thanking you like million times 😘) I decided I am gonna try myself. You know, if she could pull this off, maybe I could too! My husband and family back in Poland were really supportive of my decision.

The process of applying…

is very different from what I knew from Poland, and it scared me a lot, especially writing a personal statement and getting someone to write your recommendations for you (since I graduated school so long ago, I asked my manager from work which she gladly agreed to do) I applied to 5 different courses on 2 local unis, and I waited…
On the 4th of Jan 2019 (yup, I still remember, that’s how excited I was) I got an email, 4 unconditional places! Me, they wanted me. I could not believe it. Choosing which course to actually go to took me some time, but in the end, I think I chose the right one.
Getting accepted was only a first step though. As a mature student with a small child, job and bills to pay, my biggest worry was how am I gonna manage it all financially and time-wisely. Every change of the timeline gives me a headache, but as my first year at uni comes to an end, I realize that what I thought will be my obstacle, turns out to be my power and motivation.
Sometimes I wonder what if I’d go to uni straight after graduating school, but then I wouldn’t choose the subject I am really passionate about and which will lead me to a career I believe is the right for me. I probably wouldn’t be so focused on achieving good grades and slurp the knowledge from everything possible.
I think everything happens for a reason. Those 7 years I spent believing I wouldn’t have a degree has taught me to fight for myself and my dreams. They made me a stronger person who found her voice and is not afraid to use it.

Live is not a straight line, and it doesn’t matter when you hit certain milestones. Everyone’s story is different and they are all beautiful. We just need to believe in ourselves and be brave to step into the unknown. 

*Featured Photo by Vasily Koloda on Unsplash
The post is using:
-photo by Mel Poole on Unsplash
-photo by Clark Tibbs on Unsplash

Liked this post? Share:

© 2021 KAT CODES

Theme by Anders NorenUp ↑