codebar-wireframe-05-05.png

Codebar | Website Redesign

Website redesign of an educational coding community

codebar-wireframe-05-05.png

Codebar | Website Redesign

 

Brief

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 main goal for the service is having more women attend the events to learn programming.


Usability evaluation & Testing

I ran usability evaluation and testing of the current website. Going through these exercises helped to detect a number of issues that could potentially influence the overall user experience of the service.

codebar-current-UI-analysis-1024x931.jpg

There were identified over 40 findings. Each finding was followed by the UX recommendation. The most critical usability issues reported and observed included:

  1. Inconsistent navigation throughout the website;

  2. Confusing signup process and journey for both attendees and hosts;

  3. Inconsistent labelling (Events are also called Workshops, and are often confused with Tutorials, which are the Online Course Guide);

  4. Confusing information architecture (categories grouping, labelling, and placement);

  5. Overwhelming and unclear copy;

  6. Inability to see Your Events unless through the email.

Adding to that there were identified a few business issues. 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 rather than like a CTA button.

There were reported a number of UI inconsistencies 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.


Personas

To understand more about user needs, pain points and motivations, I interviewed a number of current codebar attendees. Analysis of the interviews highlighted trends in what users thought and felt about their experience. This exercise allowed me to created personas of a codebar.io student and a coach, as well as identify major attributes that have to be addressed and reflected on the site.

codebar-wireframe-07-1024x598.png

Snecarios

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-1024x598.png

User Journeys

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-1024x483.png

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 more often than the desktop site, namely when RSVPing to the event via the 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-1024x598.jpg

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-852x1024.jpg

Prototype

I then developed final stage mockups for desktop and mobile, and tested those with the codebar users. The new flow proved to be more intuitive, and did tackle the previously existing usability issues:

codebar-wireframe-05-06-05-1024x598.png
codebar-wireframe-05-05.png
 

Company: https://codebar.io/

Role: Research, UX, UI

Dates: November 2016 - March 2017

Tools: Adobe Illustrator, Adobe XD