As a UX researcher and UI designer, I have observed a growing challenge in the management of open tabs in modern browsers. The proliferation of web-based applications and services has led to a situation where users commonly have more than 25 open tabs per user, resulting in a cluttered and disorganized experience. The display of notifications from multiple tabs further exacerbates this problem, making it difficult for users to focus on the content that is most important to them.
Hanky is a proposed solution that seeks to mitigate this issue by consolidating the user's most frequently used applications and services into a single, organized window. The goal of this design is to improve the user experience by synthesizing and streamlining access to these services, reducing distractions and enabling users to focus on what's most important to them. To achieve this, we have developed a single access point that opens all services and apps in a well-structured and organized manner
Project Overview
Project duration:
May 2022 to November 2022
My role:
UX designer designing a new system UX SAAS from conception to delivery.
The problem:
The increasing use of cloud-based apps and services has led to an excessive number of open tabs in the average user's browser, often resulting in slow performance and decreased efficiency in managing tasks. The current situation presents a significant challenge for usability, with a large number of tabs making it difficult to maintain order and control over open apps and websites.
The goal:
Design and develop a cloud-based platform, Hanky, that integrates the most frequently used online applications and services into a single user interface, reducing the need for multiple open tabs and windows. The platform will also include a built-in search engine and navigation capabilities, allowing users to access new websites with ease.
The product:
Hanky is a software-as-a-service platform that aims to streamline the user experience by integrating multiple online applications and services into a single interface. It includes a built-in search engine and navigation capabilities, as well as advanced integrations such as smart home devices, video conferencing, professional messaging, and even vehicle monitoring. All of these features are accessible through a single login and password, making it easier to manage tasks and switch between applications.
Responsibilities:
Conducting user research and analysis
Formulating user personas and scenarios
Developing task flows and user journeys
Designing wireframes and prototypes
Evaluating prototypes through usability testing
Iterating on designs to meet accessibility and responsive design requirements
Collaborating with cross-functional teams to ensure the platform meets user needs and business goals.
Understanding the user
User research
Personas
Problem statements
User journey maps
User research: summary
In order to understand the user behavior and needs in the context of browsing, I conducted a comprehensive user research study which included social network analysis, competitor audit, user behavior tracking, hypothesis testing, and more. The purpose of the study was to identify the typical moments of a standard user in a browser session, identify the most frequently used applications, and understand the most requested integrations for 2023. The findings from the user research were used to inform the design solution for consolidating all of the user's online applications and services onto a single screen (tab).
PAIN POINTS
Shift to the Cloud:
A significant number of desktop-based applications have shifted to cloud-based solutions, leading to an increase in the number of open tabs in a browser.
User behavior Group-based:
The browsing behavior of a user is often predictable if the target user group is identified, as it can provide insight into the types of applications and services that the user typically uses.
Growing Number of Tabs:
Since 2018, the number of tabs used by the average user has increased, and by the end of 2022, the average number of open tabs was found to be between 15 and 34 in the USA.
Inadequate Solutions:
Despite efforts by browsers to address the issue of excessive tabs, the user experience has not improved, and the number of tabs used by users continues to grow.
personas
The research was conducted through a combination of qualitative and quantitative methods including user interviews, behavioral observations, competitive analysis, and surveys to gain a deeper understanding of the standard user behavior within a browser session. The objective was to identify the most used apps, pain points and most requested integrations for 2023 to inform the design of a single-screen solution.
Through the research, three main personas were identified: users who need multiple tabs open for communication purposes, users who keep tabs open as pending, and users exploring various options.
The user journey map helped to identify common moments and needs of potential users, including the collection of necessary apps, navigation between tabs, and other important touchpoints. This information was used to inform the preliminary design and to consider factors such as a color-coded categorization system, customizability options, and a single password login for all apps.
USER JOURNEY MAP
PROBLEM STATEMENT
Pranitha is an office worker who frequently uses the browser with many tabs open, every day she must open more than 10 applications, login and add another 20 tabs from various websites that she needs to monitor for her work, this causes the browser to crash and exceeded by the number of tabs.
Pranitha wants an interface that allows her to integrate the most important tabs in a single window and that all of them can be opened with a single login to use them in a basic way, so that the number of tabs in the browser is considerably reduced and her daily operation is much easier.
Starting the design
Sitemap
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
site map
version 3.a
Texas, USA
The site architecture and flow were designed with a focus on ease-of-use and functionality. Key features include a single password login for all apps, data exchange through APIs, and an auto-save feature for added user confidence in closing tabs. The site map was designed to ensure seamless integration with external apps, provide quick access to data, and simplify the overall user experience.
paper wireframes
A
In my research, I asked users to draw a mental map of their tasks in a browser session. The results showed that a large percentage of users envisioned their tasks as interlocking square tiles.
B
Custom categories were considered to accommodate for the varying organizational systems used by each user.
digital wireframes
The digital wireframes were based on the results of the mental map study and represented the user's tasks as a mosaic of square tiles, synthesizing the essential information of each area. A category option was incorporated to improve organization and minimize information overload
The digital wireframes were designed to not only display notifications but also to allow for actions to be taken within each tile, eliminating the need to switch to the original app.
Usability study
PARAMETERS
- Person 10
- Person 9
- Person 8
- Person 7
- Person 6
- Person 5
- Person 4
- Person 3
- Person 2
- Person 1
- Person 10
- Person 9
- Person 8
- Person 7
- Person 6
- Person 5
- Person 4
- Person 3
- Person 2
- Person 1
Study type:
Moderated usability study
Location:
United States, Remote
Participants:
100 persons
Length:
2 days
FINDINGS
Boredom:
The initial design was found to be visually unappealing and lacked visual interest, leading to a tedious user experience.
Poor Usability:
Participants had difficulty understanding the mechanism of the system, with a lack of clear references and guidance.
Grouping:
Participants preferred to see groups defined by color rather than by order.
Integration:
Participants expressed a desire for better integration with remote intelligent resources.
Refining the design
Mockups
High-fidelity prototype
Accessibility
mockups
Based on the findings, we redesigned the mockups to prioritize user experience and minimize the number of tabs displayed on screen, focusing on the main tasks of each application. In addition, we conducted additional usability testing with 100 participants in Study A and a further 100 participants in Study B, comprising 50 repeat participants and 50 new participants. This allowed us to measure improvements and gather first-hand feedback from users.
u.study A-0-12
Users prefer a two-view calendar space, in which the details of the agenda are of the utmost importance.
u.study A-13-24
Synthesize the data from social networks to a maximum of 6 main sections with a scroll down
u.study A-25-45
The music player is preferred with only the private playlist and the conventional playback buttons.
u.study A-46-72
The music player is preferred with only the private playlist and the conventional playback buttons.
u.study A-73-100
A leading position for remote integrations
RESULTS CASE STUDIES
R1
u.study B-100
We added 3 key colors that distinguish the groups and brand.
R 2
u.study B-100
We decided to add reference symbols, the branding results came back as liking 90s Pop Culture, and a more fun design was created taking advantage of the references.
R 3
u.study B-100
Custom auxiliary buttons configured through conditionals and on, off and push buttons were created to offer console-like tools for remote AV integrations.
final results
Proto flow
In a single tab, a screen that synthesizes the apps most used by the client, together with the most common resources of a browser and remote audio and video integrations.
The retro design evokes the portable cassette players of the 80s and the usability is replicated from audio consoles, useful and fun reference symbols for users.
PROMOs
prototype
Our high-fidelity (hi-fi) prototype was designed to reflect the key findings from the moderated usability studies, incorporating the design changes that were necessary to enhance the overall user experience. The hi-fi prototype followed the same user flow as the low-fidelity (lo-fi) prototype, ensuring a smooth transition from the initial concept to the refined design.
Accessibility considerations
In terms of accessibility considerations, our team made sure to design the platform in a way that would guide the user through the system step-by-step. We included clear previews that explained the activation and deactivation points of various tools, as well as reference symbols to provide the user with a solid understanding of the platform. The use of color-coding to divide the groups into modules was also implemented to help the user understand the various elements of the platform and how they interact with one another.
Going forward
Takeaways
Next steps
takeaways
IMPACT:
The main goal of the prototype was to bring together frequently used elements into one screen, reducing clutter and simplifying the interaction between them. This required the data from the various apps to be synthesized and the actions to be reformulated.
WHAT I LEARNED:
During the design process, I discovered that many apps and integrations contain excess tools that are not necessary, which detracts from their main actions. Integrating these apps and tools into a reduced space can provide a more streamlined experience.
Uncontrolled Usability Study:
To evaluate the actual use of the system, an uncontrolled usability study will be conducted. The platform must first be programmed in order to perform this study.
NEXT STEPS
Simplify and modify
Consider simplifying certain apps further to broaden the capacity of the browser, and create alternative browser histories that do not store tabs.
API SOURCES
Identify the apps and integrations that have the ability to share their core actions via integration.
