role
UI/UX Designer
Timeline
2023-2024
Skills
Visual design
Product thinking
User research
Tools
Figma
The Struggle
Tactiv ERP addresses this by consolidating essential project management features into one affordable, streamlined platform.
The Goal
Create a unified project management platform for Tactiv
To create a unified project management platform that simplifies workflows, reduces tool dependency, and enhances team communication and project tracking, all within an affordable, user-friendly interface.
Timeline
Research
User research
User story mapping
Design
PHASE 1
Information Architecture
Low -Fidelity Wireframe
PHASE 2
Design System
High-Fidelity Prototype
Development
Product Launch
Retrospective
Role
I collaborated closely with other designers to develop key screens for Tactiv ERP. My contributions included helping to design intuitive layouts and user flows, ensuring a cohesive and user-friendly interface that met the project’s goals.
Project Manager
Developer
Co-Designer
Co-Designer
Me
Phase 1
User Research
We gathered insights directly from Tactiv’s product managers, designers, and developers. Feedback from these core users helped identify pain points and essential needs, guiding the design and functionality of Tactiv ERP to better support their workflows.
Phase 1
User Story Mapping
The team gathered data to understand users' goals and pain points.
Andrew Wallace
UI/UX Designer
Age
22
Family:
Single
Location:
Davao City, Philippines
Character:
The creative
I want the ability to create tickets quickly with essential details and filter by people and projects to track progress. A dedicated attachments tab would streamline feedback access, while options to duplicate tickets and attach documents directly would save time. Notifications for updates, mentions, and reviews are crucial, as is a clear project timeline to manage deadlines and track design milestones. I’d like to pause and resume time tracking on tickets as priorities shift. Separate boards for testing and design stages, plus a tag cloud for task prioritization, would keep everything organized and efficient.
Cris dela Cruz
Backend Developer
Age:
22
Family:
Married
Location:
Davao City, Philippines
Character:
Deep thinker
As Head of Operations, I need project hours compiled monthly for efficient invoicing, customizable to project needs (e.g., rounding to quarter hours). I also need access to reports and graphs to assess team velocity and workload for fair evaluations, along with detailed EOD reports to ensure complete entries. Notifications on team leaves and absences, as well as access to a company calendar with all events and schedules, are essential to manage approvals and track employee availability.
For Management, I need a calendar view to schedule and coordinate applicant interviews, ensuring that an interviewer is available and assigned.
Brylle Vonn
Product Manager
Age:
24
Family:
Single
Location:
Davao City, Philippines
Character:
The Leader
As a Product Manager, I need seamless ticket movement from design to development, centralized access to project documents and chats, and a company calendar with notifications for events and meetings. I also require an easy way to file and track bugs per project, the ability to convert chat messages into bug reports or task tickets, and Sprint and Backlog features for efficient project planning.
Shay Aster
Head of Operations
Age:
30
Family:
Single
Location:
Davao City, Philippines
Character:
The Planner
As Head of Operations, I need project hours compiled monthly for efficient invoicing, customizable to project needs (e.g., rounding to quarter hours). I also need access to reports and graphs to assess team velocity and workload for fair evaluations, along with detailed EOD reports to ensure complete entries. Notifications on team leaves and absences, as well as access to a company calendar with all events and schedules, are essential to manage approvals and track employee availability.
For Management, I need a calendar view to schedule and coordinate applicant interviews, ensuring that an interviewer is available and assigned.
Phase 1
Information Architecture
Tactiv ERP’s Information Architecture organizes features and content into clear, intuitive sections, allowing users to navigate seamlessly between tasks, schedules, and reports. This structure minimizes navigation time, improving workflow efficiency and helping users find what they need quickly.
Legend
Pages
Phase 1
Lo-Fi Wireframes
Ticket Creation
Filterting and Sorting
File Attachment Workflow
Time Tracking
EOD Reports
Billing Report for Managers
Phase 2
Design System Co-creation
We established Tactiv ERP’s design system to ensure consistency, scalability, and efficiency across the platform. This phase involved defining key UI components, typography, color palettes, iconography, and interaction patterns. By standardizing these elements, the design system provided a cohesive look and feel, reduced design time, and enabled faster, consistent development. This foundation helped maintain brand integrity while accommodating new features, ensuring a seamless experience for users as the platform continued to evolve.
Phase 2- Design System
Colors
Primary
25
#FFF7F7
50
#FFE0E0
100
#FFC2C2
200
#FC9C9C
300
#FA7979
400
#F64B4B
BASE
500
#F10909
600
#C50303
700
#940505
800
#630505
900
#400303
Base
White
#FFFFFF
Black
#000000
Gray
#FCFCFD
Neutral
25
#F7F7F7
50
#EAEAEA
100
#E6E6E6
200
#D9D9D9
300
#BDBDBD
400
#989898
BASE
500
#676767
600
#4E4E4E
700
#373737
800
#222222
900
#141414
Positive
25
#F6FEF9
50
#ECFDF3
100
#D1FADF
200
#A6F4C5
300
#6CE9A6
400
#32D583
BASE
500
#12B76A
600
#039855
700
#027A48
800
#05603A
900
#054F31
Negative
25
#FFFBFA
50
#FEF3F2
100
#FEE4E2
200
#FECDCA
300
#FDA29B
400
#F97066
BASE
500
#F04438
600
#D92D20
700
#B42318
800
#912018
900
#7A271A
Warning
25
#FFFCF5
50
#FFFAEB
100
#FEF0C7
200
#FEDF89
300
#FEC84B
400
#FDB022
BASE
500
#F79009
600
#DC6803
700
#B54708
800
#93370D
900
#7A2E0E
Phase 2- Design System
Typography
Base Value: 16
Scale: 1.125
Headline / md
32px
2.00rem
The quick brown fox jumps over the lazy dog
Headline / sm
29px
1.813rem
The quick brown fox jumps over the lazy dog
Title / lg
26px
1.625rem
The quick brown fox jumps over the lazy dog
Title / md
23px
1.438rem
The quick brown fox jumps over the lazy dog
Title / sm
20px
1.25rem
The quick brown fox jumps over the lazy dog
Label / xl
23px
1.438rem
The quick brown fox jumps over the lazy dog
Label / lg
20px
1.25rem
The quick brown fox jumps over the lazy dog
Label / md
18px
1.125rem
The quick brown fox jumps over the lazy dog
Label / sm
16px
1.00rem
The quick brown fox jumps over the lazy dog
Label / xs
14px
0.875rem
The quick brown fox jumps over the lazy dog
Body / lg
20px
1.25rem
The quick brown fox jumps over the lazy dog
Body / md
18px
1.125rem
The quick brown fox jumps over the lazy dog
Body / sm
16px
1.00rem
The quick brown fox jumps over the lazy dog
Body / xs
14px
0.875rem
The quick brown fox jumps over the lazy dog
Caption / xs
12px
0.75rem
The quick brown fox jumps over the lazy dog
Overline
16px
1.00rem
The quick brown fox jumps over the lazy dog
Phase 2- Design System
Iconography
Phase 2- Design System
Components
Dropdowns
Input Fiields
Modals
Base Buttons
Avatar Group
Base Badges
Phase 2
Hi-Fi Wireframe
Explore More Projects
