Smart Peak Flow
Web design & development
About Smart Peak Flow
Just as diabetics check their blood sugar levels with a monitoring device, asthmatics can keep an eye on their lung function with a peak flow meter. The device measures how much air an asthmatic can force out of his/her airways, which is an objective indicator of the state of a person’s asthma.
Smart Peak Flow have developed an innovative new product which utilises smart phone technology to measure and keep track of a person’s lunch function. The app is available for both iPhones and Android phones, and is designed to Remind, Measure, Chart and Share your peak flow data.
Watch the video
Smart Peak Flow commissioned me to design the overall digital experience for the new Smart Peak Flow product.
This included designing and developing a promotional website with eCommerce functionality, defining and documenting the digital branding guidelines to govern the look and feel of both the website and the app designs, create graphic designs for their crowdfunding campaign with KickStarter, and refine and design the product packaging.
Working closely with Thomas Antalffy – the man who invented the Smart Peak Flow device – we identified the business goals and requirements in a requirements gathering and project kickoff workshop. We discussed the aims of the app, how the crowdfunding would be key to launching the device, and how the website would be the central location to promote the product.
We worked with a lean canvas to define the key problems we would be solving, the different customer segments, their unique offering, details of their solution, and any key metrics we were working to.
With requirements defined, I began researching similar sites and apps to help make strategic design and user-experience decisions related to competitor products, functions and features, to give Smart Peak Flow the edge.
There were 8 asthma tracking apps that I found, each with their own unique selling points. Some helped you track your asthma with a device, others just reminded you to take your medication. Others even sent notifications to your doctor if you wanted to. As Smart Peak Flow was new to the market, we needed to find it’s unique selling point so it would succeed amongst competitors.
The unique selling point of Smart Peak Flow would be it’s ease of use, modern user interface design, and cross device compatibility.
To get an understanding of the potential audience that Smart Peak Flow could reach, I researched into Asthma statistics, along with smartphone usage statistics. A few of the key facts I discovered were:
“5.4 million people in the UK are currently receiving treatment for asthma: 1.1 million children (1 in 11) and 4.3 million adults (1 in 12)”
– Asthma UK
“Four out of five UK adults now have a smartphone – equivalent to 37 million people”
“It is estimated that in 2017 there will be 3.7 billion mobile health app downloads”
There is a massive audience of adults and children who suffer from Asthma in the UK who would benefit from regular tracking and monitoring of the condition. Many of these sufferers will already likely own a smartphone and be utilising the device capabilities to monitor their health.
With budgets being tight, my research into the potential types of users was used to create a set of proto design personas were created to identify user goals, current behaviour, and pain points.
Three proto-personas were created:
A 36 year old working mum of a 10 year old child who suffers from Asthma who want’s an easy way to keep a record of her son’s condition to be able to show her doctor.
A 62 year old retired lady who likes to go walking. She has developed Asthma in recent years and is currently keeping paper records for her doctor. Her son has recently heard about Smart Peak Flow and is trying to encourage Angela to use the app instead of the time consuming paper records.
A 26 year old single male who is a keen user of mobile apps to monitor his health. He is a keen runner who like to track his workouts and analyse the statistics. He’s suffered from Asthma all his life, and needs to keep a regular check on his condition.
These proto-personas were then explored further to map out their potential journeys highlighting of all the potential touch points they may come into contact with Smart Peak Flow. This helped to understand what pages would be needed within the website, and how to make the user experience of finding, downloading and using the app as seamless as possible.
IA and Site Map
Once the user journeys were defined, I then planned the information structure and navigation of the new website. I then organised the and prioritised the page hierarchy within a sitemap using Axure to ensure that no parts of the users journey would be missed.
Adopting a User-Centered Design Approach
With the IA and site structure all approved, I began planning the website design. As the user experience was at the forefront of the success of the app and device, I adopted a User-Centered Design approach to ensure the requirements of each of the user types was met with the designs.
“User-centered design (UCD) or user-driven development (UDD) is a framework of processes (not restricted to interfaces or technologies) in which usability goals, user characteristics, environment, tasks and workflow of a product, service or process are given extensive attention at each stage of the design process.”
Image credit: Colossom
Sketches and Lo-Fi Wireframing
To start with, I began sketching some ideas on paper of how the website could look, taking into account the different flows and making the user journeys as simple as possible on both desktop and mobile.
Once I had a rough idea of the layout, I used Axure to create some more refined low-fidelity wireframes which I used to present the initial web concepts to Thomas along with the branding ideas to help him visualise the end result.
Brand and logo design
In conjunction to the sketches and low-fidelity wireframes, I also worked on creating the digital and brand guidelines. This included the primary and secondary colours, fonts and logo design which would be used across all digital media, packaging, and passed on to the mobile app developer to ensure brand consistency throughout.
To keep with the goal of producing a clean and simple modern UI, I chose a selection of clean blues and greys for the primary colours, and complimented these with fresh pastel tones for the secondary colour pallet. The fonts chosen were to give strength to the headers, whilst keeping the modern look and feel, and paired up with a nice simple paragraph font which translated well on both digital and print.
The logo took a few attempts to finalise as it was hard to create an icon to immediately represent the flow of air. After trying various options, the sprialised circles were the best fit.
High-Fidelity mockups and prototypes
With the approval of the low-fidelity wireframes and the branding designs, I then worked up the high-fidelity website layouts for both desktop and mobile translating all the ideas, research, branding and concepts into workable InVision prototypes optimised for a range of devices and interfaces to build and test a fully intuitive user experience.
User feedback and iterations
Using the high-fidelity prototypes, I gathered user feedback through remote usability testing to correlate both positive and negative feedback based on the designed user experience. I then used the findings from the testing to continuously iterate and re-test the designs before moving onto the website build.
Web development and go-live
When discussions for the development of the website came about, Thomas was keen to have it built on a platform that would allow him to easily scale the functionality when the need arises, and also be able to manage the content himself. As the website was relatively small, after researching various platform options, we decided that building the site on WordPress allowed for the most amount of flexibility in the layout, along with providing a future proof solution when deciding to scale.
For the eCommerce solution, we decided on the WooCommerce plugin.
I build the custom template for the website design and set up the hosting and domain services for Thomas. The initial build of the custom layout took place within my own hosting environment, and once fully tested across commonly used browsers and devices, I set up the hosting and domain services for Thomas, transferred everything over to his server and pushed the site live.