Project Summary:
4-week internship working with Copilot, a service that provides people with vision and/or hearing impairments with communication and navigational support, on their client-facing mobile app.
Role:
UX/UI Design Intern
Context & Considerations
Designs should feel similar to website design
Accessibility is a primary concern
Some pages will have a lot of information, this needs to be approachable to all users without being overwhelming
Mobile app will be focused on use with iPhones
Designs will likely be handed off to another team later on
*Please note that some information and data have been changed or left out to protect the company
Initial Problem Statement
The current designs for the mobile app are not cohesive with the web designs used by Copilot. Users need to be able to switch seamlessly between the Copilot website and mobile app in order to fully utilize Copilot’s services and avoid confusion.
Prototype:
Video of high-fidelity prototype in Figma - here you can see the process of requesting services.
Setting Expectations
Talking Design with Non-Designers
Before being able to dive in, I needed to determine the goals of Copilot and what the organization wanted in deliverables. During the initial meeting, I discussed with the organization about their desires for my work and what would be feasible in the amount of time I had. It was important to keep the scope of the project focused and to be honest about what I could complete, and complete well in four weeks.
Company asks:
Redesign of their mobile app
Improvement in the UX of the sign-up process and onboarding
UX redesign of their code of conduct review in the mobile app
Functioning prototype ready to be used in testing
Limiting factors:
Four-week working term, 10 hours a week
Limited ability to further research with the user base on any possible UX changes
Working with multiple designers will mean time dedicated to consolidating designs
Final Agreed-Upon Deliverables:
Update the UI for most of the minimum viable product (MVP)
Make UX changes based on feedback from a prominent stakeholder in the deafblind community
Make designs cohesive between designers working on various projects
Create a prototype of existing user flows fit for testing MVP
Addressing Existing UX/UI Issues
I took time to look over the designs copilot had before I began to do any design work of my own. This allows me to familiarize myself with the style and note any areas that may need improvement.
Existing Web Designs:
Mismatched background colors
Some assets have poor contrast ratios
Existing Mobile Designs:
Poor contrast ratios
Buttons used rather than radio buttons
Icons differ from web
Needed Adjustments
Accessibility issues within the user interface
Inconsistencies in UI: text, color, iconography
App feel varies from website design
Some user experience best practices are absent
Grid not used - alignment issues
No component library/asset central location
UX Research & Accessibility Review
Following my initial review of the existing designs, I read through provided UX Research from Copilot. As well, I spent some time using the VoiceOver feature on my iPhone to familiarize myself with how non-sighted individuals would navigate their mobile phones.
I used these insights and feedback from Copilot to revise my initial problem statement to prioritize the accessibility of the app for the user base.
*Please note: the above research was shared with me, I did not facilitate this myself
Insights & helpful findings:
Changes in the UI (such as an error message) should be expressed in more than just purely visual cues
Apple VoiceOver starts in the top left corner on a new page, reading whatever the first item is
VoiceOver reads whatever the user selects with their finger (on the auto-settings)
Text without enough spacing is harder to read - especially with visual impairments
Every visual item that is utilized should have alt text that accompanies it (whether in the code or in the design)
Updated Problem Statement
For users who rely on screen-reading technology or other interpretive devices, apps can be confusing and difficult to interact with. Users with various visual and auditory impairments need to be able to easily maneuver the Copilot app in order to receive communication and navigational support.
Update Style Guide
Given some of the issues I saw across the existing mobile apps and web designs, I decided to update the style guide slightly for my mobile designs. This included limiting greyscale colors and defining use cases, applying more intentional spacing to typography, and eliminating font sizes that would be too small or too large for mobile.
Color Palette:
For the color palette, I removed some of the shades of grey and gave everything more specific names and use-case definitions as well as improving some contrast ratios. The mobile designs I was handed from previous designers struggled with consistent use of shades for certain components so I wanted to avoid that confusion.
Typography:
For the typography, the biggest change was setting the spacing to specific amounts in order to snap to an 8px grid and increase readability. Also created a specific button text in order to ensure WCAG AA guidelines were met on the design for primary buttons.
UI Design & Feedback
For this project, the designers would focus on one user flow then receive feedback and move forward onto the next flow. The flows that I worked on were:
Sign up + onboarding process
User dashboard + make a request
Update/view a submitted request + provide feedback
My initial goal was to make the UI feel cohesive with the brand and the existing web design while meeting accessibility guidelines.
Sign Up & Onboarding
Originial design from previous designers:
My initial design update:
Changes:
Colors changed to better match web designs
The “Home” page was reconfigured to show events of that day - which is how the website functions
Fonts adjusted for improved legibility
Iconography updated to match style guide and web design
Size adjustments in icons to help with visibility
Filter added to requests
Feedback from Copilot:
Asterisk is a poor indicator for users with visual impairments
The skip button is not necessary, skipping in this process is not allowed
The disabled button should express what needs to happen to become usable
Screens should have minimal information to prevent information overload or confusion
User Dashboard & Requests
Originial design from previous designers:
My initial design update:
Changes:
Borders of input fields are darkened to increase visibility
The back button was updated and added to the header area
Progress indicator changed to use HEX codes rather than transparency to change color, thicker and more in line with brand colors
Questions formatted to match the order and wording of web app
Font spaced, bolded, and darkened more for legibility
Required fields are marked
“Skip” button added
Disabled state button updated to meet WCAG AA guidelines
Feedback from Copilot:
The chat feature will not be part of the MVP and can be excluded from designs and menu
Would like the “requests” item on the menu to be the largest option
The calendar view will not be part of the app - the header should have a global announcement icon instead
Instead of ellipses on the request cards indicating viewing more details, they would prefer a button that explicitly expresses that
Submitted Requests & Rating
Originial design from previous designers:
My initial design update:
Changes:
Removed the map as the app will not support in-app navigation
Adjusted style to feel more like web design
Provided information as it is asked for in the service request
Payment info removed from this portion of the MVP
Made sure buttons and action-items matched existing web designs
Feedback from Copilot:
The page is bulky with so much information
Too many calls to action that are pulling attention
UX Design - 3 Main Fixes
One of the tasks asked of me by Copilot was to improve the user experience some specific parts of their client mobile app. The areas that needed improvement were the sign up and onboarding process and code of conduct reviewing in the app. As well, following my independent research in using Apple’s VoiceOver feature, I had some ideas of other things that could be updated to improve overall user experience.
Avoid Information Overload
One thing that was very important to CoPilot was finding ways to avoid overwhelming users - particularly users with visual impairments who might find long pages of scrolling tedious and hard to get through.
Original page design for onboarding with all personal information on one page.
Page needing improvement:
Updated design breaks down the section focusing on one question at a time
Here is an example of breaking common patterns - usually choices with radio buttons or check boxes are offered in one horizontal column in mobile.
While always a good UX practice, following well-established patterns seen across many other apps is important for people who use accessibility features of their phones to help them navigate through the interface.
2. Follow Common Patterns
Reformatted to fit into a more intuitive pattern so users won’t miss any options.
Using information I gained from reading through user research and spending time using VoiceOver and Narrator, I had ideas of some good practices in how to help orient non-sighted users and help them have a more pleasant experience. I used these while re-working the onboarding process and code of conduct.
3. Use Best Practices for Blind Users
Flexibility and transparency are very important, especially for users with disabilities. By offering the user the option to complete the process on their computer it allows them some more flexibility in their experience.
VoiceOver starts by reading the item in the top left corner, by making sure there is a navigational button there the user will always know how to get back to where they were previously.
Stating progress as a page number out of the total is the method used by the Narrator app through Microsoft. This method will probably make more sense to a non-sighted user as it will give them more context than a percentile might.
Breaking down the code of conduct into smaller pieces that you can click into and out of make it much more manageable on mobile. The sections are marked completed by visual cues and using text so it will be obvious to all users when they have completed that portion.
Implementing Design Operations
Since Copilot has relied heavily on short-term contract design work, I wanted to make sure my designs were easily picked up and utilized by future designers. In order to do this, I made use of atomic design principles, component libraries, and auto-layout. These features will allow future designers to make cascading changes without having to complete a full re-design.
I documented my process and suggested a few next steps. This will hopefully offer context on rationale and choices for future teams working on my designs. Finally, I left some notes on the structure of my component families and auto-layout in order to mitigate any potential confusion.
Some of my component library with notes for future designers:
Bringing it All Together
Following the work on updating the UI of the client-facing app and implementing UX changes, I created my final iterations of the MVP and turned it into a functioning prototype.
Final Designs:
Signup + Onboarding
Video of prototype sign-up process following all UX/UI updates.
Video of prototype for rating process following all UX/UI updates.
Final Updates:
Added flexibility to the process and improved UX by providing time estimates for users and offering alternatives when necessary
Redesigned the disabled state button to be more informative for users relying on a screen reader and increased contrast to meet WCAG minimum guidelines
Broke down the process into smaller pieces
Updated to header layout and the progress tracker
User Dashboard + Requests
Final Updates:
Designed a home page that more closely resembles the home page of the web app
Redesigned the main menu to meet MVP needs and have a better focus on the main call to action of making requests
Created a clear button on event cards to view the details (away from the ellipses icon)
Added a notification center to replace the calendar feature
Updated make-a-request process and ability to edit requests before submitting that helps eliminate information overload
Video of prototype for user dashboard and event information following all UX/UI updates.
Completed Requests + Rating
Final Updates:
Redesigned the detail page for events to better organize information
Reduce calls to action on detail pages and moved other actions to “more options”
Created multiple, prominent paths to entice users to rate the service of providers and provide feedback
Before this, I had only ever worked in controlled settings of projects provided by my UX/UI course. It was very interesting and new to be working for an organization. Some of the main takeaways I found were:
When working for an organization, there are times you have to do what you are asked rather than what you might do on your own
Many or most stakeholders will not be designers, so getting used to presenting my opinion and talking through my design process is important
Being able to adjust expectations appropriately is very important, I found myself in the position of having to adjust anticipated final deliverables due to time constraints
Accessibility can easily be missed or swept aside, even by a company geared toward serving users with different communicative needs
Overall this was an incredible learning opportunity and a great real-world design experience. Creating highly accessible designs while maintaining the spirit of the company was a challenge I enjoyed very much.
Lessons Learned
During my time at Copilot, I was able to leave lasting impacts:
Updated the designs for the upcoming mobile app to be more dev-friendly, more accessible, and more on-brand
Create and implement design operations to make hand-off from team to team extremely easy
Improved UX for MVP with enhanced focus on user base and educated non-design staff about best practices
Offered next steps for future designers with in-depth document notes on process and principles
Impacts
See more:
-
Alter Eco
Mobile App Design
-
CityPups
Design Sprint
-
FKBikes
E-Commerce Website