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 LABS

As the name suggests, labs were designed to share practical knowledge through step-wise mini-tutorials. Noone else than their fellow developers faces difficulty in understanding the critical points. Hence, the creators came up with the concept of labs.

Labs are stepwise tutorials with multiple functions like helping developers by sharing knowledge & provide a platform during workshops & sessions for live practice.

The Redesign

In the new design, first and foremost, I decided to fit the content into a narrower section. Researches suggest that in the long horizontal texts, users read in F shape. They end up focussing on the left side content. Recent designers have started putting content in the centre to ease users’ effort in rolling eyes left to right too much.

I redesigned and repositioned the creator’s info on the top left to encourage readers to know more about their favourite writers.

Then, I figured that when a user is eager to learn and like a lab, he would like to learn more on those topics. So I added a Related topics section suggesting labs, events, builds on related topics.

In the previous design, the “Next” and “Previous” buttons were text buttons that easily hid among the other texts. So I changed those buttons to contained buttons and repositioned them outside the container. Apart from this, I suggested an additional function of pagination for jumping to any section through index list buttons on the left. This would help the user in hoping to any section with one click rather than clicking previous-next multiple times.

Following the same design guidelines as I decided for builds, I changed the rating system from stars to a heart like button. Also, I moved the like, share & comment button to the right column and fixed the scroll. Now users can like, comment and share from anywhere on the page.

Additionally, to enhance the experience of both the writer and the reader, I suggested allowing users to add callouts. This would help the writer in highlighting important points for the readers..

Since Commudle is a community platform for developers, I decided to add a code block in the labs. I added a "Copy" icon button for an easy copy of the whole code snippet. This would allow users to add code in their tutorials and readers can easily copy it and compile it.

In the comment section, here are the few reasons due to which design failed:

  • Like, report and delete option were shown in the order Report, Delete, Like.
  • Delete comment option were shown to the readers as well.
  • Irreregular shape of the profile picture.
  • Inconsistant sizes.
  • Improper use of buttons

In the new design, I removed the “Delete” button and kept the “Like” button only. Also, I added “Post” button to post the comment. Additionally, I redesigned the whole comment section into a uniform UI.