cogni

Conceptual mediatation app
PROJECT TYPE
UI + UX
Branding + Visual Identity
featured skills
UX research, design, and writing; copywriting; wireframing; comprehensive visual identity design
SUMMARY
cogni is a meditation app offering a fast and approachable way to improve wellbeing.
timeframe
January - February 2024
OverviewThe UserStarting the DesignUsability StudyRefinementsAccessibilityResults: AppExtensionResults: WebsiteReflection

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

1
scheduling nightmare
It's difficult to book local appointments that work with my schedule.
2
Inefficiency
There's a lack of efficiency in recordkeeping and completing paperwork before and during appointments.
3
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:
1
selection
Most users wanted a more clear indication that they chose an appointment type.
2
location
Most users wanted a more clear indication that an appointment location had been selected.

refinements

After receiving feedback from the usability study, I made some improvements and moved to higher fidelity designs.
Based on the usability study insights, I added the ‘select and schedule’ button in an effort to show more clear indication of the chosen appointment type.
I also smoothed out the date/time/location selection within the scheduler. The improved design offers sorting choices, allows collapse/expand options, clarifies user selections, and the "select and review" button verbiage assures users that they aren't yet locked in to their choices.

accessibility considerations

1
navigation
Utilised icons and enlarged buttons to make navigation easier
2
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
3
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

1
campaign elements
The brand campaign could be strengthened by building out further touchpoints, such as guerrilla marketing and social media collateral.
2
further usability testing
Formally testing the responsive web app would provide insights to its usability and accessibility.
3
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.
4
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.
OverviewEmpathise with the UserStarting the DesignUsability StudyRefinementsAccessibility ConsiderationsResultsReflection

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

1
Environmentally conscious
Users want to do their part to reduce emissions and food waste.
2
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.
3
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:
1
Accessibility
Text throughout and graph data points need to be made larger to improve visibility and clickability. I also needed to increase colour contrast.
2
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).
3
Polish Prototyping
Some of the prototype microanimations and interactions were a bit clunky.

refinements

Increasing contrast was important to improve accessibility. I also added cues to help users understand how to access additional app functions. Check out the before & after on these screens:

accessibility considerations

1
Icons and enlarged buttons improve navigation
2
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 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 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

1
Complete additional usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more market and general UI research to reconsider and improve data visualisation.
3
Determine other helpful app features via additional user research. Then, build out those features; for example, a badge rewards system.
OverviewEmpathise with the UserStarting the DesignUsability StudyRefinementsAccessibility ConsiderationsResultsReflection

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

1
accessibility
Platforms for ordering food are often ill-equipped with accessibility technologies.
2
information architecture
Digital menus are often text heavy, contain text that’s either too large or small, and are difficult to order from.
3
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:
  1. Option to add item as a favourite
  2. 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:
  1. A precise pickup window ensures that customers know exactly when their order is ready
  2. Order tracking also helps customers time their pickup accordingly
  3. 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:
1
hints on functions
Users need better cues on steps needed to use the map function
2
consider defaults
The default pickup time should remain “as soon as possible,” though future scheduled times should still be offered
3
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:
  1. The "order" button also serves as a menu, with the plus sign indicating a starting point.
  2. 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:
  1. Detailed customisations might include number of espresso shots, amount of ice, types of milk, flavoured syrup additions, and more.
  2. Users can check available options from the drop down menus.
Updates made in the final rounds of revisions:
  1. Updated colour palette, meeting WCAG standards
  2. Improved hierarchy
  3. Simplified, standardised, and clarified calls to action

accessibility considerations

1
accessible colour palette
Colours were refined to meet WCAG standards
2
screen readers
Activated Figma's function of adapting content for screen readers
3
visual cues
Product imagery and iconography support text, assisting users with limited written language skills
4
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:
1
additional usability testing
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed
2
keep researching
Conduct more user research to determine any new areas of need
3
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
OverviewAudienceTouchpointsProcess WorkReflection

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.
OverviewEmpathise with the UserStarting the DesignAccessibility ConsiderationsResultsReflection

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

1
stressed
Users need to relax and be more present.
2
busy
These users don't have a lot of time to dedicate to meditation.
3
novice meditator
Users are new to meditation and therefore potentially skeptical.

starting the design

WIREFRAME SKETCHES

ACCESSIBILITY CONSIDERATIONS

1
respect the thumb zone
Careful attention to placement of interactive elements ensures comfortable one-handed use.
2
speech and audio support
Voice to text features and screen reading compatibility support a wide range of users.
3
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

1
test usability
Complete usability studies to test whether anticipated pain points have been effectively addressed.
2
develop additional features
Other methods of meditation or social media connections could be added to the app.
OverviewEmpathise with the UserStarting the DesignAccessibility ConsiderationsResultsReflection

Overview

The Problem

  • Orient Sushi needs a way to offer a fast and easy ordering process without sacrificing quality
  • The food ordering app should reflect Orient's luxurious, minimalist, and playful brand

The Goal

  • Provide a seamless ordering process that endorses return customers

Empathise

the User

1
high socioeconimic status
Users are willing to spend money for this quality product, but also maintain awareness of cost.
2
busy
These users don't have a lot of time to spend browsing or making decisions.

Starting the Design

wireframe sketches

ACCESSIBILITY CONSIDERATIONS

1
consistent gestures
The swipe interaction is utilised in multiple functions, but no other complex gestures are required as not to confuse the user.
2
colour contrast
Colour palette meets WCAG standards.

results

REFLECTION

WHAT I LEARNED

Because the brief required a minimalist design, I was challenged to simplify the interface, though I found it a bit difficult to also incorporate a playful look/feel. The sushi illustrations offer the best of both worlds, whilst the colour palette and typography establish luxury.

NEXT STEPS

1
test usability
Complete usability studies to test whether anticipated pain points have been effectively addressed.
2
expand brand touchpoints
Design a website, menus, signage, social media and marketing material, or other collateral for a complete brand identity.
View previous project
View next project

Orient

Conceptual sushi ordering app

busy bee

Conceptual coffee ordering app
homeaboutcontact
© 2024