Overview The User Starting the Design Usability Study Refinements Accessibility Results: App Extension Results: Website Reflection

Overview

The Problem

There is a huge demand for blood donation globally, which was amplified by the pandemic
In the UK, the NHS has identified the need for nearly 400 new donors a day to meet demand
The NHS also hopes to encourage more young people to start giving blood to secure future blood supply

The Goal

Establish a brand campaign with global reach to combat the blood supply deficit
Create a hub for blood donation education, registration, appointment management, and other donor information to be used in partnership with nonprofits worldwide

empathise

user research: summary

I used data from the American Red Cross and NHS on blood donation statistics, donor information, and commonly held misconceptions to gather background information.

I also audited their websites to understand what the donor process might look like and used this research to inform interview questions.

After gathering and analysing interviewee responses, I determined some common pain points regarding blood donation.

pain points

scheduling nightmare

It's difficult to book local appointments that work with my schedule.

Inefficiency

There's a lack of efficiency in recordkeeping and completing paperwork before and during appointments.

communication breakdown

I'm either totally forgetting to book repeat donations or being harassed by organisations to do so.

I used the data from user interviews to culminate two representative personas:

persona 1: ollie

says

“I don’t go out of my way to donate blood.”
“I would expect there to be plenty of blood supply should I be in the hospital in need.”

thinks

Donating blood takes a lot of time.
There is a lot of special preparation you have to do before and after donating blood.
Donating blood interrupts my schedule and routine.

does

Donated blood once in a secondary school blood drive.

feels

Uncomfortable; I’m not sure if I qualify for blood donation because I’ve recently travelled.
I would consider donating more blood if the process were easier and clear.

Ollie's bottom line:

As a busy professional who frequently travels, I want to feel prepared for donating blood so that it is an efficient experience without any surprises.

persona 2: cam

says

“I donate blood to make others healthy and have the blood they need so they can have a wonderful life ahead.”
“I might donate blood more frequently, but I forget to schedule future appointments.”

thinks

Donating blood is uncomfortable.
I should donate blood to help others the way that a blood transfusion saved my life when I was in the hospital.

does

Donates blood with some regularity.

feels

Donating blood is important.
I wish there were a way to make the process more comfortable.
I should prioritise donating blood more often.

cam's bottom line:

As a blood transfusion recipient, I want an easier way to schedule appointments so that I can make the biggest possible impact with my donations.

competitive audit

An audit of a few competitors, both direct and indirect, revealed where other campaigns succeeded or fell short.
This provided some direction for my own campaign as i analysed their brand voice and focused on the UX of their apps and websites.

starting the app design

1. ideation

I did a quick ideation exercise to try to address the gaps discovered in the competitive audit. I focused on appointment scheduling and reducing appointment time by completing paperwork beforehand. Rather than focusing on layout of an entire screen, I focused more on concepts and small pieces of the interface.

2. information architecture

Informed by the competitive audit and key features identified in the ideation phase, I developed a site map to guide my designs and prototyping. Though this was sure to change after user testing and critiques, it served as a helpful road map for included features and site navigation.

3. low fidelity wireframes

Taking the time to sketch iterations of each screen of the app ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

4. low fidelity prototype

After refining my sketches, I developed low fidelity digital wireframes and began prototyping. This would then be used for the usability study.

usability study

As part of a main user flow, users were asked to schedule a blood donation appointment.

parameters

study type

Unmoderated usability study

location

UK, remote

participants

5 participants

length

10-20 minutes

findings

After organising the results of the usability study, I deduced two key findings:

selection

Most users wanted a more clear indication that they chose an appointment type.

location

Most users wanted a more clear indication that an appointment location had been selected.

accessibility considerations

navigation

Utilised icons and enlarged buttons to make navigation easier

colour contrast

I utilised an online tool to check the colour contrast throughout my product to ensure that it meets Web Content Accessibility Guidelines (WCAG) standards

