top of page
Project Overview
Designing a landing page for a productivity tracker app with the goal of increasing user engagement and sign-ups by showcasing key features such as daily schedules, goal tracking, and achievements in an intuitive and visually appealing way.
My Contribution
End-to-end UX process, including user research, wireframing, prototyping, and final high-fidelity design implementation.
Problem Space
FocusFlow needed a landing page that clearly communicates its value proposition, highlights features, and converts visitors into app users. The challenge was to balance clean aesthetics with functionality.
Goals and Objectives
Highlight Core Features
Showcase key functionalities like task management, goal tracking, and app integrations to immediately communicate value to users.
Build Trust and Credibility
Incorporate testimonials, FAQs, and integration with well-known platforms to establish confidence in the app.
Simplify Navigation
Organize the page with clear sections and a logical flow, making it easy for users to find relevant information quickly.
Use Visual Storytelling
Leverage engaging visuals and app mockups to demonstrate the app’s features in action, helping users understand its benefits effortlessly.
Research
To create an effective landing page for FocusFlow, I started by identifying the needs of the target audience: busy professionals, students, and productivity enthusiasts. The primary challenge was to design a page that clearly communicates the app’s value while maintaining a modern, clean aesthetic to engage users.
Competitor Analysis
I analyzed successful landing pages from similar productivity and task management apps, such as Todoist, Trello, and Asana. Key takeaways included:
1
Clear Value Proposition: A bold headline that quickly explains the app’s purpose.
2
Visual Hierarchy: Structured layouts that guide users to explore features and benefits effortlessly.
3
Call-to-Action Focus: Prominent CTAs like “Get Started” or “Download Now.”
4
Social Proof: Testimonials to build trust.
_edited.jpg)
Wireframes
The wireframe served as the foundation for the FocusFlow landing page, outlining the structure, layout, and content hierarchy. By iterating on this initial design, I transformed the concept into a polished, user-centric final product. Below, you can see the evolution from the digital wireframe to the final design, showcasing how each element came to life.
Design System
Design Systems are crucial to the design process as they help achieve visual consistency, thus creating a better user experience for the end user. Before starting the high fidelity design, I first established a colour palette, as well as systems for shadows, typography, and different components of the website. This results\ed in a clean and polished end design that is easy for the user to navigate.
Typography System
I designed FocusFlow’s typography to prioritize readability, accessibility, and visual harmony. By following key UX/UI principles, I ensured it creates a seamless and engaging experience for users.
1
Consistent Hierarchy: A structured heading scale ensures clear visual distinction between text types.
2
4px Spacing Rule: Font sizes and line heights follow a 4px system for balanced spacing.
3
Accessible Contrast: Albert Sans provides consistency and flexibility with varied weights (Bold, Semi-Bold, Regular)
4
Responsive Design: Optomized for both desktop and mobile.
Colour Pallete
I designed FocusFlow’s color palette to create a modern, approachable, and visually balanced experience. The palette combines primary, neutral, and accent colors to ensure clarity, consistency, and emotional resonance throughout the landing page.
Primary Colour
Represents creativity, focus, and calmness. It’s used for CTAs, headings, and highlights to draw attention and guide user
Accent Colors
Adds subtle contrast to section dividers and backgrounds, maintaining an open and clean layout.
Neutral Colors
Provides a bright, spacious canvas that makes the content stand out.
Colour Psychology
Purple was chosen as the primary colour for its association with creativity, focus, and calmness, aligning with the app’s productivity theme. Neutral colours like White and Gray provide balance and prevent visual fatigue, keeping the design clean and professional.
Creativity
Focus
Calmness
Prototype
bottom of page