Webapplication design


    1. Skills: Screen flows, wireframes, rapid prototyping, usability tests
    2. Projects: Mental vitality
    3. Tools Used: Illustrator, Photoshop, Axure

    4. Website: Philips mental- health



    Help patients

    Within the Philips Mental Vitality team we create an app to help patients that suffer from depressive complaints. The app supports patients by providing them with more information for self-reflection and patients receive a personalized program to help them work on four attention areas: depressed mood, rumination, stress, and sleep.

    The app is a unique combination of a number of innovations:

    • adapts to patients needs and progress
    • is complaint-driven
    • provides stepped care: light modules if possible, intensive modules if need 
    • is data driven, takes patient and context data into account
    • well designed for user experience and usability
    • designed and developed as a medical device

    Responsible for the architecture and functionality of the iOS and android app and launching websites. I worked alongside the UX lead who focused on the experience strategy and visual design. Responsible for the UX of all major deliverables and presenting these to the client and GP, at the global presentation at the healthcare week of June 2016. Information architecture, ease of use, efficiency and effectivity, prototyping.


    feels like a conversation

    The new experience concept feels like a conversation withouth looking like one.

    • Mediate a conversation on one central screen
    • Guide people with a clear onboarding process
    • Support our service becoming a habit for people

    The app had too long routes. A better user experience: simple, efficient and effective. A new experience concept to address this feedback received from users during testing.

    Discovery phases
    User research

      We did user research by testing with users and interviewing them.

      All reports and insights were discussed with a team of researchers. There was a user researcher/MD who facilitated the meeting. Affinity maps were put together and there was instantly feedback.

      Affinity diagramming

        The process
        Affinity diagramming is a highly interactive activity that promotes healthy conversation and debate about what people believe is important and what isn't. It gives the opportunity for everyone in the room to have their voices heard and to empathise with each others pain-points and concerns.

        • 1. Briefly explain what this activity involves but not what the outcome will be.
        • 2. Ask everyone in the room for 10 minutes to brainstorm any pain points or concerns they have regarding email management and data security. This activity should be done in silence.
        • 3. Ask everyone in the room to spend 30 seconds to one minute explaining what they wrote down and then stick these post-it notes onto the wall.
        • 4. Once everyone has spoken, ask everyone to stand up and to begin sorting the cards into groups.
        • 5. When groups have been created, begin naming each group. If this becomes difficult, allow new groups to be formed or post-it notes to be moved around.
        • 6. Once groups have been labeled, go through each one and have a general conversation about what the group means and why its important.
        • 7. Give each person in the room three little stickers. In silence, ask the participants to place a sticker on any groups they felt were the most important to them. Note that you can put more than one sticker on one group.
        • 8. Call out the groups that have the most stickers and begin have another conversation as to why they believe these groups were the most important to them.

        Evolving the process to address drawing conclusions instead of testing the conclusion to be true.

        I identified a concern at step 8 when having another discussion as to why they believe the issue were the most important to them. To address this concern, I stood up to explain that only by result we could draw this one conclusion. This workshop is to end with an end hypothese but surely to test this again. The rational was that whatever solution is designed, must consider usability in the first place.


        Designing for what users want to know, do & feel

        Synthesising goals from the research served as a lens through which to consider not only what the app should do, but also how it should feel. We believed this would be the difference between delivering a good experience and a great one. Thinking about emotional design helped our client understand the importance of aesthetics and tone of voice to the experience.



        Keeping the scenarios at a high level allowed us to work fluidly and explore concepts that we could easily communicate with our team and client. They formed the backbone of our requirements, and allowed us to express these from both a functional and emotional perspective allowing for further empathy with our users.



        The Framework

        Setting the Design Direction






        Testing with users

        We worked closely with our Usability Testing Lab to help define tasks, establish objectives and evaluate the app.

        To ensure the test was realistic, we opted to use a real build of the application. Between the times spent recovering from bugs and app crashes we were able to find usability issues related to perceived affordances, layout and search.

        The feedback was clear:

        People feel like the service is helping them, clinically. But... The navigation is "incomprehensible" and "chaotic". It is not always clear what to do next. People would prefer to give a mood "number" more frequently, and to be reminded more frequently to fill it in during the day.




        Launching websites

        Websites were build to launch the app at the health week 2016 in Eindhoven. One website for clients and one for GP's.

        Launching one pager