interconnectivity

The app is designed to work in tandem with device operating systems. Users can enable access to their calendar, and opt in or out for push notifications

results: the app

Try out the prototype.

extending the design

up next: a responsive website

As I tightened up the app design, I began to consider how this same product might exist on the web. If this were to truly be a product with global reach, it would need to adapt to the needs of diverse users and be suitable for use on any type of device.

wireframe sketches

The below sketches show how the home page design shifts across desktop, tablet, and mobile.

I decided to focus on the desktop site first, since my research indicated that targeted users would primarily use a desktop computer to access the web. I would later adapt my designs to be suited for tablet and mobile as well.

low fidelity digital wireframes + prototyping

Working through low fidelity digital wireframes helped to get a feel for sizing and rough prototyping.
Check out the lo-fi prototype for yourself.

results: the responsive website

Take a closer look or try booking a donation appointment in the desktop prototype.

takeaways + reflection

impact

Many users indicated that the app would be helpful, encouraging, and could make a real difference. One user said that it alleviated many pain points of the blood donation process and would likely increase their donation frequency.

what i learned

Even though the problem I was trying to tackle was a big one, diligently working through the design process and aligning with specific user needs helped me to come up with solutions that were both feasible and useful.

next steps

campaign elements

The brand campaign could be strengthened by building out further touchpoints, such as guerrilla marketing and social media collateral.

further usability testing

Formally testing the responsive web app would provide insights to its usability and accessibility.

additional features

I would like to build out more pages of the product. Perhaps there could be a rewards program, appointment automatic re-book feature, or chat bot for answering questions.

animations

Both the app and web app could be strengthened by adding navigation microanimations and animating the illustrations.

credit where credit is due

Please note that all app illustrations are made by Freepik from www.flaticon.com.

Overview Empathise with the User Starting the Design Usability Study Refinements Accessibility Considerations Results Reflection

Overview

The Problem

Food takes up more space in US landfills than anything else.
The United States discards more food than any other country in the world: nearly 40 million tons — 80 billion pounds — every year.
Food waste contributes to about 11% of the world's greenhouse gas emissions.

The Goal

Create an accessible app that allows users to minimise their food waste and create ready-to-use compost at home.

Empathise

the user

I conducted interviews to understand the users and narrow down a primary user group.

characteristics + relative insights

Environmentally conscious

Users want to do their part to reduce emissions and food waste.

Efficiency focused

Users are busy; this needs to be fast and easy. They also want usable compost as an end result. They need data about the compost to understand its best use.

High SOCIOECONOMIC STATUS

Smart compost devices are pricey; the app’s users likely maintain a high socioeconomic status.

Market Research

In addition to user interviews, conducting a competitive audit helped determine useful functions or features as well as to find gaps in the market.

research revealed key feature opportunities:

Show environmental impact: how much waste you’ve kept from landfills
Convenience with phone pairing: ability to remotely start the composting process; check progress; notifications when completed
Check maintenance of system
Data about output (amount of soil, pH, nitrogen levels) which could also graph historically to show if you’ve been eating highly acidic foods for example or to show the consistencies/inconsistencies of processed compost

starting the design

1. concept mapping

I wrote possible app functions on sticky notes, then categorised them.

2. information architecture

After my concepts were grouped, I considered the information architecture and app navigation. This informed which key screens I could build out given the small scope.

3. early sketches: ui + brand identity

As I explored possible functions of the app, I started sketching iterations of data visualisation and iconography. I was simultaneously developing the brand identity, including visual design and voice.

4. wireframing

I continued to explore brand voice, functions of the app, data visualisation, and how to meet user needs within wireframes.

5. prototyping

Based on peer and instructor feedback on my sketches, I designed necessary wireframes for my desired user flow.

I also needed to test usability before the designs were finalised, so I built a mid-fidelity prototype of the main user flow.

usability study

Users were given three small tasks to complete as part of a main user flow.

