4-Person Group Project
Skills:
Conceptualization, Prototyping, User Research, Programming, Graphic Design
Tools:
Adobe Photoshop, Illustrator, Indesign, Arduino, Premium
Duration:
2015.02 - 2015.06
Have you ever had that situation; you’re watching a movie in the living room with the light dimmed. Suddenly, your roommate walks in and turns the light bright because he needs to study. Wouldn’t it be great if everybody in the room would be able to adjust the light matching their own preferences?
Systema Luz is the solution. Each light in the room can be individually controlled and set by turning the rings. You have the option to choose up to 4 settings at a time. Each light can then be easily controlled and set to your preferred setting. You can even make your own light groups to allow for easy setting switching. This product allows everybody to have maximum control over the lights in a room.
Systema Luz. Give it a spin and turn the lights around!
My Role
I was responsible to design the interface, design system and interaction mechanism of the tool. I first needed to communicate requirements from Data & Marketing Team, to understand their usage needs. Later, communicating with front-end developers to implement the tool into part of the FF.ai service portal.
Clients
Fastforward.ai
Project Type
Dashboard Design, UI/UX Design, SaaS
Duration
Jan 2022 - Mar 2022
Team
Individual Designer, Data & Marketing Team
Tools
Figma
The Challenge
It was a new project in FF.ai, most of the design components needed to be defined for this Facebook automation tool. A new design system was required as well to set up the tool. Therefore, I needed to research on competitors and understand the requirements from the team. I also needed to continuously communicate with developers, there were things they can do and they cannot do. Or if it requires too much effort to develop a certain function, we sit together to find the best way to realize it, whether using an existing library or prioritize crucial functions.
The Process
Aim of the Tool
Facebook automation tool is designed to automatically manage the tedious maintenance of client brand’s Facebook page more efficiently. It aimed to automate the ad management routine so we can focus on reaching results, faster.
The Initiator
Before having the tool, the Marketing team needed to manually adjust the settings in Facebook Ad Manager page. If we wanted to change a setting when a certain parameter was achieved, the team member needs to do it manually and instantly. There was no automation for our side, which costed valuable time and efforts of the team members.
Research
To begin with the project, I first needed to do research for the designs, this included a couple of perspectives:
Desk Research on competitors, to see how the others were designing and using similar tools.
Talk with stakeholder, in this case the users were my colleagues, I talked with all of the potential users to understand their requirements.
Talk with developers, to understand the technical limitations that we might have while developing this tool.
Atomic Design
Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:
Atoms
Molecules
Organisms
Templates
Pages
When designing a new project, I followed the atomic design methodology. To break down the elements into small atoms.
Design System
Since it was a new project in FF.ai, most of the design components needed to be defined for this Facebook automation tool. A new design system was required as well to set up the tool.
Design Flows
The design system was refined alongside the design of the holistic user experience for this tool. Flows were defined with dedicated use cases. The designs were communicated with stakeholders and developers throughout the process, and it is currently being implemented.
Some screens of the final designs:
Other Projects
User Interviews & Tests
Testing Interviews with 8 real users to evaluate the product usability for FF.ai.
Data Dashboard Redesign
Redesigned the data dashboard for Fastforward.ai to showcase data gathered from the platforms.