Convene Coffee
Embedded Files
Convene is a university coffee ordering application with the main objective to provide easy ordering, serving and meet up services for targeted personas on the Birmingham City University campus. The application is accessibility focused with a design that is screen reader friendly, optimised for cognitive impairments and meeting WCAG standards. Features such as voice interaction and QR code scanning were tailored to support persona aligned requirements.
Type: MSc individual project | May - Aug 22
Input: User Research | Ideas | UX Design | Interface Design
Accessibility & Assistive Technology
Accessibility is gaining greater consideration in design of digital products but requires greater exposure and education (Baldominos et al, 2022). This rise in thinking towards accessible products should positively help to represent and improve user experience for disabled people.
The social model of disability asserts that we are disabled by the society’s barriers not by impairments or our differences. Physical barriers exist such as buildings with only access via steps or social attitude-based barriers regarding perceptions of capability. By moving towards a social model and a more inclusive society, persons with disabilities can become more independent (Oliver, 1983). The persona spectrum (Fig 2a) shows the varying degrees of impairment, by understanding and working with permanently impaired it benefits those users and others with a different degree of impairment (Microsoft, 2022).
It’s estimated that 15% of the world’s population, over 1 billion people, are disabled (WHO, 2021). Around 21% of adults in the UK (gov.uk, 2022) have at least one disability, and 75% more than one (Sport England, 2015). By not considering the requirements of disabled users 1 in every 5 people are marginalised or excluded entirely.
Designing for accessibility ensure the greatness number of people of all ability levels can use a product or service which has many benefits for creators and businesses also. W3’s Web Accessibility Initiative highlights how accessibility benefits businesses by driving innovation to solve unanticipated problems, enhancing brand image through commitment to integrated accessibility, minimise risk of legal concerns and increase market reach by catering to the over 1 billion disabled people mentioned previously (W3, 2018).
User Requirements
To understand potential users of an accessibility focused campus coffee delivery application four personas and associated scenarios were created around the following impairments – physical, visual, auditory, and cognitive
Persona and scenario details were transferred into an initial set of requirements and then MOSCOW prioritised (Clegg, 1994) based on perceived needs to ensure appropriate significance is given to features during the design phases.
Features related to personas and accessibility highlighted with yellow background
Paper Prototype
Features were designed to meet user requirements during the initial idea generation and sketching (see image). This included voice interaction and meet ups plus additional functionality such as reordering (to support memory lapses), a QR scanner (support both visual and cognitive impairments) and finding nearest locations using phone GPS.
Initial sketches were compared against the Web Content Accessibility Guidelines (W3C, 2022) ensuring personas and scenarios were as accessible as possible. Before moving to high-fidelity, a paper prototype with a simplified Information Architecture of all main pages was produced. The paper prototype helped to refine individual page layout and flow of the application.
High Fidelity Prototype
INTERFACE DESIGN
The visual design takes queues from Jakob’s 8th Heuristic “Aesthetic & Minimal Design” (Nielsen, 1994). Only essential content is displayed, and without any unnecessary distraction and must supports the user’s primary goal. Illustrations and icons are used to help communicate functionality and the services available whilst still providing visual engagement.
Material Design (Google, 2022) and iOS Human Interface Guidelines (Apple, 2022) formed a basis for the inclusive design of Convene Coffee’s high-fidelity prototype. WCAG 2.1 Success Factors underpinned several of the design decisions taken with an aim to meet AA standard as a minimum and AAA wherever possible.
The typography was selected based on the needs of the personas and font sizing aligned to WCAG 2.1 relating to large text (14pt bold / 18pt regular). Titles are 20% larger than body text at 20pt or 24pt which helps visually impaired and dyslexic users (British Dyslexia Association, 2022).
Colour selection is optimised to meet WCAG AAA standard - 1.4.6 Contrast (Enhanced) (Level AAA) (WCAG 2.1) - although still provides a desirable aesthetic relatable to drinking coffee (coffee bean, froth, etc).
INCLUSIVE DESIGN FOR PHYSICAL IMPAIRMENTS
Including an easy-to-use delivery service and meet up facility were the main requirements for Kevin as a wheelchair who wishes to continue socialising with colleagues. Optimising for single hand usage was the focus when considering Sherry’s single arm paralysis.
Convene includes multiple ways to set your location or find the nearest coffee shop – via GPS, dropdown inputs, an interactive map or QR code scanner. By setting an accurate location the coffee shop can plan routes and deliver efficiently. The delivery service supports physically impaired by sending directly to their location removing potential issues such as poorly accessible coffee shops (high counters, cluttered layouts) or significant distances to locations.
Organising a “meet up” is given prominent position on the main hub page and throughout the ordering process. This facility is targeted not only at Kevin (see personas), but other users wishing to meet socially without the pressure to hold a table. Kevin can arrange a social activity at his own leisure, knowing his table is booked for a set period without the worry of getting wheelchair accessible seating.
The layout of the application has been designed to be compatible with “the Thumb Zone” (Hoober, 2011), whereby content is positioned in areas most easily and frequently pressed by the thumb. This is especially relevant for a single-handed user as they will deal with more hard-to-reach than when using both hands or cradling a mobile device (see below images). The design is also compatible with the “Reachability” functionality setting included in iOS since iPhone 6 (AppleInsider, 2017) which lowers the top half of the page to be within easier reach of the thumb.
Touch areas depending on single hand positioning (Hoober, 2013), an overlay of the left-hand touch area onto the Convene main hub page, and iPhone “Reachability” example (Apple, 2022)
All target areas are 44x44px or above, with invisible areas coded where icons and/or text is less. WCAG, iOS and Material guidelines all advise clickable areas of 44px or above (Material Design states 48px for Android). Ensuring the target area size minimum is met (2.5.5 Target Size (AAA) - WCAG 2.1) benefits single hand users and those who struggle with fine motor movements especially on touch devices (such as the persona Sherry). This benefits physical impaired users but also visually impaired as it ensures a prominent target for interactions when using screen readers.
INCLUSIVE DESIGN FOR VISUAL IMPAIRMENTS
The application high fidelity prototype was designed with elements focused on the visually impaired persona, Siobhan. Ensuring the application is screen reader friendly is critical with additional features such as voice interaction and QR code scanning further enhancing user experience for visually impaired users.
Design consideration to be screen reader friendly were made based on guidelines from Apple Developer (related to VoiceOver) and Material Design (Talkback).
Voice Interaction
On first interaction with the voice mode, the familiar iPhone voice recorder pop up is engaged and an orientation script provides the user with an audible overview of how the talk facility works and what it can do (provide information about nearest shops, product descriptions, order coffee, give updates on order status, etc).
QR scanning
For this application adding active QR code stickers to desks, rooms, shops, meet up locations and even to the coffee cups in the real world would enable users to become more efficient at multiple activities related to the coffee ordering process.
In addition to the elements shown above the following were also reviewed:
Text on interactive areas did not include details of control states (selected, focus) as they may be read out by screen reader (Google, 2022)
Images will include aria labels and relevant alt text appropriate for text readers (1.1.1 Non-text Content, WCAG 2.0), buttons, icons and headers also tagged
Sentences are kept short and unnecessary jargon or interaction descriptive words are removed (Google, 2022)
INCLUSIVE DESIGN FOR AUDITORY IMPAIRMENTS
The persona with auditory impairments, Reena, has moderate to severe hearing loss, wearing a hearing aid in one ear. She struggles with barista’s not looking at her when talking and therefore missing social queues facial mannerisms sometimes meaning she receives incorrect items, and not knowing when her order is available at a collection counter. The approach used to meet her auditory related requirements revolved around using her existing capabilities to alleviate the issues she has previously experienced.
Via remote ordering delivery service, Reena can order to her own requirements and use the notes to convey any additional information (where to leave her drink, that she may not hear them, etc), removing the potential for her orders to be misunderstood. Helping delivery staff empathise with her impairments can remove negativity she may have felt previously.
INCLUSIVE DESIGN FOR COGNITIVE IMPAIRMENTS
The personas benefit from a meaningful sequence being established on the main hub page - 1.3.2 Meaningful Sequence (WCAG 2.1). Keeping page content structured in a progressive order makes it easier to consume information in a logical series. Costa, Starbucks, and food delivery apps often display discounts and reward schemes before the beverage / food products which may hinder a cognitively impaired user.
The menu list and dropdown input such as those on the product details page are restricted to the minimum number of items possible or broken into smaller groupings with no larger than 7 items. Miller’s Law that the average person can only keep a set number of items (7 +/- 2) in their working memory, whilst Hick’s Law suggests that reducing the number of choices and complexity can increase decision time and avoid overwhelming the user (Lablonski, 2020). By combining these two theories the design should reduce the cognitive load required from the user.
A simple flow diagram is employed to display the order status (see Fig 3.3.5d). Using a diagram such as this helps dyslexic users with the mix of images and linear flow (British Dyslexia Association, 2022), and users with reduced memory by reiterating status by matching the system and real-world (Nielsen, 1994).
MULTIPLATORM ACCESSIBILITY
Convene Coffee’s design has been adapted to web and tablet with several multi-platform accessibility related changes.
A significant design difference from the mobile variant is the coffee menu being shown on the homepage with an expandable tray displaying the product details. The experience for users of screen readers and cognitively impaired should be improved by this due to accessing ordering without any prior interactions.
The tablet design maintains the navigation elements from mobile but aligns with responsive grids and styling cues from web due to large touch areas and increase in screen size from mobile.
iPad
Web
Evaluation
Task based “Think Aloud” testing was undertaken with six users all of which were followed up with a System Usability Scale test (Brooke, 1996) to evaluate the application.
PARTICIPANTS
Ages ranged from over 70 years old to mid 20s, with the majority of participants having a high volume of daily digital and app interactions, but the older participants using apps minimally. In terms of existing impairments: 3 of the participants wear glasses for reading / mobile use, one participant (over 70) has mild degenerative hearing and wears a hearing aid in one ear.
METHODOLOGY
User evaluation occurred on the Convene Coffee high-fidelity mobile design using Adobe XD’s mobile app. Mobile device testing allowed use of accessibility features using voice and touch interaction, both of which identified as key user requirements.
Tasks were designed to flow through a user’s journey of the application from registering to order completion (and pickup!).
Participants were digitally sent a SUS test after the initial interview. SUS has been found to be effective at recognising whether a system or application is usable or unusable using a small sample set of participants (Brooke, 1996).
RESULTS
The evaluation process highlighted several improvements for the application alongside generally positive feedback. Users praised the design aesthetic, simplicity, and ease of use during the interviews. A 73-year-old participant who does not use mobile apps commented “It’s self-explanatory… easy to operate and link through”. This was reiterated by the System Usability Scale results for statements related to ease of use and the ability to learn quickly.
Four out of the six participants commented how voice interaction was not something they would use day to day but reacted positively to the implementation on Convene. The feedback supports voice interaction benefits for other users though it was initially aimed primarily at users with severe visual impairments. Studies related to voice interaction functionality have also shown it can improve overall efficiency and overcome difficulties with learning new functionality (Pradhan et al., 2018).
Images and icons regarding the coffee menu helped users quickly know what they were ordering. The coffee images (see Fig 3.5.3a) were mentioned multiple times as supporting users to understand the ingredients and brewing of each coffee type, something which was “not entirely obvious in any of the big chains”.
Labelling of the “Location” button and functionality pertaining to both finding a coffee shop and setting a location for delivery also caused confusion, this reiterates WCAG success criteria 2.4.6 Headings and Labels (Level AA) & 2.4.9 Link Purpose (Level AAA) (WCAG 2). Labelling was brought up when a user could not find the voice interaction “microphone” icon, one of the only icons without supporting text.
Updated Design
In the case of the navigation menu the feedback has heavily influenced the redesign and the approach to the updated design in general.
Greater amount of labelling and descriptions have been added. Where new or innovative features are included in the application an information icon or supporting text has been provided. The voice interaction and account icon include labels to improve readability.
A major problem area identified appeared in the navigation bar; specifically, it not including the “Home” button which became a blocker in multiple situations where the participant needed to get back to main hub. A “Home” button has been added to the bottom navigation on mobile and tablet whilst the Convene logo will remain as the link to hub page on the web variant. Jakob Nielsen refers to “Users spend most of their time on other sites” (Nielsen, 2000), having consistent navigation (3.2.3 Consistent Navigation, WCAG 2.1) that conforms to pre-existing design conventions such as the Home button as the first nav button benefits the user.
Quicksand is a legible Sans Serif font meaning reducing to 12pt in the navigation allowing room for an additional button for “Home” provides an improvement. No minimum font size is recommended for general text in the guidelines used (Apple, Material Design or WCAG) therefore a common-sense approach has been taken in this instance.
References
References
Apple, (2022). Human Interface Guidelines. Available at: https://developer.apple.com/design/human-interface-guidelines/guidelines/ [Accessed 24th July 2022]
AppleInsider (2017). How to enable and use Reachability on iPhone X. Available at: https://appleinsider.com/articles/17/11/01/how-to-enable-and-use-reachability-on-iphone-x [Accessed 17th August 2022]
Bennett, C.L. and Rosner, D.K., (2019). The Promise of Empathy: Design, Disability, and Knowing the" Other". In Proceedings of the 2019 CHI conference on human factors in computing systems (pp. 1-13) May 2019.
Berget, G., Mulvey, F. and Sandnes, F.E. (2016). Is visual content in textual search interfaces beneficial to dyslexic users?. International Journal of Human-Computer Studies, 92, pp.17-29. Available at: https://doi.org/10.1016/j.ijhcs.2016.04.006
British Dyslexia Association, (2022). Creating a dyslexia friendly workplace: Dyslexia friendly styling guide. Available at: Dyslexia friendly style guide - British Dyslexia Association (bdadyslexia.org.uk) [Accessed 10th August]
Brooke, J. (1996). SUS-A quick and dirty usability scale. Usability evaluation in industry, 189(194), pp.4-7.
Cata, T., Patel, P.S. and Sakaguchi, T. (2013). QR code: A new opportunity for effective mobile marketing. Journal of Mobile technologies, knowledge and society, 2013, p.1.
Clegg, D. and Barker, R. (1994). Case method fast-track: a RAD approach. Addison-Wesley Longman Publishing Co., Inc..
Erard, M. (2017). Why Sign-Language Gloves Don't Help Deaf People. The Atlantic. Available at: https://www.theatlantic.com/technology/archive/2017/11/why-sign-language-gloves-dont-help-deaf-people/545441/ [Accessed 19th August 2022]
Google (2022). Material Design | Accessibility. Material Design. Available at: https://www.material.io/design/usability/accessibility.html [Accessed 24th July 2022]
GOV.UK (2022). National statistics: Family Resources Survey: financial year 2020 to 2021. Department for Work and Pensions, gov.uk. Published 31 March 2022. Available at: https://www.gov.uk/government/statistics/family-resources-survey-financial-year-2020-to-2021/family-resources-survey-financial-year-2020-to-2021 [Accessed 17th August 2022]
GOV.UK (2022). Understanding accessibility requirements for public sector bodies. Central Digital and Data Office. GOV.UK. Available at: https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps [Accessed 17th August 2022]
Hill, J. (2020). Do deaf communities actually want sign language gloves?. Nature Electronics, 3(9), pp.512-513.
Hoober, S. and Berkman, E. (2011). Designing mobile interfaces: Patterns for interaction design. O'Reilly Media, Inc.
Hoober, S. (2013). How do users really hold mobile devices. UX Matters. Published: February, 18, pp.2327-4662. Available at: https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php [Accessed 17th August 2022]
Maidment, D. W., & Amlani, A. M. (2020). Argumentum ad Ignorantiam: Smartphone-Connected Listening Devices. Seminars in hearing, 41(4), 254–265. https://doi.org/10.1055/s-0040-1718711
Microsoft (2022). Inclusive Design. Available at: https://www.microsoft.com/design/inclusive/ [Accessed 18th August 2022]
Nielsen, J. (1994). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp. 152-158), April 1994.
Nielsen, J. (2000). End of Web Design. Nielsen Norman Group. Available at: https://www.nngroup.com/articles/end-of-web-design/ [Accessed 17th August 2022]
Nielsen, J. and Landauer, T.K., (1993). A mathematical model of the finding of usability problems. In Proceedings of the INTERACT'93 and CHI'93 conference on Human factors in computing systems (pp. 206-213), May 1993.
Oliver, M., Sapey, B. and Thomas, P. (2012). Social work with disabled people. Bloomsbury Publishing.
Pradhan, A., Mehta, K. and Findlater, L. (2018). " Accessibility Came by Accident" Use of Voice-Controlled Intelligent Personal Assistants by People with Disabilities. In Proceedings of the 2018 CHI Conference on human factors in computing systems (pp. 1-13), April 2018. https://doi.org/10.1145/3173574.3174033
Scope (2022). Disability facts and figures. Available at: https://www.scope.org.uk/media/disability-facts-figures/ [Accessed 18th August 2022]
Statista Search Department (2020). M-commerce retail sales forecast in the United Kingdom (UK) from 2019 to 2024. Statista. Available at: https://www.statista.com/statistics/285661/m-commerce-retail-revenue-in-the-united-kingdom-uk/ [Accessed 22nd August 2022]
Story, M.F., Mueller, J.L. and Mace, R.L., (1998). The universal design file: Designing for people of all ages and abilities.
W3 (2022). Web Content Accessibility Guidelines (WCAG) 2.1. Available at: https://www.w3.org/TR/WCAG21/ [Accessed 24th July 2022]
W3 (2018). The Business Case for Digital Accessibility. W3 Web Accessibility Initiative. Available at: https://www.w3.org/WAI/business-case/ [Accessed 23rd August 2022]
W3 Schools (2022). Accessibility Screen Readers. Available at: https://www.w3schools.com/accessibility/accessibility_screen_readers.php [Accessed 20th August 2022]
World Health Organisation (2021). Disability and health. Available at: https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health [Accessed 17th August 2022]
Yablonski, J., 2020. Laws of UX: Using psychology to design better products & services. O'Reilly Media.
Project completed as part of MSc User Experience Design @ Birmingham City University in January 2023.
Page updated
Google Sites
Report abuse