Role: UI/UX Designer
A Document Builder Web App designed to improve users' job market competitiveness by helping them create professional, tailored resumes and cover letters.
Tools: Figma, Figjam, ClickUp
Industry: Career Tech, Job Application Tools
Duration: February 2025 - Present
ResuMe
UserResearch
Career Tech
InterfaceDesign
UserTesting
About
What is the ResuMe App?
This is a Career Tech web application designed to help users build and refine their professional image through intuitive, editable resume and cover letter templates.
The platform offers a guided, error-proof editing experience, making it easy for anyone to create polished application documents.
It is supported by AI features that review the user’s input and suggest real-time improvements, ensuring clarity, tone, and professionalism.
The product is tailored for a general audience, prioritizing accessibility, confidence, and usability at every step of the job application journey.
Design Process
What steps did I take?
Led end-to-end project development, from strategic planning to design delivery.
How might we help people of all ages and tech experience efficiently and confidently build job application documents to enhance their chances in the job market?
Problem
Many individuals struggle with the job application journey, often feeling lost and confused while creating professional resumes and cover letters. In the absence of clear guidance and structure, they find it difficult to present themselves effectively in the job market.
Solution
My goal is to build a cohersive, efficient and professional experience that ensures clarity of information, constructive feedback and relevant guidance throughout the process of preparing documents for the job application.
1
Research & Comparison
Most applied features
A personalized welcome section that combines quick-start functionality with a clear call-to-action for exploring premium features.
A collapsible document preview section that prioritizes efficiency by showing recent items with the option to expand and view the full list."
Most applied features
The Dashboard Page
Most applied features
Product Catalog Page &Product Listing Page
Enlarged full preview of template - An interactive design that enables users to explore content in greater detail through features such as zooming, scrolling, and focused inspection.
Descriptive tags and filters - Provide quick context and improve navigation.
Profile Buliding and AI features
A personalized welcome section that combines quick-start functionality with a clear call-to-action for exploring premium features.
A collapsible document preview section that prioritizes efficiency by showing recent items with the option to expand and view the full list."
2
User Flow
I designed a simple user flow that outlined the main pages and actions in a logical, intuitive order. This served as a foundation for creating an efficient user experience, which gradually evolved in complexity as the design and functionality developed.
3
Wireframes
Easy access to various templates within our app through filters, wile visualizing your pre-purchased items
Templates Page
Easy access to various templates within our app through filters, wile visualizing your pre-purchased items
Documents/ Dashboard
Easy access to various templates within our app through filters, wile visualizing your pre-purchased items
Profile Page
Easy access to various templates within our app through filters, wile visualizing your pre-purchased items
AI-Supported Document Builder Page
To address this, I relocated the right-hand section and restructured it so that each part stores saved information within collapsible dropdowns. When users need to add or edit information, a dedicated pop-up appears with clearly defined input fields tailored to the specific data type.
In the updated version, templates that have already been purchased are simply marked with a tag, creating a cleaner and more streamlined interface.
In the improved version, editing is handled through a pop-up modal that appears when the user clicks "Edit" or "Add." This allows for a cleaner, distraction-free experience by isolating the input process from the rest of the page, improving clarity and usability.
Initial Testing and Iterations
The design was confusing, particularly due to the information sections on the right, which lacked clear guidance on how to interact with or fill them out. This negatively impacted the overall user experience.
In the first version, the layout felt crowded and visually overwhelming due to the amount of information displayed at once. The welcome banner was redundant, repeating content already available on both the main dashboard and document creation pages. Additionally, the dedicated "Your Templates" section was unnecessary
In the first version, users could edit or add information directly within the dropdown sections. While functional, this approach cluttered the interface and made it harder to maintain focus, as the edits interfered with the surrounding content on the page.
4
High Fidelity Design
Web Version
Interactivity
Style Guide
Typography
Colour Palette
Final Thoughts
My Learnings
Enhancing my communication skills:
Developed the confidence to initiate and lead meetings, in which I clearly present my design developments and further discuss project expansions.
Improving My Time and Project Management:
Experimenting with the SCRUM weekly cycles to organize and plan my workflow simultaneously with the client. This method offered transparency and helped me build awareness of priorities following the client’s needs.
