Working as the UX-UI Intern at Commudle, I redesigned and created the two main features of the platform: User Profile and Labs. The project included wireframing, prototyping, many iterations improving the user experience and accessibility. My role was to change the image of Commudle from an event management platform to a developer and design community platform.
Problem
The platform failed to provide the users with easy accessibility of the actions available. The platform failed in following the design principles and hence confusing the users about the aim of the product.
The platform was known for event organization. My job was to change the image from an event management platform to a developer & design community platform.
Solution
As the sole designer on this effort, I audited the cards and layouts internally across Commudle. And externally, I tried to understand the industry-standard usage of the components and layouts.
With those insights, I recreated the user profile from scratch to promote engagement & networking, redesigned the labs’ structure and did UI fixes to give a consistent look to the platform.
Role
UI/UX Design Intern
Category
Community, Events
Design Tools
Figma
Duration
Feb'21 - Apr'21
Overview
Let’s meet executive team of Commudle & know their vision
User Profile
Have a look how I rebuilt profile architecture & layout
Navigation Bar
An insight to how I gave an a universal search bar & better usability of nav bar
Labs
How I turned these stepwise tutorials into most fun write-ups
Redesigning the SEARCH & NAV BAR
While going through the navigation, I found out redundancies and readability isuues with the search bar.
The navbar did not showcase any state change while on any page. This confused the user about which page they are on. Apart from that, the hamburger menu had the same navigation as the navbar which was redundant. So I decided to do some changes...
The Redesign
In the redesign, to improve readability for all kinds of people, I added icons to differentiate the categories. Next, I added dark and light colours for selected and unselected nav icon buttons. Third, to distinguish the active state for colour blind users, I added the underline effect in the navbar.
Next, to lay down the foundation of a universal search bar, I suggested the use of chips. These chips would help the user to search throughout Commudle with keywords. In addition to this, I added a filter option to filter through labs, communities, builds and people.
Yup! that was quick. I didn’t go deep into redesigning the navigation bar in this version. This caused some problems with the product. You can read about that in my case study on the design architecture of Commudle. But before you leave, there’s one more thing I wanna show you. Let’s head to labs redesign.