Codible

A social blog post site for developers to share knowledge in the industry to people who want to learn development or keep up with innovative techniques.

Check out the prototype

My role

As the lead designer of this project, I worked closely with 1 product manager and 1 software engineer.

Project goals

Communicate with developer to combine both programs into one social blog website.

My team

1 software engineer and 1 project manager

Brief

For this project I was asked to help combined a social program and a blog program that was developed by Annabelle Lee. She created these two programs from scratch and wanted help designing both programs together for an easy user experience. This became a person project for the both of us to learn how to communicate together from design to development.

The one on the left is the social program and the one on the right is the blog post program.

User flow
chart

During the time of communicating about the project, I asked the developer and project manager to assist me with mapping the user's flow. We used InVision free hand to communicate the users journey through the program. This gave us an idea of what content is needed and how many screens will be created. This also gave us an idea of how much time will need to be put within the project.

The one on the left is the social program and the one on the right is the blog post program.

Sketch &
wireframe

After collecting all the information needed, I started sketching possible ideas that would fit the flow. After many sketches later I turned my top three sketches into digital wireframes to share with Annabelle. After deciding which layout works best, I made a full wireframe prototype to test with 4 users in the Design and development industry.

First design concept

We started with this design concept but one of the problems we faced was the number of groups that would be followed. Members have an unlimited amount of groups to join so we felt that this could get crowded.

Second design concept

We then moved to this idea of having an organized side bar but the challenge we faced was time to develop. We realized this would take some time to create but maybe aim for something like this in the future.

Third design concept

This then made us think of created a simpler approach by making this kind of layout. Something to see recent blog post and have a page for list of groups.

Visual Design
& Branding

Once the wireframe was approved, I was able to begin creating the brand for the product. We called the product "Codible" and it was named by Annabelle always telling me my designs were codable.

Using
Zeplin

One of the challenges we faced on this project was to communicate from design to development. Me and Annabelle discovered Zeplin which was a tool that allows designers to export artboard in development specs. We were also allowed to leave comments in areas we needed changes and I was able to create a style guide for Annabelle to follow.

Project
outcome

In the beginning Annabelle and I had big ideas for this personal project. When we began working on the project we realized how much time it would take to create and develop. We had to cut out some features to meet the deadline of which we selected for this project.

In the end we learned a lot from Codible such as how to communicate better and time manage our selves better. We will continue to grow this project with the features we planned to have but it will be little updates at a time.

If you want to chat, work together, or see more of my work, send me an email.