Remote Worker Indonesia — UI/UX Case Study (Part 2)
This article is a continuation of UI UX Remote Worker Indonesia — UI/UX case study (part 1). In part 1, we discussed about empathize, define, and ideate stages. So part 2, we will discuss about prototype stage.
Prototype — Stage 4
Remote Worker Indonesia’s (RWID) website consists of 12 pages. Of the 12 pages, I categorized them into 2 types based on their users. Namely users who are prospective members and active members.
Prospective members
- Landing page
- Program page
- Course page
- Registration page
- Agreement page
- Payment page
- Virtual payment page
- Successful page
Active member
- Landing page
- For member page
- All course pages
- Course learning page
- Profile page
Based on the discussion of UX design in part 1, there are several problems faced by users, both prospective members and active members, including:
- Information
- Communication group
- Mentoring
- Member evaluation
- Course materials
- Media learning
Of the 6 problem points, here are 3 problem points that will be applied to RWID web design:
- Information
- Member evaluation
- Media learning
Information
Information handling applications are divided into 2 based on the type of user, namely prospective members and active members.
Information — Prospective Members
To improve the delivery of information to prospective members, I applied it to 3 pages, namely the Landing page, All Facilities page, and Course page.
1. Landing Page
RWID web landing page, divided into several sections, namely heroes, benefits, programs, courses, success stories, member testimonials, and FAQ.
- Hero
The hero section is intended for a brief introduction to what RWID is.
- Facilities and Bennefits, Programs, and Courses
The next 3 sections are to provide brief information to prospective member users about what is available at RWID, starting from facilities and benefits, what programs are available, and what courses can be studied at RWID.
These three sections aim to provide as complete and concise information as possible so that prospective member users can understand what they will get if they join RWID. This is to minimize the mismatch between the expectations of prospective member users and what RWID will provide to users if they have joined as active RWID members.
- Frequently Ask Questions
Apart from that, in the last section there is an FAQ section to display several questions that are often asked by prospective member users about RWID. An FAQ is displayed to provide information to prospective member users regarding additional information resulting from FAQ answers from other users. So it can make it easier for users and increase information about RWID.
2. All Facilities Page
Intended to provide a more detailed explanation regarding what facilities RWID provides for active users. This page is divided into 3 sections, namely:
- Main Courses
Course section, to see what courses prospective members can study if they are already active members. All courses are displayed using a simple card component and displayed using the horizontal slide feature. The order is based on the courses most chosen and studied by active members. Starting from UI/UX design, Front end development, to visual design.
- Additional Courses
Additional courses, to provide information about other courses besides the main course that users will get when they join and become active users. Consists of 2 components, namely community media and English class. Both are supporting facilities for active users in achieving their goal of becoming remote workers.
- RWID Extravaganza
Extravaganza section, to provide information about extra facilities from RWID, namely affiliate, waqf fund, and initiate small business. Even though there is no direct connection with remote work activities, this facility can be used by active members both for personal needs and for the surrounding community.
These three sections are displayed briefly to provide information to prospective member users so that they know in full what facilities they will get if they join and become active members. All components of these facilities are displayed in card form and equipped with a CTA (call to action) button to direct to another page if a prospective member user wants to know in detail about one of these facilities.
3. Course Page (UI/UX Design)
Intended to provide more detailed information about one of the courses the user chooses. In this case, the user selects the UI/UX Design course as the course he chooses.
On this page, it consists of 7 sections, namely hero, success story, curriculum, member portfolio, mentor, program and price, and FAQ. All of these sections are to provide detailed information to prospective users regarding UI/UX design.
- Hero
Hero is displayed as brief information about UI/UX design as well as increasing the attractiveness of the UI/UX design in RWID.
- Success Stories
The success story section is intended to provide information to prospective member users regarding success stories from active RWID members who have previously joined. This section serves to provide prospective member users with an idea of the process they will face to achieve success in the world of remote work.
- Curriculum
The curriculum section is intended to explain in detail what users will learn when they join as RWID members. The curriculum section is divided into 4 phase components, namely fundamentals, case study, personal branding, and job hunting. Each phase component is equipped with a dropdown button to display detailed information about each phase. And each phase is also equipped with an estimate of the time required by prospective member users to complete it. So, users can estimate when they can achieve their final goal of remote work.
- Portfolios
This section is intended to provide information to prospective member users about what products have been successfully created by active RWID members. This can provide expectations to potential member users regarding the products they can design in the future if they become active members of RWID.
The portfolio of active members is displayed on a card component equipped with a CTA button. So, when a prospective member user is interested in one of these portfolios, the user can click on the CTA button and direct him to the Figma page to see more details of their portfolio.
- Mentors
This section is intended to provide information about who is the mentor for the UI/UX design course at RWID. Prospective member users can view existing mentor profiles one by one and view their detailed profiles via a CTA button which can direct users to the LinkedIn page of the member they are interested in. So, users can determine for themselves who their mentor is by looking at the mentor’s career track record.
- Class and Price
This section is intended to provide information to prospective member users regarding what programs they can take to become RWID members along with the costs. Each program is equipped with an explanation component regarding what facilities you will get if you choose one of the 2 program options provided by RWID. This section can also be used as a comparison between one program and another, both comparing facilities and costs.
This section is equipped with 2 CTA buttons, namely the Apply now button, for members who do not have additional questions, and immediately decide to join RWID through one of the programs that have been provided. And a contact us button, for members who still want to ask questions first about one of the programs or RWID as a whole.
- Frequently Ask Questions
Just like the previous page, the FAQ section is intended to provide additional information that has not been provided in the previous sections. Additional information is answers to questions frequently asked by users. So it can make it easier for other users who have similar questions without having to ask RWID customer services again.
Information — Active Members
To improve the delivery of information to active members, I applied it to 2 pages, namely the For Member page and All Courses page.
- For member page
For the member page, there are 7 sections consisting of announcement banner, onboarding, all courses, RWID media community, RWID English Class, and extravaganza.
- Announcement Banner
The member announcement section is intended to display several announcements regarding events that will be held in the near future, such as joint coding classes, providing the latest material, and even English class schedules. This section functions as a reminder for active members about events that will be held, so that there are no complaints about events that are not informed or that the information is drowned in the chat group column.
Sections 2–6 are filtered using the filter component on the left side of the website page to make it easier for users to navigate the page.
- Onboarding
The onboarding section is intended to provide comprehensive information regarding what facilities can be accessed by active RWID members, complete with how users can access them. The onboarding section is displayed using a card equipped with a CTA button that can direct users to the onboarding page.
- All Course
The all courses section displays every course that can be studied by active members. Each course is displayed on a card which contains several components such as the course title, illustration, short explanation and CTA button. Users can choose which course they want to study. By pressing the CTA button, the user will be directed to enter the learning page and start their learning process.
- RWID Media Community
Section RWID Media community, to display information about the media used by active members in communicating with each other. This information is packaged using a card containing a title, illustration, brief explanation and CTA button. By pressing the CTA button, the user will be directed to another page to get further information about the media, an explanation of group division and a tutorial for creating account elements.
- RWID English Class
RWID English Class section, to provide information to users that apart from course facilities, RWID also provides English class facilities where video learning can be accessed. The English class section is displayed using a card containing a title, illustration, short explanation and CTA button. By pressing the CTA button, the user will be directed to another page which contains a complete explanation of the RWID English class, video learning, and a schedule for the joint speaking class.
- RWID Extravaganza
RWID extravaganza section, to provide information about extra non-course facilities at RWID. These extra facilities consist of, RWID Affiliate, Waqf fund, and Initiate small business. All three are displayed on the card component which consists of a title, illustration, short explanation and CTA. If the user is interested in one of these extra programs, the user can select the CTA button and be directed to a new page which provides a detailed explanation about one of the extra programs, complete with how to access it and the requirements needed.
In essence, the page for members provides information to the RWID’s new comers regarding a brief explanation of what facilities are available and how to access them.
2. All Courses page
Based on the red routes analysis, RWID’s main facility is video learning, or in this case digital courses. On the All Courses page, all information is about each course that provided by RWID is displayed, starting from UI/UX design, to visual design.
- Announcement Banner
The first section is in the form of an announcement banner. Just like on the previous page, the announcement banner component is intended to remind active members about the nearest event that will be held by RWID.
- Courses Filter
The second section is a filter component for each course provided. Users can choose a course that they think is suitable for them by clicking the CTA course button.
Each course has few sections consisting of a title and brief explanation, video learning, portfolio, and mentor.
- Title and Brief Explanation
The title section and brief explanation aim to provide written information about UI/UX design as a whole, the stages that must be taken in the process of becoming a professional UI/UX Designer.
The video learning, portfolio and mentor sections use filters on the left side of the website to make it easier for users to navigate the page.
- Video Learning
The video learning section is displayed using a card containing a title, illustration, short explanation and CTA button. To start the learning process, users can click the CTA button and then be directed to the video learning page.
- Portfolios
Portfolio section, to display the work of active RWID members who choose UI/UX design as their career path. This section serves to provide an overview to new active members about what they will produce in the process of becoming a UI UX designer. Apart from that, this collection of portfolios can also be used as a source of inspiration when other members design a website or mobile app.
- Mentor
Mentor section, to provide information about who is available to become a mentor. Active members can research each mentor by clicking the CTA button which can direct them to the LinkedIn page of each mentor. This can be taken into consideration by new active members in choosing their mentor.
Media Learning
The media learning page consists of several sections.
- Notification Banner
Same as the previous page, this section functions as a reminder for active members regarding several events that will be held by RWID.
- Title and Short Descripitions
The title and short description of the course, in this case is UI/UX Design. This section functions to provide information to the user, what digital course he has chosen, and what features are on the page. Everything is written briefly and concisely.
- Filter of Learning Phase
The filter section of the learning phase is designed like a CTA button. which consists of onboarding, fundamentals, case studies, personal branding, and job hunting. These five phases are a sequence of learning processes for active members, starting from 0 until members are ready to hunt for jobs.
- Filter of Course Content
Each phase has several sections. First, course content. The course content section is a filter of what sessions are in each phase. This section is on the right side of the media learning page. Functioning like a table of contents in a book, the course content section also has sub content which contains the title of each material. This material is a learning video which has a duration of no more than 10 minutes. This is expected to save time and make the learning process easier for users.
- Video Learning
From the material sub-section, the user can select it and the user will be directed to the video learning section which is the main section on the media learning page. The video learning section contains material in the form of videos that have feature buttons that are similar to video platforms in general such as YouTube and Udemy.
- Article and Comment sections
Under the video learning section, you can find several filters designed like CTA buttons, consisting of: articles, Q&A, Reviews, and Announcements.
Article has a function to display material in written media. Users can download articles from each of these materials.
The Q&A feature has a functions to facilitate users if they have questions regarding the material presented in the learning video. Users can enter their questions in the question field provided. This feature can make it easier for other users if they have the same question. It can even provide more information than the material presented in the learning video.
In the Q&A feature, there are sub features such as filter, sort by, and search features. Its function is to make it easier for users to search for certain topics
Apart from that, there is a reply feature, this feature can make it easier for other members to contribute and answer questions in the Q&A section.
Review feature, to accommodate member responses regarding the video learning material provided. In this feature, users can also provide feedback regarding the video learning so that it can be used as a correction for RWID management.
The announcement feature is used by RWID management to provide announcements or provide additional material to the learning video.
Member Evaluation
To evaluate members in terms of web design, there are special features on the profile page.
On the profile page there is a learning progress feature. In this feature, users can find out how much progress they have made in their learning. This data comes from the number of video learning materials that have been completed.
- Overall Progress Report
There are 3 components that show overall learning progress page, namely the percentage of study, number of hours studied, and average study time. This data can be used as an evaluation of members to see their learning progress from the beginning until now.
- Total Study time in last 7 days
There is also data regarding the total study time that has been carried out each day and is displayed together with the progress of the last 7 days using a column chart.
- Total Study time in last 4 weeks
Lastly is a feature that displays learning progress over the last 1 month. This feature is displayed using a modified table such as a calendar which displays the total study hours each day. The longer the study hours, the larger the circle on that date will be, and vice versa. On the right side of the calendar table there is a column chart which is the sum of the total study hours for 1 week.
High Fidelity Prototype
Based on the mockups from several pages above, I have created a high fidelity prototype that you can open to try and experience the RWID website. To open it, you can click the link below:
RWID website prototype — Desktop
RWID website prototype — Mobile
Thank you for your time and attention to read. I really hope for feedback from all my readers. If you have it, you could convey it via the comments column and I really appreciate it.
In the next part, I will write about the test phases of the RWID web design process. see ya!
