Profile page and interactive timeline for ‘CodeConnect’, a platform to connect women of color in technology.


CodeConnect mockup


CodeConnect is a web platform that aims to provide opportunities to women of colour in technology to explore, grow, build networks and advance their tech careers through a database of vetted tech resources, culturally-intelligent training and tech-related job opportunities. 



September - December 2017

Tools used

Adobe Illustrator, Sketch, Balsamiq, Mural

Work setting

Team of five people (Josh Kim, Ming Li, Duo Yang, Sanjana Rajgopalan, Pallavi Benawri)


Our team worked towards resolving 3 main design-related issues:

  • Designing the user Profile page

  • Increasing user engagement on the platform

  • Visually representing a user's tech-journey

My Role

In a team of five people, my role was to create wireframes for the 'Journey', high-fidelity mockups for the 'Work Experience' and 'Review work' section of the prototype and compile the final deliverables. In addition, I was heavily involved throughout the process of conducting user interviews, performing comparative analysis, affinity mapping and iterative prototyping. 


After the initial client meeting and scoping the project, our team decided to focus on the profile page and on providing an interactive way for users to create and share content about their personal tech-journeys. With this visual Journey map on the profile, users can customize and express their journeys with power and freedom. This would increase interaction and user-generated content. It would also serve as: 

  • Common ground for all users

  • Showcase space for areas of specialization, expertise, experiences

  • An interface where user feels in control

Since our client addresses a socially sensitive issue, there was a need to not only understand the target users but also create an inclusive platform where people feel motivated to improve and empowered to reach out to each other for help and support, instead of being intimidated by other people's progress. To further explore this domain our team conducted Comparative analysis, user interviews and performed affinity mapping. 

Comparative analysis

We divided the direct and indirect competitors into three distinct categories based on the type of content they provide, and analyzed the features and functionalities present in each of the platforms. 

  • Showcase-based: Seelio, Github, Glassdoor, LinkedIn, Behance

  • Learning-based: Udacity, Coursera, LaunchCode, Codecademy

  • Forum-based: Stackoverflow, Reddit

Comparative analysis for 'CodeConnect'

Comparative analysis for 'CodeConnect'

Two major comparable platforms that offer substantial amounts of features that our client hoped to implement were LinkedIn and LaunchCode. LinkedIn focuses on showcasing the final product and experience, and LaunchCode focuses mainly on guidance and matching, rather than the journey the user took to get to where they are. We wanted to overcome this gap as well as integrate these functionalities into the platform.

User interviews

Our team conducted six interviews with women of colour in the field of technology. I was responsible for conducting two of the six interviews. Two of our interviewees were users of the platform CodeConnect and the other four were University students. We gathered insights on current usage of CodeConnect, need for curated resources and building a network, motivation for giving/ receiving mentorship and difficulties faced in the tech industry as women of colour. Majority of the interviewees mentioned that even though they hadn't faced gender biases in the workplace, there was a skewed gender ratio and they would feel more comfortable with more women surrounding them in the tech industry. Further, the major pain points our interviewees had were: 

  • How did that person get to this point in his/ her journey?

  • What do I need to learn? Where do I learn it from?

  • Can someone review my work?

Affinity mapping

Based on interview findings, we created an affinity wall to categorize the information and define clear goals for the final deliverable. Our key takeaways were that the platform should incorporate the following:

  • Peer-learning community and local network

  • Anecdotal experiences as career models

  • Resources for skill-building

  • Guidance about the industry

  • Advice on learning path, tools, and events

  • Work sharing and review


Affinity wall based on initial interviews

Affinity wall based on initial interviews

Takeaways and feature finalisation

For a target user group that is mostly comprised of people fairly new to the tech field, internal competition could be potentially intimidating instead of encouraging. For instance, points indicating progress, badges showing levels of expertise or having a differentiation between mentor (active, experienced users) and mentee (amateurs) could result in subdued interaction between users and difficulty in approaching people for guidance. Therefore, instead of a point/ badge system creating divides, we relied on collaboration and support to advance in the field.

Showcasing my wireframes and getting feedback

Showcasing my wireframes and getting feedback

Preparing to present to the Design Clinic community

Preparing to present to the Design Clinic community

The major features of the profile page centered around this insight are:

  • Discussions: Discussions are meant to instigate conversations and contribute towards community building.

  • Review work: Users have the option of reviewing each other's work. If a user requests a review from another user, he/she has to submit a review of their work in return. This will ensure that people fill the reviews sincerely so that they get thorough feedback as well. The 'Review work' form also has specific questions with a minimum word requirement so that it is not just a meaningless metric but actually reflects the quality of work.

  • Timeline: Journey maps are a way to gauge the experience level of a particular user without quantifying it in terms of coins or points to create hierarchical divisions. Users can create their own journeys, share others' journeys, make suggestions for future pathways, and find more experienced users or people on a journey similar to their own. Timelines can have both major milestones and minor milestones. Deciding what constitutes as a major or minor milestone is up to the discretion of the user.


Each team member was responsible for creating wireframes for the profile page according to their own ideas and interpretations but subject to some pre-decided guidelines. The team then discussed the value of each suggested feature and chose the most suitable iteration. Our feedback sessions were highly productive and the different perspectives helped us arrive at an optimal solution.

Initial wireframes for the profile page

Initial wireframes for the profile page

Iterations of the timeline

Iterations of the timeline

Digital Prototypes

We created the digital prototypes using cues from the current UX and design guidelines of CodeConnect to make the process of development and implementation easier.


Overview of the Profile Page

Overview of the Profile Page

Profile page with journey element highlighted

Profile page with journey element highlighted


Work: Expanded card

Work: Expanded card

Review work

Review work


Add new work item

Add new work item

Add new Journey item

Add new Journey item


I had an amazing set of people working with me for this project. We were eerily productive in meetings, had a great mutual understanding, and our team lead (Josh Kim) was an effective leader and communicator. I learned a lot about empathy in design and incorporating the user's perspective whenever possible, since our project had a social issue component. Weekly sessions with the Design Clinic community, our client and our team mentor were a great medium of getting feedback on our ideas, and we made tremendous improvements by showcasing our work to other people, even if they were not direct users.