Skype Redesign — UX Case Study

Keep the world talking

Background

Applications: Figma | Time: 6 weeks, April 2022 — May 2022

Project Overview

Released in 2003, Skype is a telecommunications software where users can make free video and voice calls in one-to-one or group settings, send instant messages, and share files among other features. The platform peaked in success in the 2000s but lost popularity over time even as workplaces began to embrace remote meetings and calls. In the face of the pandemic, other platforms rose to solve communication issues while Skype became an afterthought.

In six weeks, our team went to uncover what went wrong with Skype, and how we can use this knowledge to create a solution that will put Skype back into the spotlight of telecommunication.

Meet the team!

Timeline

Through six weeks, we went through six sprints following the design process pictured.

Research

To understand the complex layers of Skype, we needed to analyze the platform from multiple perspectives. This included getting a general overview of Skype itself, sending out surveys, conducting interviews, creating personas, and performing competitive analyses on alternatives. These methods would serve as a foundation that we’ll use to guide our solutions.

Skype at a glance

We first gathered observations of Skype by clicking around the app and noting down what we thought was important to look into. This was done to have a basic understanding of what we were potentially dealing with.

These observations are categorized into 4 themes: Identity, Audience, and Appearance

Identity — This is all about what kind of app Skype is. Whether it is social or professional, knowing the identity will help establish some base foundation for our project.

Audience — The problem of identity also feeds into the problem of audience. If the intended purpose of Skype is unclear, then it will be difficult to know who we are designing for, and retain a consistent audience.

Appearance — Essentially how Skype looks, and the layout of its different elements

Functionality — The way the app works, and navigates.

These observations were necessary as they laid the foundation for the next steps for our research, and what to focus on.

Surveys and Interviews

After these observations, we were better equipped to create a survey and conduct interviews. We knew the core themes of what to ask about, and attained relevant quantitative and qualitative data.

Survey

In our survey, most of our responses came from college-aged students. And their responses generally affirmed their infrequent use of Skype, as most had not used Skype in recent years.

Of those who responded, ~51% had not used Skype in over four years, followed by ~29% not having used it in the last two to three years. For the most part, respondents were drawn away from Skype as new alternatives like Zoom and Facetime began arising.

Interviews

Simultaneously, we conducted interviews to collect more qualitative data, get more insightful responses that will help us understand who we will be designing for, and solidify the research process. These interviews were conducted on college students in their 20s.

With our preliminary observations in mind, the main questions we needed to answer were:

Why do people not want to use Skype?

Favored vs un-favored Skype features.

What’s missing from Skype?

In addition to open-ended questions, we also had interviewees perform various tasks on Skype’s current design. This was done to help achieve our research objectives, and pinpoint any initial problems when using the app to get an idea of where we can start during our ideation process.

From our interviews, we observed the same unanimous preference for alternatives. Many respondents also had not used Skype within the last year, further establishing their usage of other apps.

When respondents were tasked with using Skype and performing various tasks, we noticed the overall confusion users had, specifically during video calling tasks, and general navigation of the app. There were features that left users puzzled or were unable to locate, giving us insight on how we might approach forming our solutions.

Personas

After our interviews we set out to create two user personas. These were done to assist in establishing empathy with a potential user, and getting a deeper understanding of the target audience. Here, we mainly focused on the concerns, expectations, and motivations for a user as these themes were most relevant for our redesign.

Competitive Analysis

As previously mentioned, Skype was initially prominent early on, but has been facing a steady decline in recent years. With this knowledge, and the extensive popularity of alternatives, we did a competitive analysis to see what separates Skype from other outperforming apps. This gave us a better idea of Skype’s drawbacks, and how we can use these results to better define solutions.

For our purposes, we used Zoom and Facetime as comparison as these were the most frequently used apps from our previous research findings.

With these methods, we were able to deduce the main problem of Skype. Much of our responses compared the features of Skype to Zoom, and touched on their similarities. This pattern was also consistent with Facetime. However, Zoom and Facetime hold different niches in the market, with Zoom being business-oriented, and Facetime being purely social.