parameters

study type

Moderated usability study

location

Kansas City area, USA

participants

3 participants

length

5-15 minutes

findings

The study revealed these opportunities for improvement:

Accessibility

Text throughout and graph data points need to be made larger to improve visibility and clickability. I also needed to increase colour contrast.

Hints on Functions

Users need more cues that data points are clickable, as well as more support with understanding app functions and terminology (such as meaning of input/output).

Polish Prototyping

Some of the prototype microanimations and interactions were a bit clunky.

accessibility considerations

Icons and enlarged buttons improve navigation

Colour palette contrast checked using online accessibility testing tools

Results

key final screens

After many more rounds of revisions, I arrived at the final product: polished screens and a high-fidelity prototype in tune with user needs.

The impact feature meets one of the key user needs: feeling that they're making a difference in the environment.

The status screen meets one of the gaps in the market by tracking compost process, offering real-time updates.

The compost output screens meet another user need: information is provided to help users understand best use of the compost. For example, some plants prefer more acidic soil.

reflection

impact

The app makes users feel like they are making a difference in the environment and provides them with a usable product in the end.

what I learned

It’s challenging but rewarding to build a product based on a topic on which you’re totally uneducated; however, it also reduces bias because I was forced to conduct more research and interviews from the target audience in which I wasn’t a direct participant.

next steps

Complete additional usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more market and general UI research to reconsider and improve data visualisation.

Determine other helpful app features via additional user research. Then, build out those features; for example, a badge rewards system.

Overview Empathise with the User Starting the Design Usability Study Refinements Accessibility Considerations Results Reflection

Overview

The Problem

People with busy schedules need to minimise time spent placing a food/drink order, waiting in a queue, and picking up the order.

The Goal

Create an efficient, seamless app that allows users to order the exact products they want as quickly as possible.
Assist users in timing their pick up so that they don’t wait around and their order is still fresh and hot.

EMPATHISE

the user

I conducted interviews and created empathy maps as well as user journey maps to understand the users for whom I'm designing. This data was culminated into one persona to summarise user needs:

persona profile: miguel

Age: 38
Education: M.D.
Hometown: Manchester
Family: Married
Occupation: Pediatrician

Miguel is a Paediatrician with a busy and demanding schedule. He works unpredictable shifts in a large hospital in Manchester. Miguel wants to make himself available for his patients and is often taking appointments at the last minute. He’s often running on little sleep and needs coffee frequently and as quickly as possible to meet his schedule demands. He prefers to enjoy his free time decompressing and spending time with his partner; therefore, he’s always looking for ways to make their lives easier and more efficient. Sometimes that means ordering takeaway.

“My work is exhausting, so I need coffee and I need it now.”

goals

To be at my best so that I can provide good quality of care for patients
Quick and easy services so I can get back to what’s important, whether it’s work or my partner

FRUSTRATIONS

It’s annoying to have to dig through my wallet and type in card details to pay for something online or in app
Picking up orders is sometimes chaotic, confusing, and inefficient

competitive audit

Completing a competitive auditof both direct and indirect competitors revealed helpful features as well as common pain points to target. Users appreciate customisable options, opportunities to choose future pickup times, and safe and convenient payment options.

market research: pain points

accessibility

Platforms for ordering food are often ill-equipped with accessibility technologies.

information architecture

Digital menus are often text heavy, contain text that’s either too large or small, and are difficult to order from.

time

Working adults often don’t have time to cook or make coffee at home; they need the option to quickly get what they need on-the-go.

Based on my research, I narrowed in my focus and developed a road map for my designs.

starting the design

1. visual identity

The brand was inspired by an early design school project, so I refined my original ideas and designs to be suited for this project. See the full visual identity process development here.

2. information architecture

Based on the key features I wanted to include in the app, I organised a map to guide my designs and prototyping.

3. low fidelity wireframing

wireframe sketches

