App + Web

The Painspace

2018 - 2019

Chronic pain is a national epidemic. For patients, the pain is persisting and can detrimentally impact their emotional health and wellbeing. 'The Painspace' is an app created to support chronic pain sufferers through this. It sends push notifications providing motivation and guidance to help users manage their pain.

Role

UX DESIGNER —

I was in charge of the functionality and visual design of the app and it's website in a 2 month engagement. This included the research, strategy, UI, producing all deliverables and presenting these to the client. I worked alongside a fellow UX designer and 4 developers.

Problem

A Silent Epidemic

In 2018, studies showed that 1 in 5 Australians within the 1.5 billion others in the world have reported to suffer from chronic pain. As chronic pain is subjective, for many patients there is no clear cause, thus there are no viable treatments - outside of recurring medical intervention and long-term pain management. The pain is persisting and could cause detrimental impacts to the patient's lifestyle and mental health.

Vision

Support In Push Notifications

The clients came to us in the Sydney Random Hacks of Kindness, with a vision to help chronic pain sufferers by creating 'The Painspace', an app that sends regular push notifications providing advice, motivation and support.
 

Their vision was based on multiple clinical research trials that showed the efficacy of text messaging, to positively change health related behaviours for medical conditions and chronic diseases.

Challenge

A Working App In 2 Days

The clients wanted to have the app ready to launch by the end of the 2 day hackathon. With time as a precious resource, it was crucial to start defining what features we would be focusing on and map out a project plan for the hackathon weekend.

How might we help chronic pain sufferers become CEO of their pain?

AFFINITY MAPPING —

We brainstormed potential additions to the app - including community forums, meditation apps, an app website.

PERSONA —

With the client's help, we also developed a persona of a chronic pain sufferer so we could empathise with their mindset and needs. 

MINIMUM VIABLE PRODUCT (MVP) —

With the persona in mind and feasibility as priority, we narrowed down the features into a set of requirements. The MVP was to simply have the app completed by the end of the 2 days.

App Development

Simplifying Flow, Increasing Usability
EXISTING APP FLOW —

​After examining the client's existing prototype of the app, I brought to their attention that the flow they had in mind was confusing for a new user. Our priority was on quality over quantity - define the app flow and improve it's usability.

2a.png
THE GOAL: SIMPLIFY —

The app was to have one basic function - as the user's inbox for past push notifications sent to them.

USER JOURNEY + USER FLOW —

We mapped out the end-to-end journey of the user to access the app, whether from social media, or a potential website.

APP SCREEN FLOW —

The sign-up and app information screens were moved to the backlog to focus on the developing the MVP.

IMPROVED APP FLOW —

I re-designed the UI of the app on Adobe XD and handed over the prototyping to the other UX designer to demonstrate the new flow to our developers.

2e.png
MESSAGE FREQUENCY —

Though our original goal was to give users full control of the message frequency, the developers highlighted that it was not feasible in the limited time frame. For the simplest and most effective method, I suggested minimising it to a set 4 messages per week (as research showed).

Website Development

Creating The Website

With the app decisions finalised and prototype almost complete, we had time to revisit our backlog and decided upon adding a website to provide users more accessibility and additional information about the app. I took charge of creating the website from their existing website draft, while the other UX designer focused on coordinating the app design with the developers. 
 

The existing website's pages lacked readability. I began by organising the content and planning the information hierarchy of the new website.

WEBSITE VISUAL PRECEDENTS —

The clients presented to me website precedents to use as reference for a monochromatic and minimal aesthetic. For the website's background, they asked me to similarly create a montage of the landscape with a face, which I managed to create on Photoshop.

WIX WEBSITE HOSTING —

A member of our team suggested using the word press template of one of the precedent's website, but there was a technical glitch. With less than a few hours left, we opted to use Wix as a quick solution to host the website. I took charge of delivering all the website elements to our marketing lead to put together, following my website structure and the precedent's design. Our priority was to create a draft for the final presentation, to demonstrate how the website worked and could accompany the app.

The Hack Results

A Launch-Ready App + A Draft Website
NEW WEBSITE DRAFT —
APP PROTOTYPE —

​The app was completed, but we ran into some technical difficulties during the final presentation - an issue with the transitioning of the introduction screens. Instead of a finger tap, the test build was coded to have timed transitions. It unfortunately occurred from a miscommunication between the design and development teams, and could have been avoided with more constant catchups.

Prototype: https://invis.io/KMS0YGXNCDG

Post-Hack Reflections

Finished, But Still More To Do
REFLECTIONS —

Even though the hackathon had officially ended, as a team, we all felt like there was a lot more we could do to really deliver for The Painspace. Both the app & website needed a lot more refinement before completely handing off to our client so we agreed to arrange a follow up meeting.
 

Nonetheless, there was a huge improvement in the flows and simplicity of both the app and website.  I was happy we were able to deliver a launch-ready app to the clients who were very pleased with the final outcome, saying that it exceeded their expectations!

