Timeline
3 months
Team
Texas Convergent
Tools
Figma
Role
User Research, Visual Design, Stakeholder Management, Product Strategy
CONTEXT
Prime productivity
Xebec sells hardware products like foldable, portable monitors to attach to your laptop, streamlined keyboards and other accessories that fit in a single bag to help remote workers stay productive on the go.
Convergent partnered with Xebec to design a desktop productivity software across MacOS and Windows to act as a lead generation method.
01. Feature Overview
How did we design a seamless, integrated productivity app that lives in your taskbar?
Introducing Xebec Focus…
01. Transparent notes
In a meeting and need to write something down but don't want to switch tabs or split screens? Open a new transparent note and write there to stay focused. Easily save your note after you finish.
02. Built-in microphone indicator
A built-in mic indicator reminds you when you are on mute so you never speak into the void again.
03. Presentation mode
Online shopping before your meeting and suddenly have to share your screen? Stay worry-free and focused by automatically clearing your background and closing miscellaneous windows once you start screen sharing.
04. Screen warmer
For remote workers on their computers all day, reducing eye strain is crucial for their health and productivity. Set and forget your preferences for screen temperature.
02. Problem Framing
What's the need for Xebec Focus?
Client request
Familiar features done better
Xebec innovates in the hardware sense with their portable productivity attachments and wanted to offer a software complement to accompany their physical products.
PROBLEM DIScovery
Opportunity areas
A few limiting factors played into the design decisions made when conceptualizing this application.
01. Compiling features
Features that Xebec's founder brought up existed but often were spread between multiple applications — noise suppression, screen temperature, etc.
02. Catering to remote workers
Our software would specifically identify needs of remote workers and cater to them specifically.
03. Automating the experience
A differentiator for this software would be its automation to work smoothly 'out of the box' and remember user preferences and apply them across applications.
THE GOAL
Identify valuable features for remote workers and design an application that runs seamlessly in the background.
User interviews
Feature discovery
The team, including product members, interviewed 10 remote workers to understand their priorities, how they work and current tools in order to identify what features would be valued. Based on these interviews, the following features were prioritized.
01. Noise and notification suppression
Highly requested features but could not be implemented due to restrictions surrounding OS (operating systems).
02. Screen warmer
Allow users to set their screen temperature preferences and automate activation times
03. Microphone indicator
Clearly display mic status to users when in a meeting, regardless of what tab or window they are on
04. Presentation mode & transparent notes
Change background to user's preference automatically when screen sharing. Transparent notes can be created, edited and saved during meetings.
03. Ideation
How can integrate these features seamlessly into an easy to manage tool?
UI Ideation
Ideation
Since we wanted this application to be easily accessible and run smoothly in the background, we decided as a team with engineering and product to have it live on the navigation bar — on top for MacOS and at the bottom for Windows.
Mini menu
The mini menu is where users can quickly toggle features on and off, serving as the main interaction menu unless they decide to toggle specific settings.
Option 1
Visually understandable
🟩 — Use of icons helps user understand what features are + clear states for active and inactive
Notes management
🟨 — Can only open a new note with no easy access to existing notes
Efficiency
🟩 — Master toggle allows for easy on/off of all features
Option 2
🟩 — Use of icons helps user understand what features are + clear states for active and inactive
🟨 — Horizontal button stack is not consistent with other interaction patterns
🟩 — Master toggle allows for easy on/off of all features
Option 3
🟥 — Relies on feature name for explanation or going into settings
🟥 — Notes toggle is not indicative of what happens when on/off (new note, open existing, etc)
🟨 — Toggles have to be manipulated individually by user
Option 4
(Recommended)
🟩 — Use of icons helps user understand what features are + clear states for active and inactive
🟩 — Clear and consistent way to create and access notes
🟩 — Master toggle allows for easy on/off of all features + shortcuts available when applicable
Settings Iteration
Technical restraints
Based on the engineering team's input, we created a simple settings menu that allowed the user to change their preferences for each individual feature.
Designing for windows desktop
Crossing operating systems
Many users we interviewed used Windows laptops so we had to translate our original designs for MacOS into ones following Microsoft design conventions for Windows.
Key Takeaways
Prioritization
Having a clear understanding of priorities for the user, as well as internal priorities within the team, was crucial for successful handoff of deliverables.
User and market research
Our design decisions were influenced heavily by user and market research, so I clearly felt the importance of proper collaboration with product to establish clear product strategy.
Existing design systems
This project challenged us to understand and use existing design systems, components and familiar interaction patterns to their fullest capability.