Taking the time to sketch iterations of each screen of the app ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritised a quick and easy ordering process on the home screen to help users save time.

low fidelity digital wireframes

With the intention of building a low fidelity prototype, I developed my sketches into digital wireframes so that I could begin basic user testing on key features.

As the initial design phase continued, I based screen designs on feedback and findings from the user research. Key features on this product page include:

Option to add item as a favourite
Speed customisation gives users a way to quickly have their preferences or dietary needs met

The order completion screen also meets key user needs identified in research:

A precise pickup window ensures that customers know exactly when their order is ready
Order tracking also helps customers time their pickup accordingly
Rewards system supports customer loyalty

4. Low fidelity prototype

I used Figma to build a prototype in preparation for user testing.
The primary user flow is to order a pumpkin spiced latte. Try it for yourself.

usability study

Users were asked to complete one main flow: order a pumpkin spiced latte.

parameters

study type

Unmoderated usability study

location

remote

participants

5 participants

length

5-15 minutes

findings

I developed an affinity map to organise and analyse results as well as glean actionable insights.
Areas needing improvement revealed by the study include:

hints on functions

Users need better cues on steps needed to use the map function

consider defaults

The default pickup time should remain “as soon as possible,” though future scheduled times should still be offered

menu accessibility

There should be a more obvious, intuitive way to access the full menu.

refinements

This app went through several rounds of revisions.
First, I made some adjustments according to usability study findings whilst polishing designs to a higher fidelity.

In an effort to provide a more obvious, intuitive way to access the full menu, I made some changes:

The "order" button also serves as a menu, with the plus sign indicating a starting point.
Though the home screen aims to predict what products users seek, more leisurely scrolling of the full menu is available.

Early designs allowed for speed customisation, but after the usability studies, I added additional options for further customisations:

Detailed customisations might include number of espresso shots, amount of ice, types of milk, flavoured syrup additions, and more.
Users can check available options from the drop down menus.

Updates made in the final rounds of revisions:

Updated colour palette, meeting WCAG standards
Improved hierarchy
Simplified, standardised, and clarified calls to action

accessibility considerations

accessible colour palette

Colours were refined to meet WCAG standards

screen readers

Activated Figma's function of adapting content for screen readers

visual cues

Product imagery and iconography support text, assisting users with limited written language skills

clear navigation

Consistent interface elements and gestures simplify navigation

results

high fidelity prototype

Check out the prototype for yourself. Psssst... I recommend the cold brew. 😉

takeaways + reflection

feedback

"This felt similar to other coffee shop apps I've used so it was easy and familiar. I also like the option to reorder past favourites; I personally stick to the same order."

-Kenna, Usability Study Participant

next steps

This kind of work is never really done, is it? But sometimes you have to know when to stop.
If I were to pick this back up, here's where I'd be headed:

additional usability testing

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed

keep researching

Conduct more user research to determine any new areas of need

more features

Build out additional user flows and more features of the app, such as the map feature from early iterations, a more extensive menu, future order pickup features, and an account overview

Overview Audience Touchpoints Process Work Reflection

Overview

The brief

Collaborate with a team to develop a brand's visual identity expressed in both digital and print media
Conduct market research to audit the competitive landscape and build audience empathy

brand mission statement

MOD aims to provide an edgy, energised, immersive travel experience for extroverts and nomads.

audience

key persona details

Travellers who have previously enjoyed hostel-type accommodations in other countries
Educated and cultured
Individuals seeking an immersive travel experience but prefer alternatives to a tour guide or staying in someone else’s home
Small to moderate travel budget
Likely single and/or without children, possibly working remotely with more travel flexibility

touchpoints

digital

Due to our target audience's on-the-go digital and even nomadic lifestyle, digital collateral remained the primary focus.

The website offers users simple, smooth booking capabilities with thoughtful UI/UX design.
The bold brand colour is utilised for calls to action.

MOD socials are bold and punchy, utilising an attention-grabbing brand voice for the Instagram grid.

