Satu Persen UI/UX Portfolio

My First UI/UX Internship Projects

UI Designer, UX Designer

Freshmart

Intern Duration:
3 Months

Project Type:
Redesign

Role:
UI/UX Designer Intern

Tools:
Figma, Google Docs

Satu Persen

Satu Persen Indonesian Life School is an educational startup that teaches important knowledge and skills in life that have not been taught in schools and wider community.

My Story

This is my first journey in UI/UX, I am currently an intern as a UI/UX Designer collaborating with Product Manager, Front End Developer, and Creative Team to create icons and also some illustrations.

Project

In this portfolio, I will share 3 design results during my internship, which are redesigned webinar page, scheduling system, and pricing list.

Undraw Website

Webinar Satu Persen

Webinar in Satu Persen

Satu Persen Webinar is a direct learning activity through the Zoom platform with a reliable mentor and psychologist from Satu Persen. This webinar can help you identify and develop yourself to be better in a practical and flexible way.

The Task

Re-vamp webinar page in Satu Persen website to make well-organized information and designs that represent the brand image.

Before

Before

After

After

Why Revamp?

The layout design is less attractive which makes the information seems too long (wordy) and inefficient.

Users often miss the important information presented about the webinar on the product page.

The previous design for the details of the hero section banner is still manual (not CMS yet), so it becomes complicated to request another design even though the webinar is held every week.

Process

After observing the main problem above, I discussed with the Product Manager along with several key stakeholders from the tech team to get a solution, then I was directed directly by Product Manager regarding the things that should be changed and adjusted.

Wireframe

Wireframe

Before entering High Fidelity Design, the process I went through was to create a Wireframe design according to the layout that was discussed with the Stakeholder. I iterated multiple times after getting another feedback from my Product Manager.

Hi-Fi Design

After the LOFI design was approved by the Product Manager, I made a HIFI Design. I used the existing brand guidelines in Satu Persen which are typography, colors, buttons, and also the sizes. Here are the final designs.

Hi-Fi Design 1
Hi-Fi Design 2

Make a hero section banner that displays the speakers directly from the webinar with the CMS system, so the webinar team has no trouble while requesting designs continuously. I also create a design hierarchy according to the most important ones that will be placed at the top. After the user scrolls from the hero section, the user will find benefits, which is the most significant thing in order to let the users know what benefits will be obtained when they attend this webinar.

Hi-Fi Design 3
Hi-Fi Design 4

Under the benefit section, the user will find about what they will learn and who their target audience is; this is made separately since the problem encountered on the previous website is about the long description. In this section, I also request the creative team to make illustrations and to provide directions for colors and concept. After all is done, we will do the testing with team to avoid any issues before launching.

Select Problem (Scheduling System)

The Task

Redesigned feature ‘select problem’ on the Satu Persen website

The Problem

Users do not know that the mentor might be fully booked

Users often miss and encounter trouble when selecting problem type

Before

Before 2

After

After 2

Process

Within this process, I was briefed directly by the Product Manager to provide a category selection solution packed with illustrations, so it is easier for the user to scan the problem rather than just a written notice and also the user will be given a description of the remaining and available schedule slots.

Pilih Masalahmu
Wireframe

Wireframe

After I got the brief, I handled the task of making the UI Design, and prior to that I ensured to make a wireframe first. Then I looked up to the internet about references and also making layout from the UX side. Finally, I submitted another wireframe with only 1 screen layout in order to accelerate the user in selecting the problem. I proposed icons for categories and illustrations for problem selection with a larger proportion in the problem section. Next, I followed directions from my product manager to provide information on the remaining schedule available as well.

Wireframe
Wireframe

Icon & Illustration Design

After the wireframe I created was received by product manager, I worked together with the creative team to build the icon and illustration. I briefed them on GDocs and held an online meeting on Ms. Teams for a deeper discussion of this project. Then I arranged a deadline for them and followed up if there were any illustrations that needed to be revised.

Before 2

Hifi Design

After all icons and illustrations revised according to the problem, I put the icons and illustrations in my UI Design, then I delivered the design to the Front End Developer for deployment. After the whole things had been done, we also testt our design with the team before it was live on the Satu Percent website.

Pricing List

The Task

Redesigned Satu Persen’s Pricing List

The Problem

Many users have no idea how long the mentoring/counseling duration is

Users are overwhelmed by the description in the Pricing List

Many users missed the information

Before

Before 3

After

After 3

Process

Through the process of creating, I attended a meeting with the product manager's stakeholder along with the technology team. I was notified regarding a problem in the pricing list and they offered me a solution to build a neater and organized layout per section.

process1
process2

Wireframe

Before I built the wireframe, I had looked for some inspiration on Dribble, Pinterest, and Google to find how a neatly arranged layout specifically for this pricing list would look like. I learned some tips as well so the created pricing was accessible and usable for users. After getting some inspiration and discussion with product manager, I built a wireframe based on that discussion.

hifi2

Hi-Fi Design

After I created the HIFI Design, this process still had not finished yet. I discussed further with my product manager regarding the selection state when the user clicks on ‘select package’. After being selected, I immediately handed over to the Front End Developer to build the design and also to do testing to check the final result with the team.

Key Takeaways

I worked with a product manager and front end developer, I believed that our redesigned were successful. The design that we redesigned from exactly the user experience point of view, was better than before but certainly not the perfect one since it always has to be iterated over and over. Furthermore, I am as an intern obviously learned a lot from this project. It was such a great experience for me within these 3 months.