large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/ux-case-study-can-slack-be-used-outside-work-8edf294bec13?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Anya <img alt="" src="https://cdn-images-1.medium.com/max/600/1*VunKenj3hpJVX-CDLj4auQ.jpeg">A New Way to Work!</p>
<p><strong>S</strong>lack is a cloud-based team collaboration tool, used by teams around the world to chat with each other effortlessly.</p>
<p>Slack is rapidly taking over emails and meetings, as the leading platform for office and team communication.</p>
<h4>The Brief</h4>
<p>Our brief is quite interesting as it has <strong>nothing to do with Slack’s team collaboration</strong>, but to come up with a <strong>new feature</strong>, that will help Slack move to mainstream market as a <strong>personal communication</strong> tool.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/250/1*WaHd5Onp4DIqIw75gwPqJg.jpeg">Sprint Duration</p>
<h4>Time Frame</h4>
<p>We had 2 weeks to complete the project with a <strong>high fidelity prototype</strong> as the final deliverable.</p>
<h4>The Team</h4>
<p>I was lucky to work with a great team on this project. Though we worked on some parts of the project together (like affinity mapping, ideation, and presentation), we worked individually on other parts like interviews, persona creation, and presentation materials.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*g6U5Z_r4Ouln3YCGHsGwnQ.jpeg">‘A’ Team</p>
<h4>My Roles</h4>
<p>Apart from the below UX roles, I utilized my ‘Scrum Master’ experience, to bring the team together to deliver the best outcome within the time frame allotted.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6lTORt4hJzd6GWKCnFJdYg.jpeg">My Roles in the Project</p>
<h4>The Process — Double Diamond</h4>
<p>Double diamond process maps the ‘divergent’ and ‘convergent’ stages of design process.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cNM6OWGew1Acbs_kSmCFNA.jpeg">UX Design Process</p>
<ul>
<li><strong>First Diamond</strong> is about “Doing the right thing”. This consists of “Research” and “Synthesis of Research” to validate if we are solving the right problem.</li>
<li><strong>Second Diamond</strong> is about “Doing things right”. This consists of “Ideation” and “Prototyping” to find the best solution to the right problem within the constraints of time and money.</li>
</ul>
<h3>Diamond 1 — Research and Synthesis</h3>
<h4>Slack Research</h4>
<p>Every great design begins with great research. We kicked off the project, with research on Slack.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/988/1*wAlRhIh3uxXdJDEwpIibBA.jpeg">Slack Research Topics</p>
<h4>Slack Research Insights</h4>
<ul>
<li>Clear, simple and charismatic motto and core values</li>
<li>From idea to billion-dollar business in just 3 years</li>
<li>Maintains clean UI by clever information architecture and content strategy</li>
<li>Strong paid customer base</li>
<li>Freemium business-model</li>
<li>Little to no interest in personal communication or social networking space</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*MIiG_6z0wihh1ZMCvmJ-HA.jpeg">Competitor Analysis</p>
<h4>Competitor Analysis</h4>
<p>We researched Slack’s direct competitors like Flock. We also researched key players in personal communication and social networking space.</p>
<h4>Topic Maps</h4>
<p>Insights from Slack research and competitor analysis helped us to identify topic maps.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lNdL1ZLny8qqFItVJ78ICQ.jpeg">Topic Maps</p>
<h4>User Research Method — Interviews</h4>
<p>We chose interviews as our user research method, to <strong>understand the stories</strong> behind Slack usage. Our topic maps helped us drive the questions for our users.</p>
<p><strong>Profile of users we interviewed:</strong></p>
<ul>
<li>Slack users</li>
<li>Slack experience level (Novice &#8211; Experts)</li>
<li>Active users of online communication</li>
<li>Active users of social media</li>
</ul>
<h4>Affinity Mapping</h4>
<p>Affinity mapping is a process that helps to identify themes, trends, and areas of improvement from the huge data collected through interviews.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aoEsMPL8mxnVctjtvmOLbg.jpeg">Affinity Mapping</p>
<h4>Discovery from Affinity Mapping</h4>
<ul>
<li>New users have <strong>learnability challenges</strong></li>
<li>Intermediate-advanced users have <strong>cluttering challenges</strong> (Too many channels)</li>
<li>Most users haven’t used some of Slack’s powerful feature like <strong>bots and app integration</strong></li>
</ul>
<h4><strong>Our most important discovery</strong> — “Our users won’t use Slack for personal communication”</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/884/1*7TkJMWwRq8rzOYGjq7F9zg.jpeg">Our Persona</p>
<h4>Persona</h4>
<p>As UX designers we constantly ask the question “Whose problem are we trying to solve”?</p>
<p>We could draw out our persona based on the discovery of affinity mapping.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1014/1*yJhuVbMjwEQabS10V3fjpA.jpeg">Are we solving the right problem?</p>
<h4>The Challenge</h4>
<p>We have<strong> hit an impasse at our project,</strong> as we realized <strong>we are not solving the right problem</strong>. Both Slack users and Slack business are not looking to use it beyond workplace communication. We decided to pivot and provide a return brief.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/781/1*9S7NZcapdzCGAv2slEss6A.jpeg">Return Brief Scope</p>
<h4>The Return Brief</h4>
<p>Based on the insights from our research, our return brief was about focusing on areas that benefit both Slack and it’s customers. We decided to focus on enhancing the experience of Slack’s target customers — Teams using Slack for workplace communication.</p>
<h3>Diamond 2— Ideation and Prototyping</h3>
<h4>Ideation Process</h4>
<p>We used the design studio ideation process, that consists of a collective idea generation methodology that is time-boxed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*KrfDvFWY4OQo_38QiYz0sg.jpeg">Ideation Process</p>
<h4>Ideas Generated</h4>
<p>We generated a lot of good ideas. Some of them were too wide or too deep.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/321/1*167gs5MUow7phtiNl_vC1A.jpeg">Some of the Ideas Generated</p>
<h4>Dot Voting</h4>
<p>A democratic dot-voting process was used by our team to choose the best idea.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*TsULSSWyUvyE2_F0vmHm5w.jpeg">Democratic Way of Choosing the Idea<img alt="" src="https://cdn-images-1.medium.com/max/782/1*lwDS4DSXgtPZ2WDdwjv8_g.jpeg">The Chosen Idea!</p>
<h4>Introducing Slack Board — The Chosen Idea</h4>
<p>The Slack board is a <strong>new feature for advanced Slack users </strong>like Christy. Previously Christy has to organize different types of information from multiple channels (messages, images, links, documents) in different ways.</p>
<p>The Slack board is one place to store all information of interest from multiple channels in one place (classified into boards). Christy can create as little or as many boards as she likes.</p>
<h4>Slack Board — User Flows</h4>
<p>Creating a new Slack Board — <strong>3 clicks</strong></p>
<p>Accessing any Slack Board — <strong>3 clicks</strong></p>
<p>Adding pins to any Slack Board —<strong> 2 clicks</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/731/1*1MJDsqAlsjDZS6cQKqhhow.png"></p>
<h4>Slack Board — Low fidelity Wireframes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xsMRD78l-OohOlJMgx4RTw.png">Adding information of interest from channels to boards</p>
<h4>Slack Board — User Testing and Feedback</h4>
<p>We tested the low fidelity prototype with our classmates (who have been using GA for a while) and even one of our instructors.</p>
<p>We had a very positive reception to the idea.</p>
<p><strong>Location of the ‘Pin’ icon</strong> — Testing helped us to identify the best place to have the ‘Pin’ icon.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/292/1*XoqJ-cDMVVUGA2JxRjL9HA.png">Pin Location</p>
<p><strong>Access to Slack Board</strong> — We had a separate icon to access Slack board. We incorporated it into the hamburger icon to be in sync with Slack’s UI design.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/292/1*uti0cUnUcVAuqmAyl0VtvQ.png">Icon to access Slack board</p>
<p><strong>Expansion button</strong> — We also had to redesign the expansion button on viewing the boards, to make it more cohesive.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/292/1*nLsEI5BsaskpcKi-yafN8w.png">Expansion button confused our users</p>
<h4>Slack Board — High fidelity Prototype</h4>
<p><a href="https://drive.google.com/file/d/0B62YggVxl5CeQjJnb29kYTUxVGs/view">Oct 9, 2017 2:32 AM.webm</a></p>
<h4>Presentation and Feedback</h4>
<p>We presented the new feature to our class and instructors.</p>
<p>We got great feedback on the innovative idea, our decision to go with a return brief and the interactive high-fidelity prototype that was easy to understand and imagine what the new feature will look like.</p>
<p><strong>Minna Maltari, Teacher’s Assistant, General Assembly</strong></p>
<p><em>“The topic was difficult but you were successfully able to pivot from the original brief and find a way to address current user problem.”</em></p>
<p><strong>Sean Breasley, Teacher’s Assistant, General Assembly</strong></p>
<p><strong><em>“</em></strong><em>Overall a strong solution to this brief as it was a tricky one (adding a feature to something that already has a lot of features) and I felt you handled this problem well.”</em></p>
<p><strong>Andrew Stockwell, Lead Instructor, General Assembly</strong></p>
<p><em>“Great understanding of brand identity, clear research methodology, clever return brief, innovative new feature and rich high fidelity prototype.”</em></p>
<h4>Project Takeaways</h4>
<ul>
<li>UX design process is a great way of understanding “if we are solving the right problem”</li>
<li>A democratic way of working as a team provides great results</li>
<li>Return brief needs to be backed up with research data</li>
</ul>
<p>So what do you think of this new feature? Feel free to chat with me if you are interested!</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8edf294bec13" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/ux-case-study-can-slack-be-used-outside-work-8edf294bec13">UX Case Study — Can Slack be used outside work?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


UX Case Study — Can Slack be used outside work?

UX Case Study — Can Slack be used outside work?

Top Stories