We found this interesting because it explains much of the confusion we gathered from Skype’s design. From this, we concluded that Skype uses elements from both professional, and social contexts which makes it unclear on what kind of platform it is, or who the app is targeting.

Ideation

Affinity Mapping

Heading into synthesizing our data, we decided to use an affinity map to pinpoint recurring pain points and thoughts our respondents had with the existing interface.

We then voted on a few specific areas to focus on. Some areas we found to improve on were the outdated user interface, ambiguous brand identity, and unintuitive video call flow and features. From there we outlined some key flows when addressing our respondent’s pain points.

Finalized User Flows

1. Adding a friend
2. Starting a Video Call
3. Messaging a friend
4. Personalization

‘How Might We’ statements

From our research methods and exercises, we came up with a main how might we statement to guide our design process leading into the design process.

Guiding How Might We:

How might we prioritize convenient communication as the central focus of Skype?

We also came up with three sub-HMWs to address more specific issues our users encountered during our research.

1. HMW modernize Skype’s UI to make virtual communication more convenient?
2. HMW increase awareness of personalization features?
3. HMW make video calling more friendly/inviting for first time users?

Sketches & Lo-Fi Prototypes:

We sketched out some possible solutions for our redesign with flows and pain points in mind. Our sketches focused on aspects of the home/landing page, starting a call flow, and features of the video screen call. From here, we transferred our ideas into lo-fi prototypes, laying the base work for the next coming weeks.

Mid-fi Prototyping

For our mid-fis, we refined each page and started adding a bit of color from Skype’s design system for consistency. This was also part of the process where we wanted to experiment and get creative with features!

Home Page

We first reduced the number of call-to-action buttons on the home page from four to two. We felt that four CTAs was too cluttered and didn’t contribute toward our HMWs. Additionally, we increased the size of the CTA buttons to make them more noticeable. We wanted more focus on them rather than other elements of the screen.

Simultaneously, we reduced clutter on the home page by removing a list of chats, unnecessary text, and buttons

As for the navigation bar, we solidified which icons we were set on using.

To make personalization more apparent, we added an “edit” button right next to the user’s name on the home page to change their name, biography, profile picture, and banner

• The banner runs along the entire top of the screen with the option to change it using preset gradients or for users to add their own photo

Video Calling

For the most part, video calling flow itself was relatively unchanged. The main change here was implementing this concept of a music/media tab. This would allow users in a call to listen to music while chatting among participants, and thus further establishing Skype as a social platform.

Other changes included removing elements that were regarded more for professional contexts, and replacing them with features that are more social-oriented.

Messaging

In the messages tab, we kept it somewhat traditional to the current design but still experimented with certain features.

Above the user’s recent chats, we implemented a “Favorites” section that would allow users to quickly chat with their most preferred contacts with ease. To start a new message we implemented a button at the bottom of the user’s recent chats.

Usability Testing

Usability Testing was conducted twice, once in the mid-fidelity sprint, and another during the high fidelity sprint. There were 12 total participants, with 6 people during the first phase, and another set of 6 after refining. Participants were all in their 20s, with some being students, and some working full-time.

Each were given 4 tasks to complete:

1. Add a friend from the Friends Page
2. Start a video call with friends
3. Message your friend
4. Personalize your home page

Positive Feedback

Overall, users had little trouble navigating through the different pages of our wireframes. In regards to specific features, users felt satisfied when they were able to further personalize their own profile. In video calling flows, users were especially drawn to the music tab.

Areas to Improve

Despite the positive elements, users were still met with hurdles that created setbacks.

In the design as a whole, inconsistency with alignment and spacing left users somewhat confused. There was also a lack of clarity in most icons which made the flows difficult to navigate initially.

On the home page, the placement of the Favorites section felt awkward for users on the purpose it served.

Hi-fi Prototyping

Transition from Mid-fi

