UI/UX Case Study — Redesigning Crowde Website
Hi everyone! This time, I’m going to share my design process of redesigning Crowde website. This project is part of UI/UX Training Program that is held by Indonesian Ministry of Communication and Informatics with Skilvul and Crowde as Challenge Partner (without any professional contract in working this case).
Duration : 10 weeks (August to October 2021)
Tool: Figma
Introduction
Crowde is a P2P lending platform that unites local farmers and investors to revolutionize the agriculture ecosystem in Indonesia.
Based on the problems experienced by Crowde, they have difficulty in getting borrowers, that is farmers, to cooperate with investors on the Crowde platform.
To maintain a balance between borrowers and investors, and also to realize Crowde’s vision to advance agriculture in Indonesia, Crowde needs improvements on its website to be able to reach more borrower users (farmers).
Objective
- Redesigning existing features to be more user-friendly
- Creating new features to increase borrower’s interest in using Crowde
- Redesigning Crowde’s user interface to be more attractive and clean
Role
In this project, I work as a UI/UX Designer together with my teammate, Rizky Herliana. Because there’s only two of us in this team, so, mostly, we work together in every step of this project from idea brainstorming to the design usability testing.
Design Process
In the process of redesigning this product, we followed the stages in the design thinking process, according to the direction and learning flow that was held for approximately 10 weeks during the training period.
A. EMPATHIZE
At this stage, we tried to understand what the target user needs based on the user research documents provided by Crowde. Based on the existing problems, known that it is difficult for farmers to find partners who not only provide business loans, but also assist and educate them to improve the quality of their business results. In addition, borrowers find it difficult to access information related to Crowde.
The following is the detailed profile of farmer users who are the borrower users of Crowde:
Gender: Man and woman
Age: 30–55 years old
Profession: Entrepreneur, Continuing parent’s business
Geographical: Rural areas, especially Subang, Bogor and Sukabumi
Behavior/Habits:
- Usually use WhatsApp and Facebook
- Level of technology understanding from low to medium
- The use of regional languages is still high
- The use of brochures and banners is still high
B. DEFINE
At this stage, we wrote down the pain points experienced by the user based on the previous empathize stage. There are two colors of sticky notes in the picture, the orange is written by my teammate, Rizky, and the green is written by myself (the name tag is all the same because I edited the text from Bahasa Indonesia to English).
Based on these pain points we collected, we generated a How-Might-We (HMW) question to focused our direction in redesigning this product. From all the question we gathered, the chosen question which we thought represents users’ problems most and supports Crowde’s expectations, is:
“How-Might-We help farmers to interested in joining Crowde as borrower users?”
C. IDEATE
In Ideate phase, we explored solutions that can answer the HMW question and then we classified them into the Affinity Diagram.
From the Affinity Diagram above, it can be seen that there are several solutions we offer, ranging from product development, improvement of existing features, to the creation of new features that we think can answer the HMW question.
SOLUTIONS
Here are the ultimate features that we offer to be implemented on the Crowde website:
📌 Progressive Web Application (PWA)
— Why PWA? Regarding farmer users’ background that is mostly based in rural areas with not very good internet signal, of course we need a technology that can allow users to stay connected to our product with a proper speed no matter how.
PWA is an app that could optimize our website performance. Sites from Niagahoster, the optimization made will not only make the website faster, but also able to provide an experience like using a mobile application. In addition, we also do not need to create a separate mobile application.
The statement also answers other problems, considering that most farmers do not have laptops, they will use mobile devices more often to communicate and find information.
It is important for us, as designers, to mind of how our users would interact with our product to maximize the experience we create.
Besides that, there are lots of other benefits of using PWA on our website. Scandiweb explains in detail about the advantages of PWA, such as instant loading time, offline browsing, push notifications, ready for app and play stores, lightweight, home-screen save, platform agnosticism, no updates required and linkability and indexing.
📌 Video
— An explanation through a video we think is more effective than in a form of descriptive text. Video does not only display a script of narration, but also explains something with actions, images, voices which can make the message conveyed easier to stimulate by anyone who sees it. The video could also shares a series of stories that might help users to stay remember.
We suggested for this video feature to be placed on the homepage to make it more accessible to users. The media for delivering information through this video can be used for complex information such as how to apply for funds. It can also be in the form of campaign information to explain new features on the website.
📌 Sundanese
— Based on the use of local languages that is still high, we consider to adding a translation feature to Sundanese (Bahasa Sunda), remember that most of the farmer users are based in rural areas in the West Java region.
The local language feature may be a minor thing, but we don’t want to overlook the issue of how our target users comfortable to communicate with. This feature also not only make it easier for users to receive information, but also makes them feel familiar to Crowde.
In the future, if Crowde reaches farmers in other areas besides West Java, maybe the other local languages can be added in the feature to suit the users’ area of origin.
Considering that Indonesia is a country with a very diverse culture, implementing local languages feature in online platform, that is rarely to find, could help preserve the languages use in the midst of technological developments.
📌 Referral Sharing
— This feature is one of the promotional media to other farmers (inviting other farmers to join Crowde). We also put gamification concept to attract users in using this feature. There will be something like seasonal reward or special reward for those with the highest point collected due to inviting other farmers to join this platform in a certain period of time.
📌 Article Sharing
— To make it easier for users to share the information, we created a sharing feature on Crowde website blog page for each article, so that important information related to farming activity can be easily spread on social media and messaging apps.
📌 Live Chat Admin
— Considering that one of the user criteria is getting used to using WhatsApp as a communication platform, we integrated the ask admin feature with WhatsApp, so that it makes it easier for users to ask questions and receive responses from the Crowde admin directly.
📌 Member Group
— We also propose a group member feature on WhatsApp as a sharing medium for farmers regarding their farming business with other farmers. Besides that, in this group, there will also be a lot of interesting information such as sharing sessions with mentors to provide education to farmers in running their farming businesses.
After finish with the solutions, we distributed them into a Prioritization Matrix to determine the number of solutions that can be prioritized to be implemented now, next, then, and finally as a future development stage based on the results of our discussion on the level of user value-effort of the ideas. We can also call this an Impact-Effort Matrix.
After determining which ideas will be implemented in this redesign project, we made user flow to map the task flow that will be run by users when using the features we created on Crowde website.
After creating the user flow, we created the wireframe after doing some sketches using the Crazy-8 method. In making the wireframe, we tend to avoid using dummy text for the content we already know what will be written there. It is also to make the wireframe more clearly and help us ease the next design process.
D. PROTOTYPE
After creating the wireframe, we created a UI Style Guide first before moving on to user interface design. We use Component tools on Figma to make the design implementation faster and more consistent.
The style guide is based on the existing brand identity of Crowde website. The change we made is mostly on the font, button and input field. We did not make a massive improvement on it because we thought the style guide is already pretty and match the segmented field.
For the colors, we decided to give a bit more touch of orange color to make the website looks fresher and warm.
We chose Rubik as our only font because the rounded shape owned by Rubik looks friendly and we want to give that impression to all Crowde users, especially for the borrower users (farmers).
For the illustration, we are not suggested to create our own from the scratch due to timing issue. While there’s difficult to find a proper illustration that suits Crowde style guide, I took the initiative to modify the existing illustrations from the free illustration stocks.
The human illustration is basically the modification of existing source that I got from Figma Community. And then, I changed the color and added supporting ornaments of illustration to make it fit with the context and Crowde’s design style.
After that, we implemented the style guide in making the user interface design. This is the main pages that we redesigned and also the new pages of added features in high-fidelity version.
Here’s the Figma link for the interactive prototype.
p.s. Honestly, this is the most complicated prototype I ever made. So, if when you try it and you find it can’t be click, I just want to let you know that I’m still working to make it linked properly ✌️
E. TEST
At this Test stage, we interviewed a respondent to determine the success rate of the website redesign that we made, and of course it can be used as a reference in the design iteration stage to improve the usability.
Because during this pandemic it is difficult for us to find respondents who fit the criteria for the age of Crowde’s target users, so we widen the age range of respondent from 18–55 years.
Our selected respondent is one of the alumni of agricultural campus in Indonesia with agricultural insights that we feel are sufficient to assess the usability level of this website.
But before that, we prepared the Stimulus Research document first to determine the tasks that will be carried out by the respondent during the test.
The following is a task list that we have prepared:
[TASK 1] Asking user to register and login to the application (stop at the Home page) and observe what respondents do.
[TASK 2] Asking user to share articles on blog pages on the Crowde website.
[TASK 3] Asking user to share the referral code on the Crowde website.
[TASK 4] Asking user to change the website language setting to Sundanese.
Based on the results of the interview, it was found that the respondent rated the usability and interface design of the redesigned product is quite good with a score of 6 of 7.
However, the respondent gave a suggestion on the registration page that it might be better if the personal data were placed in the initial order of the registration stage before entering the business details, because it is considered more common in every registration form on various websites.
Iteration Stage
Since the official task was only up to the usability test stage, I took the initiative to make a design iteration based on the suggestion given by the respondent regarding the registration page.
The above picture is two design pages that I created by placing the personal data form at the beginning. In addition, I also separated the two data input into two separate-but-related pages where there is also a progress bar, so users can find out at what stage they are in the task of filling this registration form.
Conclusion
Based on the problems experienced by Crowde, the challenge we are focused to solve is how to make farmers interested in joining Crowde.
The solutions we offer are in the form of developing existing features to provide a better experience for users, as well as formulating new ideas to make this website more user-friendly and increase the interest of farmers to join Crowde as borrower users.
With some of the new features we designed such as Video, PWA, Sundanese Language, Referral Sharing, Article Sharing, Admin Chat and Chat Member Group, are expected to help Crowde in engaging more farmer users and realizing its vision to revolutionize agriculture in Indonesia 🌱
Closing
So, that’s all my design process of redesigning Crowde’s website. As I said before, this is the most exhausting project I ever done, and it’s also feel exciting to see the result at the end. The more complicated it takes, the more valuable it felt.
Hence, I want to thank Indonesian Ministry of Communication and Informatics and Skilvul as the organizer of this excellent UI/UX Training Program. There are lots of lessons and insights I gain during the training period which I may not get at any other training program.
Also, bunch of thanks to Wikal Pratama, our class mentor, and to all my classmates of UIX 7 Project Challenge: Crowde for our togetherness in the last 10 weeks. ((Go get more pose besides formal style on the next photo session 👍😂))
