UI/UX Portofolio : Social Campaign
Capstone Project as one of the MBKM graduation requirements at Alterra Academy (Kampus Merdeka)
INTRODUCTION
Hi everybody! I am Muhammad Rifqi Muzakki, I am an undergraduate who is currently a UI/UX student participating in the MBKM (Internship and Certified Independent Study) “Becoming a Professional UI/UX Designer program” at Alterra Academy partners. This is my second portfolio in UI/UX design with big teams: UI/UX Designer team (my team), React team, Flutter team, Golang team, QA team.
OVERVIEW
Social Campaign is the theme of the project that we have to work on where we have to make an application that has the nuances of donations and volunteers as well as volunteer programs and donations, where users can donate and can also volunteer in the programs available in this application and users, providers, companies etc. . may submit a new program.
BACKGROUND
Alterra Academy (ALTA) is a career acceleration platform in the tech field that helps potential talents to become the best versions of themselves and helps Indonesian organizations to get the best talent for their organizations. Alterra Academy can also be called an Indonesian coding bootcamp that everyone, both with IT and non-IT backgrounds, can participate in to become the highest quality programmer in the industry today. Alterra Academy is collaborating with the Ministry of Education and Culture of the Republic of Indonesia as one of the partners in the Certified Independent Internship and Study Program (MSIB) as an effort to provide cross-major learning options and add experience and knowledge about work in a company.
Alterra Academy provides a space for participants to learn and innovate in the field of Software Development in accordance with current industry needs. Alterra Academy has many class choices, namely “Be The Best Top Quality Search Engineer”, “Become a Flutter Master From Zero to Hero”, “Becoming Professional UI/UX Designer”, “How to be an Ideal Top Search React JS Front -End Engineer”, “Mastering Java Spring Boot as Back-End Engineer”, and “Become a Master of Golang Programming”. One of the classes, namely Becoming Professional UI/UX Designer, is a class that is Becoming Professional UI/UX Designer, which includes individual learning about UI/UX. Participants will specifically learn about UI/UX design fundamentals, UX Research, user personas and ensure an application looks good and deploys.
The project being undertaken is one of the graduation requirements in the MBKM program, especially in the Alterra Academy partnership.
Role : UI/UX designer
Coverage : Primary/Secondary Research, Design Thinking, Affinity Diagrams & User Flow, Wireframing & Design Style Guides.
Timeline : About 2 months
Tools : Figma, Figmajam For Brainstorming, Google Forms, Zoom, Maze
DESIGN PROCESS
The design process in UI/UX involves a series of steps that are followed to create a user-centric digital product that is both visually appealing and user friendly. Here are the steps that the UI/UX team used to create this design:
METHODOLOGY
The method used in this process is a combination of primary and secondary research using a design thinking approach.
PROJECT GOALS
The aim of the project is to develop an application that can be used to create fundraisers or charities, find social volunteers and view social and environmental news.
This application will be used by customers and admins. Subscribers can donate to fundraising or charity programs while admins can manage fundraising programs, volunteer vacancies and news.
Pain Points From Customers:
How to View Available Fundraising Programs?
How To Donate To The Fundraising Program?
How To Engage Customers To Donate To A Fundraising Program?
Research Questions
We conducted 2 interviews namely:
1. As a supporter using Google Form
2. As the main data
The question is as follows:
1. What is your current job?
2. How old are you?
3. Are you male/female?
4. What do you know about campaign social applications?
5. In your opinion, is the Social Campaign application very effective and useful for the community, if so, please explain the positive impact of having the Social Campaign application?
6. In your opinion, what features make it easier to use the social compaign application so that it can attract the interest of users?
7. In your opinion, what features are ineffective in the social compaign application and should be changed?
8. Have you ever made a donation, if so, what forms of donation have you made or made?
if never write “no”
9. What made you interested in using the social compaign application as a means of making donations?
if you have never used the social campaign application write “no”
10. Have you ever/had any interest in becoming a volunteer?
11. If so, where did you volunteer?
if never write “no”
12. In your opinion, what information should be included in opening volunteer vacancies?
The main data we interviewed directly through zoom meet and everyone in the ui/ux division was divided according to the interview target for the targets, namely: 1. New students; 2. Old Student; 3. Fresh graduates; 4. High school / vocational students. The questions are still the same as the questions in the supporting data.
Design Thinking
Design thinking is a creative problem-solving process based on human needs. The principles of design thinking are widely used in everyday life to make things more comfortable to use. Design thinking can be used in user interfaces, user experience, and others. there are also those who argue that Design thinking is a human-centred approach to problem solving that is used to create innovative and effective solutions. It is a process that focuses on understanding user needs and perspectives, identifying underlying issues, and exploring and testing different solutions.
1. Empathize
The first stage is empathize, which is getting an empathic understanding of the problem that occurs and then it is solved. This stage involves approaching the customer by understanding what they really want.
a. Primary Research
Primary research refers to the understanding and needs of users in the application that we will make where we invite users not to get hung up on the questions we ask, but we invite users to tell stories and chat so that users can express ideas, complain about using the application to whatever they want. what users want in an application so that users feel at home and comfortable in using our application.
b. Secondary Research
We use Secondary Research for supporting needs/data to maximize the design that will be made later.
After the data is obtained, we collect it in the next phase.
2. Define
At this stage, all information obtained from the empathize stage is collected, analyzed, then synthesized to determine the core problem to be identified. This define stage is very helpful in solving existing problems, because the problem has been determined, in this define phase we collect primary research information in the form of User Personas.
a. User Personas
The goal of creating user personas is to better understand the use of a product or service. We also use this to inform our design decisions, considering how personas will use the product or service, what features and functions users will have, and how they will interact with the interface.
3. Ideate
Ideate stage is the stage of generating ideas. All ideas will be accommodated to solve the problems that have been defined at the define stage. After that, investigation and testing of ideas is carried out to find the best way to solve the problem or provide the necessary elements to avoid problems that could occur.
a. Solution Idea
Solution ideas involve understanding the needs and preferences of target users, creating designs that address their concerns and provide a seamless user experience. In this case we provide space for each division (FrontEnd, BackEnd, and QE) to express any ideas that are in accordance with user statements that we have collected in the Emphatize section.
b. Affinity Diagram
After the ideas have been collected, we proceed to the next stage, namely the affinity diagram.
Affinity diagrams are a tool used in design and UX thinking to organize and categorize ideas, information or data. This allows us to look at the big picture and identify any opportunities or pain points in the user journey.
c. Priority Section Idea
Then for the next stage, namely priority ideas that look forward to facilitating the ui/ux division in making effective designs.
The idea of Priority is an important aspect because it helps create an easy-to-use, intuitive and effective interface. To prioritize design elements for this step, we use a simple priority matrix (High/Low Impact, High/Low Effort).
d. User Flow
and for the next stage we create user flow where User flow refers to the path that users take to achieve certain goals or complete tasks in digital products or websites. This involves mapping out the steps a user will take from start to finish, and identifying potential roadblocks or barriers that could hinder their progress.
e. Wireframes
Once the user flows are created we move on to the next stage which is the creation of Wireframes that match the user flows where Wireframes are the basic visual representation of the interface of a website, application or software. we use Mid-Fidelity Design for wireframes because they typically involve a more detailed representation of product layout, structure, and functionality than low fidelity designs but with less detail and visual polish than high fidelity designs.
f. Style Guide
A design style guide is a set of guidelines that provide direction and consistency for design elements, including typography, color scheme, layout, iconography, and interactions.
in this case we use a color that matches the color of the logo and we match the icon to what the FrontEnd team has provided to make it easier for the FrontEnd team, as well as the grid layout we adjust to Google standards.
g. High Fidelity Design
High Fidelity Design refers to the process of creating digital products that have a high level of detail, accuracy and realism. This design process usually involves several rounds of feedback and revisions to refine the design to meet user requirements.
and for this define stage we divide the tasks for each person so as not to burden one party but still after each work is finished we always hold a discussion so that there is no miscommunication.
4. Prototype
After High Fidelity was made, we proceeded to the prototype stage to make it easier for users and programmers to see the flow of the designs we had made. Where Prototype is the initial version or mockup of a product or application that is used to test and refine the design. Prototypes can be created using a variety of methods and tools, such as pen and paper sketches, digital wireframes, or interactive mockups.
Hand-Off Dokumen
Hand-Off Dokumen Submission Documents are used as supporting documents for development to make it easier for devs to find assets, layouts and so on.
WHAT I LEARNED
During the Capstone Project process, I took a lot of lessons from the initial design to the prototyping stage, it was very tiring and exciting, we can exchange ideas with each other and solve problems together with the UI/UX division, not only from that, we too must always discuss with other divisions both from FrontEnd, BackEnd and QE, moreover we have to adapt the design to the team’s capabilities so that there are always revisions in each design that are impossible to build.
I realize that there is still much to be improved from this case study, so I really appreciate any constructive criticism and suggestions from all of you who have taken the time to read this article.
Thank you in advance!