Fonten – A UX Journey
Background and problem:
The Fountain houses in Norway offers individuals who struggle with their mental health a low-threshold solution. This has helped many self-isolate less, socialize more, become more confident, and recover at their own pace. This is done through meaningful work and activities, that both employees and members (medarbeidere og medlemmer) collaborate on. But, they struggle with keeping up the engagement, and encourage the members to participate more at the house. Through Fontén, I want to make this process easier and more fun for all inhabitants at all Fountain Houses in Norway.
Scope & UX Objectives
- Identify needs and pain pointD
- Define the problem & users
- Ideate and plan the solution
- Usability test the first & second prototypes
- Create a Design system & a High Fidelity prototype after first iterations
Roles & Tools
- Project duration:10 weeks+
- Roles: UX Researcher, Workshop Facilitator, Visual Designer, UI Designer
- Tools: G Suite, Figma/FigJam, Useberry
My hypothesis
Traditional tools, like whiteboards and suggestion boxes alone, are often inefficient to manage projects and good communication- leading to low participation.
Design Thinking Methodology
For this project, I used Design Thinking to plan the project steps. This is often a non-linear and iterative process, that can start at different points in its 6 steps. I started at the first stage, since I needed to to generative research. The method is broken down into 6 parts: Empathize, Define, ideate, prototype, test & implement. Since this is still continuous project that will require more testing in the future, only the first five were used in the project.
Empathize & Define
I used generative research to identify members’ and employees’ pain points and needs using qualitative and quantitative methods (Literature Review, Competitive Analysis, and interviews).
Primary & Secondary Research
The Secondary Research, Literature Review & Competitive Analysis, showed that outdated tools hinder collaboration, indicating a need for a simple, scalable scheduling tool from studying the Asana, Trello, and Discord apps. The primary research, Interviews confirmed users want an easy way to manage their activities and access the house schedules.
Data Analysis
Affinity Mapping helped me Synthesize over 200 facts into 25 themes and five profound insights. Summarized though…
- … Shows that a digital scheduling tool would improve coordination and engagement.
- …Shows that integrating digital tools like calendars and sign-up systems would reduce clutter.
- …Shows that a collaborative environment, driven by shared interests, would enhance inclusivity.
Problem statement:
“Members and employees struggle with managing household tasks and projects with the fragmented tools (whiteboards, Facebook, SMS), leading to missed tasks and members feeling demotivated. A streamlined digital solution could improve overall house management and in-house collaboration- fostering a more connected environment.”
Empathy Mapping
I created two personas: Gunnar the member, and Sandra the employee, by empathy mapping the interview quotes and transcripts. Their journeys are meant to highlight a holistic collaboration, and emphasize their shared goal of community and inclusion.
Member – Gunnar Berg
“I want to stay active and connected, but the outdated tools frustrate me. A digital tool would help me feel more involved.”
Employee – Sandra Nordre
“I strive to support everyone, but low participation is challenging. Still, collaboration keeps me motivated.”
Ideate & Plan
Ideation Workshop
An ideation workshop was help at the Fountain House in Harstad, that involved two members and one employee. We ideated on three key how might we questions:
-
How might we create a tool for easier task and schedule management?
-
How might we help employees see which activities interest others most?
-
How might we keep members informed and motivated to participate?
Impact Vs Effort Template – facilitator.school
Using the Diverge and Converge method, we brainstormed, and analyzed ideas with dot voting, before using Impact vs. Effort to comb through these. The top solution combined was a digital sign-up list, both meant to replace and suppliment the whiteboard to help streamline the overall management, and boost both members and employees engagement.
This was then sketched, where the top aspects were voted on. The sketches were then refined using Don Norman’s Emotional Design principles:
- Visceral: Clean UI
- Behavioral: Easy sign-up feature
- Reflective: Simplified task sign-ups to increase participation
Vision Statement…
“The Fountain House app, Fontén, will help members and employees stay more organized by simplifying managing tasks and activities by basing the latter on their interests.
It will offer personalized suggestions and progress tracking for household tasks, keeping members informed and engaged whilst reducing the risk of members self-isolating. The app will also streamline the activity signup process- improving the engagement at all Fountain Houses.”
Features were prioritized using the MoSCoW method and further outlined with a requirement document. Key features included:
- Real-time task tracking
- Personalized activity suggestions
- Analytics dashboard for employees
- Progress tracker for members
Information Architecture
The app’s Information Architecture was designed for scalability and easy navigation. This was done by keeping in mind Matt Holla´s 8 principles of Information Architecture. I also designed with both the primary and secondary user group in mind, since use most of the same features with some difference. The one below has been edited after changes done after later test-iterations.
User- and Task-Flows
User and task flows were created based on the personas’ (Gunnar and Sandra) personal tasks, showing tailored experiences for both members and employees. During the prototyping stage, these were turned into digital Wireflows in Figma.
Usability Testing
Different Phases
Due to time constraints, I focused on the primary user group: members. Most features tested will be used by them.
Testing Phase 1: Tested onboarding and key features (sign-ups for tasks, activities, and lunch).
Testing Phase 2: Re-test of the lowest-scoring tasks from phase one and scheduling features.
The tool of choice for the remote test was UseBerry. This one let me easily see the KPI data, and review the steps participants took to finish their tasks.
Data Synthetization
I collected all of my findings and facts in seperate spread-sheets, based on its purpose (Metrics, observation, quotes). I syntethised these, put them in a facts sheet, and Affinity mapped them to synthesize and analyze each one of them in FigJam. I ended up with over 10+ themes and 5-6 insights from each test, which were ultimately bottled down to three key findings for each.
Testing Constraints
The remote tests revealed usability issues and that users often got stuck. Therefore, I plan to prioritize in-person testing in the future. However, this method did give me better insight into how users achieve their goals unaided. I also noticed some language constraints, leading me to run the second test in Norwegian with simplified tasks.
Recruitment
I selected up to 5-6 participants from the local Fountain House using these criteria:
- Member for 6+ months
- Participates in activities
- Has Phone or Desktop access
- Matches personas age (25-38)
Method
The guerrilla approach allowed for quick participant testing within an hour. And although one of them didnt do the test for phase one, the other five gave me enough findings to turn into key insights.
Source: iconfinder.com
1st test – Bugs & Key Findings
-
The bottom navigation was preffered but cluttered.
-
Visual cues are good, but unclear labels causes confusion.
-
Unclear instructions, language issues, and interface bugs disrupted the basic tasks.
Key Improvemets needed: Refine the navigation, simplify the tasks for the next test, and combine the two persona-based prototypes.
2nd test – Bugs & Key Findings
-
Lack of in-app guidance led to confusion. An onboarding intro was needed.
-
Readability must improve, with fewer tertiary buttons, larger fonts, and better spacing.
-
Bugs and homepage card features needed to change to fit the users daily tasks more
KPI Metrics
Despite initial UI and navigation issues, the second test showed improved usability—tasks were completed faster, with fewer errors, and overall better user satisfaction.
All in all, the results pointed towards a significant improvement after iteration
-
Completion Rate: 40% → 47%
-
Completion Time: 207s → 83s
-
Error Rate: 23 errors → 12 errors
-
Satisfaction Rate: 3.2/5 → 4/5
Prototype
Different Fidelities
I created a low- to mid-fidelity wireframe prototype with a minimalist design, clear system statuses, recognizable icons, and intuitive navigation. After each test, I iterated, improved the design, and fixed bugs.
Managing 70+ frames was tough. I overcame this by creating core components for the high-fidelity prototype and using a default phone UI in the Figma prototype mode. I later found that mid-fidelity designs work better for testing.
An iterative Process
I focused primarily on fixing bugs, connecting pages, and adding smoother transitions using animations for connected pages. This is because I realized most aspects worked, but was hindered due to bugs and errors.
However, as I improved the prototype and upped the fidelity level along the way, I created something that worked better and was easier for the users, as later shown in the test results.
Digital Low-/Mid-Fidelity Wireflows
These are the low-fidelity versions of the previous User- and Task Flows. Making these made it easier for me to see which aspect needed its own page, or could be combined on the same page to lessen the steps a user would need to take. The frames here later change based on the iterations done after each testing phase.
Design Iterations
Throughout the process of creating the prototype, changes were made based on test results and the recommended changes that needed to be done.
Onboarding & Home
The onboarding system was designed to have both required and skippable screens tailored to each user group and the members’ “My Plan” kanban boards.
After both testing sessions, I replaced the checkboxes with radio buttons for single-option answers, added back buttons, included an app introduction, and changed the homepage cards for better and intuitive navigation.
Sign up lists
Users can access the activity, lunch, and household tasks sign-up lists from the homepage and bottom navigation. Household tasks and activities have tags and search bars for easy lookups.
Testing resulted in removing checkboxes, combining sections for a cleaner layout, facilitating homepage cards, and replacing some tertiary buttons with hyperlinks on activity pages. The navigation order was also reorganized.
Analytics overview
Only accessible via the employee profile page, the feature displays the house’s top three interests and projects, helping employees understand key focus areas.
After the two first tests, admin buttons for employee access were added, and the ability to add activity images was replaced with default ones for simplicity. This is still in testing, so future adjustments are expected.
Members “My Plan”
The “My Plan” and projects pages use a Kanban board layout (Planning, Currently Doing, Complete) accessible only to members, aligning with their existing “My Plan.
After testing, the “change goal” option was removed due to user confusion, and the circular “add new” button was modified to display its text when pressed and remain fixed while scrolling.
Projects and Schedules
Projects utilize tags and follow a Kanban layout with Planning, Currently Doing, and Complete. Schedule views include the whole house, other departments, and the user’s schedule, designed for easy recognition like other calendar apps.
A few changes were made, mainly adjusting the spacing of the hamburger menu and relocating project pages under the signup menu. The empty states were also changed to look less interactive.
Design System
When creating the High-Fidelity wireframes, I built the multipaged design system manual to enhance visuals, cohesiveness, and accessibility.
I then applied interaction design principles, WCAG POUR (Perceivable, Operable, Understandable, Robust), and the atomic design method by breaking each element into tokens.
To ensure consistency, I established design guidelines, accessibility rules (such as contrast ratios, error messages, and text criteria), and templates for future designers. I used elements Fountain House Norways already uses. This approach helped me view the design holistically, identifying what worked best together and how to improve it. I also conducted a visual audit and researched third-party requirements for the Vipps buttons.
Although I primarily used components, I realized some needed to be detached from the central system to function correctly. This wasn’t obvious during the first prototype phase, when most of the design was flat.
However, detaching components was necessary for specific interactions—especially within templates. While this made quick fixes more challenging, it was essential for proper functionality.
Final Thoughts
Challenges & Constraints
What i discovered during this process, is that working alone can both make you grow, and cause you to constrain yourself to reach your goals. I had originally wanted to test both members and employees back to back, but realized I couldn’t due to testing costs and time constraints. Doing this, did give me time to fully design a usable Design System, that can be adjusted and modified in the future.
Both of the prototypes I tested ended up having a significant of bugs. But, by doing this on my own, I learned how to more effectively and quickly combine all wireframe pages. Theres still some interactivity and animations that I wish I had included, but I realize that focusing on creating the solution and fine-tuning it is of more importance, since there are still some aspects I want to improve.
Next steps forward
- Test post 2nd iteration & iterate based on the results
- Test the employee/admin side & iterate based on the results
- Create new frames (settings, about, alerts)
- Explore cross-platform option (desktop web version)