SMB
Revamped the outdated SMB app design, addressing inconsistencies and enhancing user flow.
Context:
SMB, a versatile B2B and B2C product developed by Engageware, serves as a powerful platform for creating activities with a primary focus on facilitating appointment bookings. Seamlessly bridging the gap between businesses and customers, SMB empowers users to effortlessly generate various types of activities that encompass appointment scheduling. Furthermore, SMB offers the convenience of sending email invitations for these appointments, enriching the user experience with enhanced communication and engagement capabilities.
Problem 1.0:
Transforming User Experience: Revamping the Outdated SMB Application for Enhanced Usability
-
Outdated and confusing design plagued the SMB application.
-
Numerous inconsistencies further compounded the user experience.
-
Inefficient screen space utilization hindered navigation.
-
Users encountered difficulties locating the menu.
Old Screen:
Problem:
Inconsistent Design and Wasted Screen Space
As a UX designer, I observed an inconsistency in the Home submenu compared to other menus like Help. The presence of a sidebar trail for the Home submenu stands as a design inconsistency, leading to a fragmentation of user experience. This inconsistency becomes particularly evident in the unnecessary white space on both sides, resulting in an inefficient use of screen real estate. Additionally, I identified an issue with the tutorial panel, which occupies valuable screen space in its current static position.
Solution:
Enhancing Consistency and Maximizing Real Estate
To address these issues, I propose a two-fold solution. Firstly, for the Home submenu, aligning its design with that of other menus, such as Help, will create a cohesive user experience. This entails removing the side trail, thereby rectifying the inconsistency and efficiently utilizing the screen space.
Moreover, as part of the solution, I also worked on refining the application's style guide. Recognizing the client's desire for a fresh brand color and the requirement for components compatible with Angular 15, I meticulously crafted a new style guide. This guide not only ensures a consistent and visually appealing interface but also aligns with the modern framework, meeting the application's technical demands.
As a UX designer, I successfully tackled the identified issues by first redesigning the style guide to align with Angular 15. After numerous iterations, I arrived at the current screen design solution.
New Screen:
In this iteration, I strategically adjusted the layout by elevating the components of the Home submenu, which include Email Invitation, Activity, and Appointment Inbox, to the main menu items. More specifically, I relocated Email Invitation and Activity to the top navigation panel and placed the Appointment Inbox as a compact icon in the upper right corner. This strategic reorganization effectively removes the need for a sidebar trail within the Home menu. Additionally, I relocated the Tutorial from the screen to a Floating Action Button (FAB) positioned at the bottom right. This change optimizes the utilization of screen real estate, allowing the tutorial to be minimized when not in use.
What went well?
-
Seamless Technological Integration: Redesigned the style guide to harmonize effortlessly with Angular 15, ensuring a smooth technical integration that enhances user interactions and maintains a consistent experience.
-
Enhanced User Access: Elevating Home submenu elements to main menu status strategically optimizes navigation, granting users quicker access to essential features. This reduction in interaction steps promotes a fluid and intuitive user journey.
-
Streamlined Navigation: Through a thoughtfully reorganized layout, streamlined the navigation hierarchy by relocating key elements and eliminating the sidebar trail. This simplifies users' interaction flow and minimizes cognitive load.
-
Visual Comfort and Focus: By introducing increased white space, created a more visually comfortable and organized interface. This design choice enhances content legibility, promotes clear visual hierarchy, and reduces user fatigue.
-
Immersive Experience: Maximizing screen utilization by extending content across the entire screen elevates the user's immersion level. This engenders a more engaging and encompassing user experience, improving overall satisfaction and usability.
Problem 2.0:
Enhancing Activity Creation and Navigation: Addressing User Challenges
Conducting a user survey highlighted issues concerning activity creation, as users encountered confusion during the process. The list of activities being situated on a sidebar trail further made the problem, with users struggling to locate the editing options. This confusion adversely impacted user retention, leading to a drop in customer engagement with the application. Notably, Candely emerged as a prominent rival to the application during this period. As a UX designer, I undertook the task of addressing these challenges.
Solution:
In response to the identified challenges, I embarked on a multifaceted journey to streamline activity creation and navigation. Recognizing the perplexity users encountered during activity creation, I devised a solution that would not only simplify the process but also empower users with clarity and control.
-
Multifaceted Approach: In response to the challenges identified within the activity creation and navigation process, I embarked on a comprehensive journey to enhance the user experience. Recognizing the complexities users faced during activity creation, I developed a solution that aimed not only to simplify the process but also to empower users with clarity and control.
-
Progressive Indicator for Clarity: To tackle the confusion encountered during activity creation, I introduced a progressive and intuitive element—an activity creation progress indicator. This novel feature serves as a visual guide, offering users a transparent view of the step-by-step procedure involved in crafting an activity. By presenting the process in a systematic manner, users can confidently proceed through each stage, fostering a sense of accomplishment and reducing uncertainty.
-
Revamping the Layout: Addressing the issues arising from the placement of the list of existing activities within the sidebar, I undertook a substantial layout transformation. The prior layout not only contributed to user confusion but also disrupted the overall streamlined design of the application. In response, I orchestrated the relocation of the list of existing activities to the main activity page. This strategic consolidation serves a dual purpose: centralizing activity management and seamlessly aligning with the overarching design principles.
-
Holistic Activity Management: Within the revamped main activity page, users now encounter a holistic environment that amplifies ease of use and operational efficiency. Notably, users gain the ability not only to create new activities but also to seamlessly edit, copy, or delete existing activities—all through a single, unified interface. This deliberate consolidation of tasks eliminates the need for users to navigate between different sections, effectively mitigating confusion and fostering a cohesive user experience.
What went well?
-
User testing confirmed a favourable reception of the enhanced user flow, reflecting positively on the design efforts.
-
The implementation of a streamlined and guided process played a key role in elevating the overall user experience.
-
The introduction of a clear, step-by-step approach to activity creation contributed to the process's user-friendliness.
-
By simplifying the task, the design intervention successfully mitigated potential confusion, as evidenced by user feedback.
-
This achievement highlights the effectiveness of the design intervention in creating efficient and user-friendly navigation, resulting in a positive resonance with users.
Crafted with Dedication and Passion