Figma | Miro | Adobe Illustrator | Gitlab
An overhaul of the settings and profile page was my first assignment at Plek. It was a major undertaking and a great learning experience in prototyping, interface design and user testing. I was given the independence to transform the visual and function of the settings and profile modules along with the responsibility to keep the design consistent with the rest of the platform.
The settings page covers 4 major functions.
General - options to switch between languages, password settings and a mobile login using a QR code.
Notifications - containing web (browser) notifications, mail and push notifications for comments, likes and across groups / channels
Subscriptions - agenda subscriptions and weekly emails from Plek
Availability - contains options to set the user status, set a holiday period during which the user can pause notifications and display away status and set a working day and time schedule.
The profile page displays user information, availability widget and the user status. A profile hover card is visible when the user hovers over a user. This functionality is currently available on the dashboard and shown at the chat sidebar in the prototype.
High Fidelity prototype - settings / profile module
Sharing an update is a critical function of the Plek platform. It enables users to communicate with the organization as a whole or specific groups / channels according to their requirement. There are two versions of the Plek posting module - quick post and advanced post.
The quick post enables users to share an update from the dashboard interface with required but limited options for a faster turnaround. I was tasked with redesign of the post to implement a consistent and modern look while following the Plek design system resulting in improved usability.
New icons created on the basis of Google Material design guidelines have been used for this design.
The user has access to advanced features of the post including a translate function, admin tools and adding tags. It was decided to introduce Froala editor with better editing options in the post which needed to be integrated within the Plek design system.
The concept of the Innovation module has been popular with multiple clients at Plek and is used frequently for team building and to generate new ideas. The Plek Innovation module enables a team to create challenges and add ideas that can be discussed among different users. There is an option to follow the challenge which would keep the user updated about the discussion.
Design Improvement
As part of a design improvement project, I was charged with working on the responsiveness of the module across potential changes in display. The innovation module displays user ideas in the right sidebar. This display was affected (as shown below) when the screen size decreased or when the chatbar was maximised. The improvement planned was to have consistent display irrespective of the screen size.
current scenario - common desktop screen
current scenario - large desktop screen
The Solution - Grid Layout
There are 4 different regions in the innovation module - chatbar, left / right sidebars and the main content in the middle. In order to have a consistent display for all the regions across multiple screens, I used a fluid grid layout and persistent UI regions.
The chatbar is constructed as a persistent UI region. Based on its movement (minimized / maximized), the grid layout of the rest of the screen is adjusted. The grid used is a 12 column structure with 8px gutter and a 32px margin for a desktop layout.
At a breakpoint of 1152px, the right sidebar is collapsed when the chatbar is maximized to make sure the display is not cluttered. The user ideas are always available through the link "My Ideas" in the left sidebar.
grid layout with collapsed chat bar
final design with collapsed chat bar
grid layout with chat bar
final design with chat bar
final design - small desktop screen
Plek employs the global search concept for users so they may search for keywords across the platform. Search results are displayed in different pages as posts, users, documents, information pages, agenda, ideas and chat messages.
The designs implemented for the desktop platform were translated into the mobile version. The new aspects added to global search were instant search results, saving search results so the user may access them later and navigational improvements. Two versions were finalized among many options which were then tested through surveys on the Plek platform. The versions are displayed below.
The dashboard redesign was an interesting concept to significantly change the look of the Plek homepage. One of the important features was to highlight the featured posts as most clients use it to relay important information across their organizations. In order to be able to highlight multiple posts at a time, a grid pattern was considered with emphasis on images and highlighted hover states,.
Widgets are an important part of the Plek dashboard. I mostly worked on keeping the widget design consistent and minimal in order to avoid overloading the user with content. Beyond this, there is an update to the visuals of the timeline. Follow the slider below which displays the new concepts ending with the existing design for comparison.
Current Dashboard design
