Fokus
Helping students structure their work with AI and decreasing their stress & anxiety over assignments
Project Overview
8 min read
UX Research
UI Design
Prototype
Wireframing
User Testing
User Journey
Requirements Specification
Fokus is an app designed as part of a group project during my studies at Chas Academy.
We designed Fokus over the course of 5 intensive weeks covering areas such as research all the way to an interactive prototype, usability testing and iteration. The project was aimed at enabling an improved study experience for students, by decreasing stress, anxiety and last-minute-strategies which is very prevalent according to the data and research gathered by us.
Our app enables users to create an account, and once signed in they can add assignments through a quick form. AI will then break down the assignments into smaller bite-sized tasks that are easily digestible for the student and is presented in its own assignment page which works as progress tracker. Fokus also provides an intuitive dashboard as the home page and a profile page for settings etc.
🔬 Stage 1 : Empathize
Research
We based our project around our hypothesis that students face increased stress and anxiety due to ineffective support and study techniques, leading to negative outcomes. The challenge isn't just cognitive impairments but common issues like concentration, procrastination, and lack of structure.
We conducted online research, reviewing studies that supported or contradicted our hypothesis, refining it based on the findings to ensure a more well-rounded understanding.
Interviews
To understand the challenges of our target group, we conducted interviews with individuals experiencing ADHD, ADD, and difficulties with focus, planning, and anxiety. These sessions revealed critical pain points and informed our approach to designing effective solutions. We also planned to involve these participants in testing our prototype later in the process.
Survey
Alongside our qualitative research, we distributed a survey to gather quantitative data. The results showed that stress and anxiety are widespread, not limited to our initial target group. This insight led us to broaden our focus, making the app accessible to more people rather than a specific group.
*Based on 100+ responses from our survey, 2024
🏗️ Stage 2 : Define
Persona
Using insights from our survey and interviews, we created a neutral persona to minimize bias and assumptions. This persona was designed to represent key user needs and guide our design decisions.
Empathy map
To deepen our understanding of the persona, we mapped out influences, actions, and behaviours to empathize with their experience. This process provided a clearer and more realistic perspective on their mindset when tackling study assignments.
User journey
With our persona and empathy map established, we created a user journey to explore their thoughts, feelings, pain points, and opportunities. This exercise deepened our understanding of their experience, particularly when facing study-related challenges.
Impact goals and KPIs
To measure the impact of our solutions, we defined four specific impact goals. Each goal was tied to relevant KPIs and accompanied by methods for tracking and evaluation.
Assumptions and risks
At this stage, we identified key assumptions about how users would interact with our app. To ensure alignment within the team, we defined these assumptions and paired each with potential risks to address them proactively.
Requirements specification
With our assumptions defined, we created a requirements specification that covered both functional and non-functional requirements. These were organized into epics to specify the areas they addressed. We then used the MoSCoW voting method to prioritize the requirements.
After sorting and prioritizing, we reviewed and adjusted requirements that needed changes, consolidation, or further breakdown. All changes were tracked in a detailed requirements spreadsheet to ensure transparency and allow us to revisit our decisions later.
User stories
With a thorough understanding of our persona and research insights, we began creating user stories. Each story included specific acceptance criteria and a definition of done to ensure clarity on when the story was successfully addressed.
These user stories evolved throughout the project, with constant revisions to maintain alignment and address emerging insights.
Example from the project:
User story - "As a student, I want to break tasks into smaller steps using AI so that I can avoid feeling overwhelmed and organize them according to the deadline."
Definition of done - User testing shows that most users can understand the task's structure and breakdown without external explanation.
🖼️ Stage 3 : Ideate
Wireframes
We began the design phase by creating a quick flowchart to map the app's overall structure and flow. This provided a clear guide as we developed wireframes to visualize the app's layout and functionality.
Mockups
With our wireframes in place, we focused on colors, typography, and overall feel to create mockups for further testing. We followed WCAG guidelines to ensure accessibility in terms of color contrast, readability, and cognitive load. To work efficiently, we divided the design of different screens among team members, then reviewed and refined them together. This process led to a solid mockup for our app’s MVP.
Usability testing
At this stage, we conducted usability tests with multiple participants from our target group to understand their experience with the prototype. The feedback highlighted both strengths and opportunities for improvement, which we analyzed and translated into actionable steps. While time constraints meant we couldn’t implement every suggestion, we prioritized the most impactful changes. Overall, the tests provided valuable insights and confirmed we were on the right track.
💻 Stage 4 : Prototype
Interactive prototype
This interactive prototype represents our final iteration within the project’s timeframe. While there are still areas for improvement, it showcases the core functionality and design of our concept.
💻 Stage 5 : Testing
Final feedback
In the final stage of testing, we conducted in-depth usability tests that provided valuable feedback on the overall user experience. These tests were designed to cover a broad range of scenarios, allowing us to understand how users interacted with various elements of the app and identify areas for improvement. We prepared 10 distinct scenarios for participants to navigate, ranging from basic tasks like logging in to more complex tasks involving GDPR, security features, and accessibility.
These tests not only focused on functionality but also on the general feel of the app, including its tonality and user interface. The feedback was rich and detailed, covering everything from user confusion with certain features to suggestions for enhancing the app's overall flow.
After analyzing the feedback, we identified key areas for improvement and came up with design solutions to address them. Whether it was simplifying complex workflows or adjusting visual cues to improve accessibility, each change was made with the user's needs in mind.
With these final tweaks in place, we were able to refine the design to create an intuitive, engaging, and accessible experience. This feedback-driven approach ensured that our app was well-aligned with both user expectations and best design practices, marking the completion of the design phase.
🔍 Stage 6 : Results & Reflections
Design decisions
We made several impactful design decisions throughout the project, one of which stands out as particularly significant. From the very beginning of our brainstorming and visualization process, we had a core idea: a "journey tracker" that would serve as a visual representation of the user's progress—essentially, a map similar to the one found in Candy Crush. We envisioned it as a fun, engaging way to show how far the user had come with their tasks.
We spent many sessions discussing this concept, designing and refining it in a wireframe-only setting. However, we consistently returned to the same question: "Is this what our users truly want and need?" When we examined the idea through an accessibility lens—one of the app's core values—it became clear that the journey tracker might not align with the app's original purpose.
The turning point came during an ethical workshop, specifically a "Dichotomy Mapping" exercise, where we critically evaluated the feature's impact. It became evident that instead of providing a positive and beneficial experience, the journey tracker could introduce more problems and frustrations for users. With this insight, we made the decision to remove the feature from our scope before entering the mockup phase. This allowed us to stay focused on the app's core objective, ensuring that we prioritized accessibility and user needs over a design element that could potentially detract from its intended function.
Final thoughts
As the last frame snaps into auto-layout, I can confidently say I’m happy with how our design process unfolded. We created an app design that went through multiple rounds of testing with users from our target audience, refining it based on valuable feedback. Collaboration was a key strength throughout the project, making the entire experience both smooth and rewarding.
Personally, I became so invested in the idea that I decided to continue exploring a spinoff concept. While it’s related to this project, it has evolved into a passion project of its own—one that I’m excited to keep developing.
