— PROJECT NAME
Leagues of code
— ROLE
UX/UI designer
— DATE
Ongoing project
since Jan 2021
— Collaborate with
Javier Rebolledo
Leagues of Code is an online coding academy for young learners. The portal is built for students, guardians, and teachers to manage student schedules, performance, and payment.
I was working as a full stack designer to design the first iteration of the platform. I’ve taken the project end-to-end from mapping initial user research and ecosystem to wireframes and finally to UI design.
UX design
Start with Questions
As you know, the process is always started with tons of questions. Usually I am using ‘how might we’ way to think about solving the lots of problem. You can you this place to talk a little bit about the image on the side.
Competitor Analysis
Research is another key part of UX process. I’ve been through other competitors, and analyze how they manage the process, pros and cons about each competitors, and how could make the different position in this industry.
Ecosystem
Leagues of code has different types of users; Students, Parents, and Teachers (Admin). I tried to think about which part of the portal could be relevant for each other.
Feature Matrix
I listed up every features for each platforms. And we sorted out MVPs based on 3 different standards (business value, user value, feasibility). It’s one of the the most effective way to communicate each features with developers, project manager, and other designers.
We set up priorities for checking MVP based on three standards – Value to users / Value to business / Feasibility. Each colors represents of what should we focus on first.
Site map can be… way longer than our expectation
Sitemap
We structured sitemaps of each portals focused on how might we deliver the information in clear way but not too bored. And we’d like to simplify the screens as much as we can and iterate screens to give the coherent brand images. Leagues of code has different types of users; Students, Parents, and Teachers (Admin). I tried to think about which part of the portal could be relevant for each other.
Userflow
Before start working on wireframe, organize the flow to better understand the process and not miss any detail process of users. Those flows are about sign up process, start new course, change plan and payment method.
User story
Depending on users or screens, we need to handle different purposes. User story mapping helped to setup the right priorities for each goals of users.
Blueprint
As we understand the whole project deeply, I can create the blue print to scope the whole picture – especially project manager is happy about it – to communicate the flow we create and what we need to ask developers, operators, or any other stakeholders.
High Fidelity Wireframe
Before start working on wireframe, organize the flow to better understand the process and not miss any detail process of users. Those flows are about sign up process, start new course, change plan and payment method.
Guardian side – Subscription management: One of the main point of guardian platform is managing their payment and subscription in one space.
Student information – Overview: This is the screen to overview the brief information for the most important things such as upcoming events or current course information.
Student information – schedule: This is the screen for detailed schedule for each modules and yearly schedule. We give the linear calendar view option to check the information in a comfortable way.
Manage & edit account : We tried to give them better experience, and wanted to ask about the reason why they want to leave.
UI design
Feedback applied
Based on the feedback after wireframe, we re-organize the
information of dashboard; adding CTA message, show important notification, and enrolled students.
Style guideline
Setting up the brand colors and typography is the basement of UI design. We used the library for using the same style guideline to the whole UI design.
Components
We started creating components to give the wholistic brand image and make our life easy. We spent most of time to create component, and apply it to the whole UI design.
Iconset
Finding the right icons for our design system for delivering coherent brand image.
Prototype
Based on all the logics and UI guidelines, I finished the platform design for 3 different devices; Desktop, Tablet and mobile. Our team tried to give the nice experience from each platforms.
I enjoyed the whole process of creating platform understanding different type of users with different purposes. To create simple design, countless logics, researches, meetings, and conversation is hidden behind the scene.
Please visit the website to check detailed information about Leagues of Code.