Slack for WatchOS

WatchOS App Design Case Study

What's Up?

Spacer

What's Up?

Spacer

Overview.

Project Type: UI/UX Design (WatchOS)

Toolbox: Figma

Timeline: 5 weeks (2021)

 

The Slack WatchOS app disintegrated back in 2018 due to user feedback saying features were difficult to use on a wrist-worn device. As a frequent user of Slack, I found it interesting to hear they didn't currently have an app for Apple Watch, as I feel messaging and notifications are core value propositions of the Apple Watch. I challenged myself to take this on as a personal side project to explore how a redesigned and reimagined experience of Slack for WatchOS could look like.

The Challenge.

The challenge is creating a user-friendly Slack experience for WatchOS, one that seamlessly integrates into the user's everyday life.

Design Process.

I used the Double Diamond method as the backbone for my design process. The 4 phases are broken down as follows:

Discover.

What is a Design System?

A design system is a collection of patterns, components, styles, principles, and resources that can be applied to develop applications. On top of providing UI elements, a design system can offer guidance for visual design and code through documentation and set standards, which ultimately enhance user experiences.

Benefits of design systems:
•  More consistent designs across applications within a particular ecosystem
•  Build products faster by implementing reusable components, for both designers and developers
•  Easier maintenance, updates, and scalability of products as they evolve over time
•  Increased collaboration and unity for product teams, as the design system will act as a single source of truth

My Role.

As part of the Fiori for Mobile team, I support the Android build, initiated by the SAP x Google partnership.

This includes, but is not limited to:
•  Designing components and patterns that are consumed by the Fiori for Android SDK
•  Working closely with team of researchers and developers for a seamless end-to-end process
•  Creating pixel-perfect stencils for the design system
•  Mapping out and maintaining design system guidelines

The Challenge.

Creating components and patterns for a design system that are scalable and viable for different use cases.

1. Primary Research

The Discover phase started out with gathering primary research. To ramp up, I spent some time researching Slack in general and its core features and value propositions. This allowed me to get a better picture of what Slack stood for and their product’s goals, which I would prioritize and translate over to the WatchOS app. I also needed to first understand how the previous Slack WatchOS app even worked and the information architecture of the app build, before diving into user feedback and the issues. Once I learned what the previous Slack app’s capabilities were, I was able to empathize with users on the challenges they faced.

Previous Slack WatchOS UI (2018)

2. Secondary Research

Aside from the previous Slack WatchOS app, I also looked at various other messaging apps that were offered on the Apple Watch. Comparing the different messaging screens not only helped me identify common patterns, but also guided me to learn what were native WatchOS patterns since I didn’t own an Apple Watch myself and was unfamiliar with the native UI.

Different messaging apps' WatchOS patterns

3. User Interviews

After conducting my own research online, I then moved onto user interviews so I could really focus in on the user's priorities and needs for a Slack app for WatchOS. I conducted interviews on 5 users between the ages of 21-34, each meeting the criteria of using Slack normally and owning an Apple Watch. The goal of the interviews was to get a firsthand glimpse into each user’s experiences around Slack and their Apple Watch and what they think are the benefits and challenges in each. The following are the questions I asked in the user interviews:

Define.

4. Research Findings

The Define phase was guided by my 3 methods of research, with the user interviews taking the lead in research insights. The user interviews allowed me to get a better sense of the user's needs and priorities, which then revealed and inspired opportunity areas for the app. It was here where I consolidated and organized my findings into “Insights” and “Challenges”, which narrowed down the scope and areas of focus for the design.

5. Opportunity Areas

Based on the research findings, I was able to categorize features into priority and out-of-scope groups. It was also at this time where I referred back to the WatchOS Design Fundamentals guideline to ensure I was designing an experience where users were familiar with it and there wasn’t a high learning curve of any sort. The guidelines emphasized keeping WatchOS interactions quick and focusing only on essential tasks of the app. These were the underlying essences of my prioritized features.

Develop.

6. Storyboarding

To kick off ideation, I created a storyboard to mind map a specific scenario where a user would need to use the Slack app on their Apple Watch. Because Slack is primarily a business communications platform, the story follows a user on a normal workday where they need to pay attention to Slack for updates and notifications.

7. Task Flow

After focusing in on who the target user would be, I moved onto creating a task flow to lay out the paths that detailed how the user would be interacting with the app. The task flow presents the 3 main feature priorities of the app (DMs, mentions, and channels), starting from the initial home screen. The flow excludes the notification pop-up interaction because it's integrated into the replying interactions, if the user chooses the notification pop-up as their entry point to the messages.

8. Wireframes

Once I had a solid idea of the flow of the app, I created wireframes to bring the screens to life. The 3 main feature priorities have the same interactions for messaging, which the wireframes illustrate as the flows progress.

9. High Fidelity Prototype

After getting a better picture of how the app would look like through wireframes, I moved onto creating the high fidelity prototype and really coloring in the lines of the overall app. The following shows the user’s flow for the reply-to-a-mention task. The screens for the other tasks were also built out at this point, but I wanted to focus on one specific flow here to really showcase the main messaging function. You can find the full Figma prototype and interact with it in section 12 below (note: that version will have the iterations applied already).

Deliver.

10. Usability Testing

Once I had the full fledged prototype created, I conducted usability tests to ensure the features work and make sense for the user. This also allowed me to get some user feedback and identify areas of improvement for the design and flows. For the usability tests, I conducted a total of 4 moderated tests virtually, where users screenshared to walk me through their experience with the design.

11. Iterations

The usability tests uncovered a couple of points for improvement in my design. Some of the improvements identified would be out-of-scope and left for a future iteration. For this iteration, I focused on 3 key improvements that the usability tests exposed:

• Users were hoping to see the chat history when reading their mentions (4 out of 4 users)
• Users thought messages were individual notifications because of the similarity between the message preview and chat thread screens (3 out of 4 users)
• Users felt the home page UI was unfamiliar to them and wished there was more consistency with the Apple Watch and Slack patterns they are used to (3 out of 4 users)

Because of this, I made the following changes to my designs that directly correlate with the identified issues above:

12. Final Prototype

This is the final prototype (for this iteration) of the Slack for WatchOS app. All above mentioned changes have been applied, and the full Figma prototype with interactions can be found in the link below.

*Note: Screen 1 is the notification screen. If you would like to see the flow starting from the Apple Watch home screen, please start on Screen 9.

View Figma →

Conclusion

This project was a great learning experience for me for various different reasons. One of the biggest challenges I faced was actually just ramping up and familiarizing myself with the Apple Watch interface because I myself don't own one. This required a lot of research on the interactions and how they differ from web and mobile.

Another key takeaway was learning how to design for a small, limited interface and the importance of prioritizing simplicity in this context. After interviewing users, I found myself coming up with so many ideas in my mind on how to design for every functionality that Slack offers as a whole product. I soon realized it wouldn't make sense to incorporate every one of these functionalities in the app due to the Apple Watch's quick, glanceable nature and usage. This challenged me to really consider and prioritize the user's key needs when using Slack.

fin.

Other projects: 
SAP Fiori

SAP Conversational UX


Paws For People


Visual Designs

© 2021 All Rights Reserved