**Disclaimer**
This project is a part of Kampus Merdeka and MyEduSolve UI/UX Independent Study program, with Sampingan as the Challenge Partner. I do not work for nor am I under a professional contract for Sampingan.
As time goes by, our needs as humans are increasingly diverse. Work is an attempt to meet these needs. One way to get a job is through the Sampingan platform. As part of the MyEduSolve Independent Study, we were challenged to create a UI redesign for mobile applications and websites the Sampingan platform with the following description:
Sampingan is here to answer the community’s need for the importance of the side jobs. One of the products from Sampingan is “Mission”. Where the user will be offered to do a job called a mission and from each mission completion the user will get money. Sampingan wants to introduce this mission as a solution to increase revenue, but many new users are not familiar and have difficulty determining what mission is suitable to take, this makes the Mission Adopt feature at a low 30%. The Product Manager (PM) wants a personalized mission that fits the user’s background.
Based on the research results, we were challenged to design a mobile application for Sampingan platform with following specifications:
· Simplication of user flow
Make it easier for users when using a product to complete a task
· Intuitive Design
Creating designs that can be easily learned by users without having to think much (cognitive load)
· UI Content Design
Organize content in UI Design making it easier for users to read and understand quickly
The goal is to create a convenient and easy way for users to access and find the right missions as additional income without feeling confused.
To complete the case study and achieve our goal, we are in group 4. The members of my group are Wafi Fadhlurrahman Saputra, Elki Tri Okta, Farah Sofiatul Nur Amanah, and Mohammad Farizd. The four of us as UI designers and UX researchers perform the following tasks:
· Develop a user experience plan
· Create design system, user flow/information architecture, and wireframes
· Create application and website user interface designs and prototypes
In this redesign case study, we used the design thinking framework as a guide and tool in the process. Design thinking is a solution-based approach to solving problems. The five stages of Design Thinking according to Hasso Plattner Institute of Design at Stanford are: Empathize, Define, Ideate, Prototype, and Test.
The first step in the design thinking process is conducting research by reviewing several application user reviews on the Google Play Store and group discussions. The goal is to know the response after using the app and find the problem.
In this second step, we conducted group discussions to find the pain points of the problems that existed during the research in the first phase.
From the pain points, we chose to determine “How-Might We” which will continue at the ideate stage, and the most vote was to highlight the “Mission” menu to make it more visible to new users and create personalized missions.
Customer problem statements are prepared to make it easier to understand customer needs through what they do and feel about existing problems and solutions.
From “How-Might We”, we started discussing and brainstorming to find as many solution ideas as possible with “How-Might We” as a reference. We try to get potential ideas that fit and can be implemented into the features in Sampingan Missions. Lots of ideas and solutions that we got was then chosen which one became the main priority to be realized.
Design System
Created a design system for the mobile application. The purpose create design system is to keep our prototype consistent. The design system regulates the color palette, typography, buttons, and input fields.
User flow/Information Architecture
The next step in the prototyping process is to create a user flow for each feature we want to implement.
Wireframe
After we finished working on the user flow, we immediately worked on the wireframe by dividing the tasks between teams. Farah, Wafi, and Zed worked on wireframes for mobile applications, while Elki and I worked on wireframes for websites.
Mobile Application and Website UI Redesign Result
After completing the wireframe stage, we immediately created a high-fidelity prototype according to the wireframe design of each page. As with wireframe creation, prototyping is divided into two, namely Zed, Wafi, and Farah for mobile applications, Elki and I for websites.
Prototype
After the entire UI Design has been completed, we continue to make prototyping to simulate our design solution before we carry out Usability Testing directly to the user. You can try the prototype below:
▶ 💻 Desktop UI Design — Kelompok 4 — Sampingan (figma.com)
▶ 📱 Mobile UI Design — Kelompok 4 — Sampingan (figma.com)
Testing and Implement
These two steps are testing the prototypes that have been made. In this independent study project, it only focuses on solving case studies to the UI redesign stage.
Read the full article here
