our work: Qwell - online mental health counselling medical user experience / ux design case study

joint development and design of an online adult mental health counselling website application front and backend

we're delighted with our work and partnership with Keepitusable.
to design and jointly develop the frontend user experience / UX for an online adult counselling platform.
to design and jointly develop the associated backend for managers and counsellors encompassing simple processes and high ease of use.
Xenzone have a successful online counselling product for young people and they wanted to expand and create a separate product for adults.
Xenzone recognized the benefit of a quality and simple user experience / UX and the huge impact it can have on the success of software to give them a competitive advantage. Xenzone were also looking for a design team that could integrate with their experienced development team. for these reasons, they contacted keepitusable rather than a traditional design agency. It was incredibly important that their bespoke frontend software had a great user experience / UX as people may be suffering from issues such as mental illness or depression and as such may be more easily frustrated and error prone.
the backend of the software was to be used by all Xenzone staff, from managers to counsellors. users may range greatly in technical ability so ease of use for the backend was just as important as the frontend to minimise training costs and increase the efficiency of the counselling.
what we did
we worked directly with management, the development team and counsellors throughout the design of Qwell. the starting point was:
- understanding the process, steps and requirements for the patient.
- brainstorming with the team what content Qwell should have and whether anything could be reused from their current product
- keeping features to a minimum to aid the simplicity. the timescales were ambitious allowing keepitusable to focus on the most important features for the initial release.
how we did it (process)
design phase
Xenzone delivered a well documented flow of the patient process that we would follow.
- using this flow we could clearly map pages and steps that would be required in order to fulfill the online experience.
- for each page, we sketched many alternative user focussed layouts and designs in an iterative process until we reached final layout structures that would fulfill the requirements. we focus on simplicity and usability at each and every step of the design flow.
- these layout structures were then translated into visual design sketches / interactive mockups and flows that were presented to the Xenzone management and developent team for their approval.
- the input from Xenzone was used to further iterate the sketches.
- once the design sketches were approved, we would move into the detailed design phase with the preparation of pixel perfect layout visual designs.
- specifications took the form of flow diagrams and documentation describing each of the steps and the error states / validation.
development phase
- the detailed visual designs were translated into pixel perfect html layouts and stylesheets. a template was constructed for the common page elements including the background, navigation bar and footer.
- all of the flow steps and error states / validation were built into layers within the pages.
- the code was bundled together with the documentation and page visualisations and handed over to the Xenzone development team to integrate into their backend system and database.
we worked very closely with the Xenzone development team via remote work, communicating over skype and email. the front end deliveries and documentation were stored on dropbox.
- as pages were constructed, we would test the behaviour on a variety of platforms and browsers and pass feedback to the development team to iron out any issues.
some example pages
Qwell pre-chat frontend:
before a patient can chat to a counsellor they have to go through an assessment process to determine if they are suitable for counselling. we simplified this process in the user’s eyes into 3 simple steps, ensuring it is clear to see which step they are up to and which steps still are to come.
Qwell chat view frontend:
the chat view is super simple for both users of the frontend and counsellors using the backend. both designs are clear and uncluttered with a chat area on the left and document sharing area on the right. to share a document, the counsellor simply drags it into the panel above where it will then appear in the frontend view
Qwell appointment view frontend:
when a user has a forthcoming appointment, it is given the highest priority on the Welcome page. there is a link to cancel the appointment and an advisory message to encourage the user to cancel the appointment in good time if they can’t make it as missed appointments can be a big drain on the company’s time and money.
Qwell magazine view frontend:
Qwell counselling

Qwellcounselling.com is now nationally available
within the NHS.