FocusFlow:
FocusFlow is a sleek and intuitive task management app designed to adapt seamlessly to your lifestyle. Built for the modern user, it combines robust customisation options with a clean, user-friendly interface, empowering individuals to take control of their productivity.
Whether you’re managing personal goals, professional projects, or daily to-dos, FocusFlow offers a flexible framework that allows users to organise their tasks their way. With features like customisable workflows, smart reminders, and seamless integration across devices, FocusFlow ensures staying on top of your priorities is effortless and stress-free.
My role: Research, prototyping, UI/UX
Link to Figma
Personas
Creative Freelancer
A freelancer juggling creative client projects, each with its own deadlines and details. They’re after a task app that’s both stylish and flexible, helping them stay organised and productive. They want to be able to tag tasks by project, set priorities to stay on top of deadlines, and attach files to keep everything in one place. Plus, they’re looking for an easy way to add team members and collaborate smoothly with clients or partners.
​
Organised Student
A student trying to stay on top of classes, activities, and personal goals. They’re looking for an app to help manage assignments, group projects, and study schedules. Custom tags would make organising tasks by subject a breeze, and they need a priority feature to tackle important deadlines first. Attaching notes or project files would be super helpful, and they also want an easy way to work with teammates on group assignments.
Process
To kick things off, I started by conducting a competitor audit. After digging through a bunch of options, I narrowed it down to three main competitors to focus on. This research gave me a solid understanding of what’s out there and what users are already familiar with.
Next, I dove into understanding customer needs. This research provided valuable insights – it helped me figure out what users want, what they struggle with, and where I could make a difference. Once I had a clear picture of the direction, I pulled together a mood board to set the overall vibe and feel for the project. With that inspiration in mind, I sketched out paper wireframes to quickly explore ideas.
After refining the designs, I mapped out the app’s architecture to ensure seamless navigation and a clear hierarchy. This involved defining the main user flows, structuring pages logically, and ensuring a smooth and intuitive user journey. Step by step, the process brought clarity, focus, and a better understanding of how to create something users would actually enjoy using.
App architecture
Lo-fi prototypes
Once the initial wireframes were in place, I moved on to creating lo-fi prototypes. These low-fidelity prototypes allowed me to turn my sketches into interactive models without getting too caught up in visual details. The goal was to focus on layout, structure, and flow to make sure the app’s functionality worked as intended.
After creating the lo-fi prototypes, I tested them with three potential users. Their feedback was crucial in identifying pain points and areas for improvement, helping me refine the user experience. Testing at this stage ensured that users could easily navigate the app and gave me insights into what needed to be adjusted before moving on to higher-fidelity designs.
Stickersheet
After gathering feedback from testing, I created sticker sheets to ensure design consistency. I defined color styles for readability and accessibility, and used a type scale for cohesive typography across headings, subheadings, and body text. I also designed components like buttons, chips, icons, and the nav bar to create a unified interface. Additionally, I developed calendar and toggle elements to enhance user interaction. This step helped streamline the design system, ensuring all elements worked seamlessly together for a user-friendly experience.
Hi-fi prototypes
With the design system in place, I moved on to creating high-fidelity prototypes. Using Figma, I added detailed visuals, refined interactions, and ensured everything was aligned with the established design system. The prototypes gave a clear representation of how the app would look and function, providing a closer experience to the final product. I also integrated dark mode, using Figma’s features to enable a smooth transition between light and dark themes. This addition improved user comfort and accessibility, giving users the flexibility to choose the mode that works best for them. The components from the sticker sheet sped up the process and ensured consistency across the design, allowing for a more streamlined and efficient workflow.
Accessibility
For this project, accessibility was a key focus. I added dark mode to give users the option to switch between light and dark themes, making the app more comfortable to use in different environments. I also paid close attention to color contrast to ensure that text and elements were easy to read in both modes. Using Figma’s tools, I checked the contrast ratios to make sure they met accessibility guidelines, so the app would be usable by everyone, including people with visual impairments. These features were designed to create a more inclusive and user-friendly experience for all users.
Conclusion & next steps
Throughout this project, I gained valuable insights into designing for both user experience and accessibility. A deeper dive into Figma’s components and auto layout features greatly improved my efficiency in designing scalable and consistent UI elements. I also learned how to create a flexible dark mode using Figma’s variables, which allowed me to easily switch between light and dark themes while maintaining design consistency.
Moving forward, the app's development will continue, with a focus on refining and expanding its features based on ongoing feedback. Usability testing will be crucial for identifying any pain points and ensuring the app stays aligned with users' needs. This iterative process will help improve both the functionality and overall user experience over time.