Marketing emails feature testimonials from past travellers, highlighting positive experiences.

print, environmental, and wayfinding

While digital touchpoints were essential, there were also several other key opportunities for brand expression.

Initial research revealed that a large percentage of the target audience would reside in or be travelling to urban areas.
This ad might engage spontaneous travellers with its playful language.
It also encourages traveling with friends, which is a big part of the MOD culture.

The team considered every aspect of the brand, including how brand elements might be used for wayfinding.

process work

Of course all of the above didn't happen on our first try.
Check out more of our inspiration, the design process, and alternative solutions.

reflection

teamwork makes the dream work

It proved challenging but rewarding to build an immersive brand as a team of three. Shoutout to my talented co-creators, Taylor Schober + Jed Aldrich.
Our biggest obstacle was keeping assets updated and organised after each stage to ensure consistent, cohesive collateral.

my role

Though the work was highly collaborative, my main contributions included initial ideation and visualisation of design direction, business card iterations, physical and digital stationery, email marketing, wayfinding, and interior environmental graphics.

Overview Empathise with the User Starting the Design Accessibility Considerations Results Reflection

Overview

The Problem

Life is stressful. Many of us lead busy, hectic lives.
Whilst meditation is scientifically proven to relieve stress, it can be intimidating for newbies.
Common misconceptions lead many to believe meditation is time consuming.

The Goal

Create an intuitive app that offers users immediate stress relief.
Design a meditation tool appropriate for use anywhere, in any environment.
Offer an approachable and fast solution to improve wellbeing.

Empathise

the User

stressed

Users need to relax and be more present.

busy

These users don't have a lot of time to dedicate to meditation.

novice meditator

Users are new to meditation and therefore potentially skeptical.

starting the design

WIREFRAME SKETCHES

ACCESSIBILITY CONSIDERATIONS

respect the thumb zone

Careful attention to placement of interactive elements ensures comfortable one-handed use.

speech and audio support

Voice to text features and screen reading compatibility support a wide range of users.

colour contrast

Colour palette meets WCAG standards.

results

REFLECTION

IMPACT

A study found that 10 days of guided meditation can reduce stress by 14% and reduce irritability by 27%. Three weeks of use was shown to increase compassion by 23% and reduce aggression by 57%. In practice, this app could make a real difference in users' mental health.

WHAT I LEARNED

Because the goal of the app was to offer immediate stress relief, I had to hone in my focus and simplify the interface. This meant stripping back any unnecessary functions and limiting choices. I also learned throughout the design process that consistency with call to action elements is key.

NEXT STEPS

test usability

Complete usability studies to test whether anticipated pain points have been effectively addressed.

develop additional features

Other methods of meditation or social media connections could be added to the app.

Orient

Overview

The Problem

The Goal

empathise

user research: summary

pain points

persona 1: ollie

persona 2: cam

competitive audit

starting the app design

1. ideation

2. information architecture

3. low fidelity wireframes

4. low fidelity prototype

usability study

parameters

study type

location

participants

length

findings

refinements

accessibility considerations

results: the app

Try out the prototype.

extending the design

up next: a responsive website

results: the responsive website

takeaways + reflection

impact

what i learned

next steps

credit where credit is due

Overview

The Problem

The Goal

Empathise

the user

characteristics + relative insights

Market Research

starting the design

1. concept mapping

2. information architecture

3. early sketches: ui + brand identity

4. wireframing

5. prototyping

usability study

parameters

study type

location

participants

length

findings

refinements

accessibility considerations

Results

key final screens

reflection

impact

what I learned

next steps

Overview

The Problem

The Goal

EMPATHISE

the user

“My work is exhausting, so I need coffee and I need it now.”

competitive audit

market research: pain points

starting the design

1. visual identity

2. information architecture

3. low fidelity wireframing

4. Low fidelity prototype

usability study

parameters

study type

location

participants