THE FIRST USER TESTING —

Our clients went to showcase the app to Chronic Pain Australia, 3 hospital clinics, and sat on the board of the National Pain Strategy to gauge effectiveness of the app. This was the first time we managed to get any feedback from users. Patients were onboard with the idea and it seemed like we were on the right track with the messaging efficacy.
 

With the design portion of the app given the thumbs up, we delegated the rest of the app development to our developers to manage (back-end, data management.

Research

Re-Focusing On The User

We agreed with the clients to push out a few more wireframes of the website to review first. However, as I placed all their content on the website, I was worried that it didn't cater to the users we had in mind.

ISSUES WITH READIBILITY —

A sketch of the website flow that needed to fit all the content already indicated a large number of pages needed.

Even though we had add-on pages for the additional content, it was evident that the pages were too content-heavy and lengthy. Users would find it exhausting to read.

USABILITY TEST FINDINGS —

As we were not limited by the hackathon's time constraints anymore, we decided to backtrack to the user research. We went out to do some user testing on the website prototype we made based on the client's need - containing their full content. What we found:
 

• Users thought there was too much text. Being confronted by walls of text would deter them from downloading the app.
• Users found a lot of the content irrelevant and repetitive.
• Users wanted effortless accessibility, and straight forward information.
• Users wanted more information about the app.

EMPATHY MAP —

Based on the feedback, there was a lot of room for improvement. We re-visited the persona formed during the Hackathon and collated it with the usability test findings to create an empathy map to get a deeper understanding into the user's needs, and how to tackle them.

4d.png
COMPETITIVE ANALYSIS —

With this in mind, we conducted a deeper dive into how other businesses were using their websites to launch their respective apps. There was a heavy emphasis on minimal content - with a focus on how the app benefited the user.

www.quitnow.com - a focus generally on the "Download App" feature - the main purpose of the website.

www.whatsapp.com - also focused on downloading the product, with only a very brief informative descriptions.

Iterations

Re-Designing For The User

From that, we created two versions of the website to show the client:

5a.png

Final Prototypes

Website Design Decisions

Evident from the empathy map, users wanted better understanding of the app and how it benefited them. Upon discussion with the clients, we agreed to a final design to be more app focused:
 

• Making the home page app-focused, instead of the original idea of using the home-page sections as summaries of the other pages. 
• Refining the content to be more direct to the app and how it benefited the user.
• Adding the research and statistics from the client's Hackathon pitch to help reinforce their vision and credibility for the user.

Sketches planning the new website structure

To the client's request, I also created more montages of faces overlayed with landscapes for the additional website pages. They also wanted to keep a flat, monotone aesthetic. We compiled everything on Adobe XD and created an additional mobile version, before placing it on Wix.

6b.png
DESKTOP VERSION —
6c.png
MOBILE VERSION —

​There were restrictions with the mobile view on Wix and we couldn't deliver the mobile catered version of the design. Instead, it had to be the web version shrunk down to mobile size.
 

However, here's a functioning prototype of the mobile version design!: https://invis.io/JQSHMKNGUB5

UI Redesign

Revisited App & Website UI Design

As the products were released, I decided to revisit the final UI designs of both the app and website and redesign them to be more user-based. The design decisions were based on the previous user testing, personas, and empathy map.

APP —

Before

After

Home / Landing Screen

• UI theme changed to more uplifting, clean, minimal - emphasizing the calming motive of app.

• Filters - Give increased accessibility to user's preferences.

• Simplified screens - Inbox acts as home screen, with a similar UI to common email apps.

• Less commonly accessed screens (Important Info) placed into Settings.

Messages Screen

• Increased visual aesthetics by including illustrated full-screen overlay upon opening the message.

App Prototype

7dd2.png
WEBSITE —

Before

7e.png

After

7f.png

Home / Landing Page

• Changed UI from monotone to more uplifting colours to reflect a calming mood.

Mobile Website Prototype

7ff.png

Reflections

Balancing Value & Feasibility

​I found 'The Painspace' an eye-opening experience, being my first time working on such an extensive project. Even though we had clear goals, the hackathon did present major challenges from the outset, limiting time and resources. Having the time to correctly research and empathise with user needs and having a long-term development team to manage technical pivots, would have allowed for a more user centric solution. As a UX designer, it was challenging compromising some of these out of necessity, while also balancing the interests of the clients and user demands.
 

I really enjoyed this learning experience, having the opportunity to lead and manage major design decisions in UX and web/app design, while upskilling in areas of communication. It was also a great pleasure working with a talented team with such varied skillsets, and be able to fulfill our client's vision to support a great cause. I was able to deliver what could be a life-changing solution to someone in need.

The Painspace RHOK team

Like what you see?

I’m currently open to full-time work opportunities. For work enquiries, feedback, dog memes, or just about anything, shoot me a message!

© Danni Hu 2019

HOME LOGO.png