Codebar.io | Redesign Process

Codebar.io is a community that lets people learn and teach coding and programming for free. It spans 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 general users’ (both new and existing) feedback pointing to 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; but if users access an event through an invitation email, such an option does exist;
8. Since the community exists though donations, there is no donate section that would explain why users are encouraged to donate, and where the donation money goes 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, personas were created of a codebar.io student and a coach. After analysis of each persona and their pain points, we identified major attributes that have to be addressed and reflected on the site.

codebar-wireframe-07

SCENARIOS

Based on the 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, 2 user journeys were created:

1. For the first-time user who would normally land on the 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 users’ point of access to codebar.io and device type they would use. The findings helped us to create wireframes with key points that have to be present per screen on different devices.

With users accessing the mobile site in more instances than the 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. Events dashboard in a vertical timeline form is easy to navigate. Events details with the time, date, address, and attendees, are also easily accessible upon click on the event.

codebar-wireframe-01

The desktop website is 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 sign up call to action, 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