old dashboard - image
After being brought onto the team, I was given an understanding of the project and what our goals were. Infange was an already existing product. Although it was very bare-bones, it had the basic functionality set up, and my goal was to optimize the user's experience with it and make it pretty.
1.0 dashboards (before & after) - image
The company and stakeholders were very new to the idea of design thinking, so the responsibility laid on my shoulders to help improve the team and product. Infange went through a full UX refresh in order to modernize and improve upon the design.
Before we can do anything, we need to understand
2.0 notes & wireframes - image
Before the arduous task of building Infange, I needed to get a good understanding of the purpose of it. I began with a one-on-one meeting with the CEO, where he told me:
"The intent for Infange is to allow us to maintain good conversation"
- CEO
A simple phrase, yet pretty impactful. This conversation allowed me to get an understanding of:
The project vision and scope
Our target users
Current pain points with the product
Following this meeting, we strategized a plan to build Infange from a clean slate, creating a solid foundation so we could future-proof the project. My participation on the project can be divided into two parts:
A calendar dashboard that allows you to manage your time efficiently
Live meeting agendas to maintain effective communication
After we decided this, I created some low and mid-fidelity wireframes to narrow down our vision for the product.
So… who's using it? Do they like it?
Prior to the revamp, I interviewed current users of the basic Infange workspace to understand their typical workflows. The interviews gave me actionable things to focus on to improve the way users interact with the existing platform. A question I asked was:
"What do you currently dislike about Infange?"
Some answers:
3.0 tough crowd - image
KEY INSIGHTS ABOUT THE PRODUCT
Time is invaluable
Time is an invaluable resource, and calendar apps that we are used to utilizing have limited functionality.
Miscommunication leads to frustration
Something that is inevitable in the workplace is miscommunication. People forget and misunderstand. How can we mitigate this to always have good conversations?
Final Design
Calendar
The calendar is the primary dashboard of Infange. The overall design prioritized a clean, minimal look. This assures that the user would not be confused and would be able to dive deep into Infange efficiently.
4.0 main dashboard - video loop
Time to zoom in!
The most important stuff at a glance
The user is first introduced to their day with the header, which tells them today’s date along with an upcoming summary of what their day will look like. Header blocks are above the calendar, intended to give users quick access to their upcoming agenda items or if they need to be aware of any notifications.
4.1 header - image
Let's get to navigating
The sidebar is expandable to optimize page real-estate. When the user hovers over it, they can access the search functionality and navigation to other pages like notes and objectives.
4.2 sidebar - image
What are we having?
The create button on the top right pulls up a modal which gives the user three options: Meeting, Note, and Objective. They can select through these to create what they need.
4.3 creation modal - image
Speed and efficiency!
Command+k interfaces are quickly growing in popularity, used to create a web experience where any action done by clicking can be done through a command menu. We wanted to implement this into Insync in order to provide users a fast and robust tool to maximize efficiency.
4.5 command+k menu - video loop
The Infange calendar serves as the main hub with an at-a-glance overview header, expandable sidebar for navigation and search, prominent create button to add meetings/notes/objectives, and a Command+K interface with command menu for efficient actions - all following a minimalist aesthetic to keep the dashboard clean and focused. This enables users to see their day, access pages, create content, take actions rapidly, and avoid confusion for a streamlined experience.
Next part!
Live Meeting Agendas
Live meeting agendas are the meat and potatoes of Infange. Think Google Docs fusioning with Microsoft Teams. Once a meeting has begun, it starts for every attendee, and everybody can follow along, live. Agenda items are highlighted one at a time in chronological order, collapsing once users check it off in order to maintain page cleanliness.
5.0 live meeting agenda - image
Let's zoom in again!
Uhh.. what did we talk about yesterday? What about before that?
A button to check previous meetings, where users can get a brief summary of past meetings, and have the ability to navigate there if they want a more in-depth recap. This is powered by the smart system comparing identical metadata (same agenda title, attendees, etc.) so users have a quick method to look back on previous notes.
5.1 previous meetings - video loop
Let's walk through the meeting
Once the meeting begins, it begins for everybody viewing the meeting. The top agenda item becomes highlighted to signify its active status. Agenda items have comments in order to provide a way to converse between users for more specific topics.
Users can complete items by hitting complete at the bottom. We decided to add the "Is this item complete" question so users have a sense of accomplishment when completing each item. This collapses the agenda item to clean up the page.
The complete button stays fixed at the bottom so users don't have to scroll up, even for long paragraphs.