CODESKETCH

Connect. Collaborate. Create.

To create a great product, you need an interdisciplinary team. But getting the right people for the job can be difficult. Three teammates and I are creating an online platform that connects designers and coders with each other to work on their own side projects.

01. Problem Space
How might we allow designers and coders to more easily collaborate on software based projects? We're so often broken up into our separate disciplines or majors that finding experts outside your own field presents a challenge.

Our objective is to connect coders and designers.
Analyzing current solutions to improve upon them.

02. Qualitative Research 
Our user interviews investigated the relationship between designers and coders: "What made for good partnerships? How do designers currently find programmers? What do programmers look for in designers?"  By conducting interviews, we gained insight into questions like these. We also found that many poeple had difficulty finding teammates to work with outside their own discipline, providing evidence that our product did indeed address a need. We also examined other products with similar goals to see how we could improve upon existing solutions as a form of competitive analysis.

03. Personas and Storyboards
Next, we all constructed user personas based on the people we had interviewed. For each, we noted their characteristics, behaviors, needs, and goals. We also sketched out storyboards illustrating how each of them might accomplish a task through our product. Having these personas  allowed us to keep our end users in mind throughout the design process.

Drawing out a storyboard for a user persona.
Because who doesn't love free candy?

05. Paper Prototyping & Testing 
We began ideation by having each team member individually make their our own wireframes. Then, as a group we critiqued different elements of each, and then combined our different versions into a single comprehensive paper prototype.
We did some guerrilla user-based testing by camping out in the library and offering free candy to participants. (College students love any kind of free food.) Our data collection included notes, audio, and video footage. We compiled all the feedback we had received by sorting it into categories based on the product’s features and screens.  
Our data served as valuable critique for improving two main aspects of our product. Challenging our designs in these areas became critical: “Firstly, what’s a better way to visually display one’s skills on their profile? Secondly, how can we improve the user workflow for profile creation?” As we discussed and sketched out our responses to questions like these, we worked to address the design challenges that arose during user testing.

06. Design Challenge: Search Feature
"How do people search for teammates? What are they looking for? What criteria can we focus on to make their search as effortless as possible?"  These questions became critical as we focused on designing a search feature that would deliver the best user experience possible. After further research and a few redesigns, our search bar included filtering by location, skills needed (Photoshop, web dev, etc.) and project key word descriptors.    

Honing the process of searching for teammates and projects was essential to crafting an enjoyable user experience.
Users enter their own skills and rate their proficiency on each when making a profile.
User's top 3 skills are showcased on their profile, and other skills are simply listed (to avoid an overcrowded UI). Users can hover over a skill for its description.

07. Design Challenge: Skills UI
"How might users input the skills they have? Should users have to rate themselves on their proficiency in each skill? Should every single skill be displayed on a user's profile?" During our initial research, we found that oftentimes designers don't know what a programmers skill means, and vice versa. (If a programmer says they're JavaScript expert, does a designer know what that really means?) Yet we also found that people based their teammate selections largely on their perceived skill level. We iterated through multiple redesigns and testings of prototypes before finalizing these UI elements.

07. Axure Comps & Webpage Prototypes
After working through some design challenges, we started making visual comps on Axure. We wanted to maintain consistency across our website, so we made master elements and a style guide to ensure that we used uniform typography and color schemes. Our developer was able to take our Axure comps and turn our designs into working webpage prototypes - the project is finally coming to life! If you would like to know more about the project, please read our project blog linked below:

Project Blog
Next Project