Redesigning the USER PROFILE

One of the most important issues faced by the Commudle was that of networking. Being a community platform, it failed in building trust in the users to interact with each other.

In solving this problem, the first step was to rebuild the user profile such that it includes everything a user might need to know before contacting another user.

THE REDESIGN

Brainstorming the new layout for user profile

Wireframes

Based on the initial research and brief, it was pretty clear that we were going to compile complete user activity in the user profile. Hence in the information architecture, I divided the user activity into three parts: User’s contributions on the platform, user’s activity on other platforms and a feature to post thoughts and updates for the experts and organizers.

About

The design of the About section has gone through many iterations. First I redesigned the layout of the user profile into an intuitive design.

While discussing with the stakeholders, we figured that the users need a CTA to confirm that they have connected to another person. After many discussions and going through the various trends, we decided to add the Follow-Unfollow feature to the platform. I added the Message button along with the Follow button in the primary information section.

Nowadays, people approach other people by looking at their profiles, by analysing and reading their profiles. So I found it wise to add a Bio section where users can add a brief introduction about themselves.

Addition of technology tags: During the research, we realized that users tend to network with people who share the same interest as them. Other than that, our platform was hugely based on topic tags. Hence we decided to add technology tags to the skills. This would help users to understand the other user better and would also help in effect search.

Additionally, I redesigned the social media links into a more consistent design using Eva icons.

Experts Information: While I was redesigning the user profile, co-founders were launching the Experts program which aimed at bringing industry experts on the platform to help budding developers. Hence I was told to design two profile styles to distinguish between an Expert and a Member.

My biggest challenge while designing the user profile was to create an appealing expert’s profile. After numerous iterations and discussions, we finalized the top 3 iterations and then went on finalizing the one. For the expert’s profile, I added a gradient background with the product’s theme colours and a blue tick to show verified experts.

For the member’s profile, I didn’t want to give a plain white or grey shade background, hence I gave it a quirky shape behind the profile picture.

For social media links, I decided to add links such as Medium, YouTube, Dribbble, Behance, website etc. in the product. I came to this decision after looking at the users who were exploring different fields and would want to showcase their work.

Contributions

The user profile needed to be a single place that could give all the information about the user.

I knew that Commudle has vast opportunities for a user to interact with. The stakeholders wanted Commudle to be a single stop for every developer & web designer out there. I understood that to include everything in a single place, I needed to divide the interactions into categories.

So to sum up the activities of the user on the platform, I grouped the labs (written by the user), events (user as the speaker), build (projects by the user) and communities (that user is a part of) under one category. Contributions.

REDESIGNING BUILD’S CARD

Builds is an initiative by Commudle to bring comunity members together by allowing them to share their work with each other in the form of builds. The purpose was to create a platform which can be used to find and share reusable dev projects.

PROBLEMS IDENTIFIED

1. Hierarchy: In the current design of the builds card, the creator’s information is placed in the centre.
2. Consistency
   • No word limit was added for the designation of the creator.
   • Profile pictures of the creators were in different shapes
   • The size of the builds card varied with different builds as per the content.
3. Rating System: The rating system seemed somewhat misunderstood. The current rating system was to give a star to the build you liked. But one or two stars doesn’t feel like an achievement but as a bad review.

SOLUTIONS

Hierarchy: The centre is the second priority space after the top left is the first priority. In this case, users wanted to know more about the project rather than the creator. The centre should be used to display more important information such as the description of the project (builds).

Rating System: Rating System: To show the viewers popularity of the project, I decided to use Heart as the like button. I chose it because it could be universally used throughout the platform to rate the other features as well as other popular methods such as like button, claps, 5-star or star rating.

Technology Tags: During the research, I realized that the first thing programmers look for is the topic they are interested in. To make the search easier, I added technology tags in the projects(builds).

COMING UP WITH THE NEW DESIGNS

For the event's card, I was asked to design a card for two places on the product: The user profile of the speaker and on the home page. I figured that the number of attendees gives a good impression on the users’ minds. Hence, the stakeholders selected iteration 02 for the home page and iteration 3 for the speaker’s profile.

REDESIGNING COMMUNITY’S CARD

For the new design of the community’s card, we unanimously decided that there’s no need to display the number of events on the card. But it was important to mention what role the user has in the community. Hence I removed the number of events and added the role “Member”, “Organizer” in the card.

DESIGNING THE CARD FOR THE CONTENT

For the content section, it was decided to give space to display blogs and videos. For the design of content cards especially video cards, I took inspiration from YouTube as almost 90% of the videos are uploaded on YouTube these days. For the card displaying blogs and writings, I added just the title, publishing date and the image. The content card was a quick addition hence I didn’t get much time to experiment.

The old lab's card pretty much consisted of all the required information such as cover photo, title, publication date, creator’s information and the number of likes.

In the redesign, I just adjusted the visual consistency by following the design guidelines I created along with the type system and colour system. Since the number of stars gave a notion of unappreciated labs when the stars were less than 5, I changed the like button from stars to heart like. I removed the “Start Here” button because I found it unusable during research.

Bringing all the components together: The new profile

As I compiled all the components together, the new layout came to life. I followed a two-column layout for the user profile. The right column was then further divided into the cover image and the user’s activity on the platform. I divided all the activities into three categories and displayed them in the form of tabs: contributions, social and feed.

After the redesign, Commudle users got their profile dashboard where they can look at their all the activities on the platform.