CodeSketch

Connecting coders and designers to work on awesome side projects!

ROLE: Lead UX/UI Designer

UC San Diego, Information Architecture Course

CodeSketch began in my Information Architecture course at UC San Diego. This system connects designers and coders so they can create and finish projects together. People can search for coders, designers, or projects. When users search for coders or designers, they can look at other people’s profiles. These profiles include information such as skills, education, available time, time commitment, experience, past/current projects. The profile page has a direct messaging system and can be followed by users. Users can also invite people to their projects.

My Role

My team originally consisted of 6 people where I was the main UX/UI Designer. I was in charge of the direction of the visual design, user interface, wireframes, and presentation deliverables.

The Process

Ideas, Ideas, Ideas

Brainstorming and coming up with ideas that appealed  to us all.

During week 2 (out of 10) of our process, we all sat down and started throwing out project ideas, anything that came to mind. No idea was a bad idea to us. Our main focus was to not reject anything right off the bat, let each idea have a spot on our brainstorming board. Sticky note and after sticky note, we ended up with: The Wall of Ideas

27 project ideas total- we started to dwindle our list, take out the ideas that we didn’t find as much interest in moving forward with. We did this based on a voting system, each person had so many votes each round.

it became pretty clear to everyone which one we were all the most passionate about, the one that resonated with us the most, even the TAs. We all were leaning towards: Connecting Designers and Coders. Even talking about it, we were all thinking back on the tough experiences we had trying to find designers and coders to collaborate on a project with- it only made sense to move forward with an idea that was more personal to us.

User Needs, Personas, & Storyboards

We decided to interview potential users about what they look for in a designer/coder, their past experiences (good and bad), and the limitations they have on their own projects that they need help on.

Our team has developed different personas based on people we’ve interviewed. While our characters range from “star people” to animals, these personas are based on actual qualitative research we’ve conducted via face-to-face interviews.

Laying It All Out

Before we even began sketching out our lo-fi prototypes, we had more brainstorming to do. First, we needed to identify the type of webpages that the users would need.

With the top features of the site in categorized lists mapped out, we also worked on the flow of the webpages.

  • Homepage: A simple homepage to search for coders, designers, and projects. Possible newsfeed once the user has logged-in.
  • Profile Creation: Easy profile creation.
  • Profile Page: A description of the user that highlights their skills and experience. Able to send messages and/or follow users from profile page.
  • Project Creation: Project leader or team creates project with information.
  • Project Page: Description of project. Team member search, invites, and request for invite.

Discussing the architecture and flow of the website.

We agreed that we liked a simple and clean webpage where the content would speak for itself. We also liked the idea of using a video background to create a subtle yet immersive experience.

Prototypes & User Testing

We also created paper prototypes to quickly test out our features. We set up our prototype to usable in a natural environment. We wanted our users to have the realistic experience of using our prototype as a website on a laptop. Of course, to encourage user testing we had to bring along snacks to attract able, potential users.Our testers provided valuable feedback while they navigated our site. They pointed out what they liked and what they didn’t. Watching them hit issues and get confused was valuable in helping us realize what areas made sense to us, but didn’t make sense to everyone else.

Armed with buckets of feedback from user testing, we set out to reiterate our product designs- this time with hi-fidelity prototypes. After finalizing some decisions about various design choices, we began building hi-fidelity prototypes on Sketch and developed it into a webpage prototype using InVision! As we started work on our hi-fidelity prototypes, we wanted to maintain consistency across our website. So, we’ve made master elements like navigation bars to ensure uniformity among all the pages, and we’ve developed a “style guide” to ensure that we use consistent fonts and coloring.

Finishing Touches

The last 9 weeks of our ideas, rough sketches, personas, storyboards, lo and hi-fi prototypes finally reached the implementation level. This important stage was left mainly to our fantastic coders and visual designers who brought the project to life! There were a lot of back and forth between the coders and designers in our group. Each little interaction made CodeSketch more and more polished.

The idea of adding cinemagraphs to our homepage never wavered throughout the past 9 weeks. We spent the day at the beautiful Galbraith Hall in UC San Diego shooting our video. We chose this location for its modern architectural features and the collaborative feel it had.

Results

Preparations for Shark Tank were intense. We built a rough outline of our presentation to figure out what content we wanted to go over. Finally, the day of the presentation came. We met up at 6:30am to practice and make sure everyone knew what they were doing. The presentation went smoothly and was a success!