From our user testing, we organized our data from most important to least important and applied them as such. Apart from some tweaking, the general flow remained relatively the same.

Design System

Since this was a redesign, we opted to keep this project consistent with Skype’s current design. This meant retaining its brand colors, as well as the sans-serif typeface to keep it recognizable to Skype.

However, with the findings that we gathered initially, it was still necessary to revamp some of its features. For a modernized look, our priority was to ensure each feature was somewhat clean and minimalistic while ensuring its intentions were clear. This entailed an intuitive navigation bar, simplistic labeled icons, and consistent contrasting colors among our other design choices.

Overall, we incorporated characteristics that would have Skype appear friendly, inviting, and engaging since we were designing Skype as a social platform. This would mean rounded corners, and casual animations and hover states.

Final Prototypes

Adding a friend

The user is able to add another user to their friends list either by username, phone number, or syncing with the user’s contact list. To add by username or phone number, the user must utilize the search bar.

Once the potential added user is found, the user may request to add, which will also appear in the “Requests” tab. When the recipient accepts the request, they will appear in the friends list.

Starting a Call

The process of calling another user can be initiated from multiple pages like the friends list, messages tab, or from the home page. In this case we showcase the process from the home page.

By clicking “Start Call” a popup appears where the user has the option to rename the call title, add friends to the call, and/or copy a link to send to others who may not have Skype. Additionally, there is a video preview of the user.

Voice/Video Calling

While in a call, users are still able to navigate around Skype. For example, a user may still check their messages while in a call. However, if the user is focused on the call, they have the option to hide the main nav bar to increase clarity of other participants.

Along the bottom, users are able to perform a variety of tasks that enable them to show their personality and capture any memory.

One of the main changes is the implementation of the carousel. Here, the user is able to message the other members of the video call side-by-side like the current design. But what is new is the music tab. Users can also liven the mood with music by outsourcing from a desired music platform if they desire.

Messaging

The messaging tab is the center for all of a user’s private messages, both one-on-one and group chats. Like the present design, users are able to send files like pictures, as well as emojis, and gifs. The favorites tab allows for convenient messaging one click away.

Personalization

Users are able to customize the appearance of their Skype app by clicking the icon next to their name on the home page. From here they will be able to change their profile picture, banner, and update their bio description. By changing the banner, users also have the option to decide if they want the app’s colors to be consistent with the banner color.

view prototype

Presentation Day

At Presentation Day, our team presented the slides as rehearsed. We were able to get some amazing feedback from the audience and our judge, Justin Baker, who is an incredibly talented product design manager at Netflix. After a successful presentation, our team was delighted to win the Best UX Research Award!

Feedback

• “Evolution of fidelity from low to high showcased a thoughtful evolution of your patterns.”
• “The design system nurtured a cohesive visual aesthetic, even as you appended new functionality onto the platform.”
• “I really liked the app and it got me excited to use Skype again. The simplification was really good and made Skype more appealing!”
• “I like the iterative prototyping and how you used repeated user testing and research to guide your design. I also like how well rounded the user research is and how you clearly outlined your research goals.”

Challenges

• In reflection, we all agreed that research had played a fundamental role in this project. Skype is an app with many intricate features, and it was difficult to know where we needed to start. But through this redesign, we learned the importance of research, and how we can utilize it to roadmap the project, and create proper solutions.
• Accessibility proved to be an issue, especially with the color scheme we opted to use. We found it difficult to create proper contrast between elements in our design while still keeping it eye-catching and modern.

Next Steps

• With more time, we would conduct research to get a more accurate representation of Skype’s audience, and their needs. If we have a strong research foundation, it will make it easier to pinpoint what exactly needs to be changed.
• Further flesh out some of the social features we’ve implemented and continue developing ideas that enhance social communication.
• Develop a mobile version. From our research, users were as willing to use Skype on the go as much as on desktop. Given the growing popularity of smartphone usage, a mobile version seems most appropriate.

Thank you !

Skype Redesign Team