Codebar.io | Redesign Process

Codebar.io is a community that lets one learn and teach coding and programming for free. It spans across a number of cities and is held every week in major cities like London.

THE GOAL AND CURRENT SITE PROBLEMS

Briefed by the codebar.io organisers, the main goal for the service is having more women attend the events to learn programming.

The service has already got a working website, with the general users’ (both new and existing) feedback pointing at a number of issues and pain points, namely:

1. Inconsistent navigation bar through the pages;
2. Confusing signup process;
3. Upon a signup, a user is taken back to a non-signed up user home page;
4. Inconsistent names, ie Events are also called Workshops, and are often confused with Tutorials, which are the Online Course Guide;
5. While signing up as a host, it forwards you to a Donate page;
6. Sections Our Students, What We Teach and Our Sponsors do not belong together; with explanatory copy for each not quite fitting into the categories; with two of the categories clicking through to the same page;
7. Upon joining the event, there is no opportunity to see other students or coaches; while if access an event though an invitation email, such option exists;
8. Since community exists though donations, there is no donate section that would explain why users are encouraged to donate, and where the donation money go to; the donate link looks like a warning.

UI-wise there were a number of issues too:

1. Inconsistent margins and paddings with occasional unnecessary gaps or lack of whitespace between elements;
2. Buttons and links appearing in different colours;
3. Too many levels of textual hierarchy;
4. Banner and introduction copy overlapping make text barely legible;
5. Text and logos not aligned in the Events section;
6. Too tight line height which makes it harder to scan through the text;
7. Too long line in the intro paragraph;
8. Two intro paragraphs which should be broken down to one.

codebar-current-ui-analysis

PERSONAS

To identify general user’s needs, there were created personas of a codebar.io student and a coach. After analysis of each persona and their pain points, we figured major attributes that have to be addressed and reflected on the site.

codebar-wireframe-07

SCENARIOS

Based on created personas, we developed scenarios and storyboards for them, when accessing codebar.io from different devices and in different environments.

codebar-wireframe-08

USER JOURNEY MAP

Based on codebar.io personas’ interests, lifestyle and device choices, there were created 2 user journeys:

1. for the first time user that would normally land on page either through Google search or referral;
2. for existing coaches and students who would either receive an email invite for the next event, or come to the site directly.

codebar-wireframe-09

WIREFRAMES

Scenarios and user journeys helped to identify using which device and at which point of user experience students and coaches would access codebar.io. The findings helped us to create wireframes with key points that have to be present per screen on different devices.

With users accessing mobile site in more instances than desktop site, namely when RSVPing to the event via email invite, and checking the time and the address a few hours before the event, we decided to go with the mobile-first approach in designing.

Mobile design for a non-signed up user starts with the events dashboard on the first screen. Upon sign up, the user can easily navigate a 4 tab bottom menu with the events dashboard, online courses guideline, user profile and a host tab. Event’s dashboard in a vertical timeline form is easy to navigate. Event’s details with the time, date, address, and attendants, are also easily accessible upon click on the event.

codebar-wireframe-01

Desktop website is being most often visited during the classes to access the online course guide, as well as to browse and RSVP for the events. The homepage, providing the About info and suggesting to sign up, is followed by the events dashboard with the calendar and cities as a secondary tab to sort the events by.

codebar-wireframe-03

PROTOTYPES AND MOCKUPS

Final stage mockups for desktop and mobile views:

codebar-wireframe-05-06-05

codebar-wireframe-05-05Quick mobile prototyping ready for user testing:

 

Date

November 16, 2016

Category

UX Design