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 Designer
*Copilot is a fictitious name to represent the tool by request of the company - it has no relation to any other tool or app with a similar name.
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.
*Please note that some information and data has been changed or left out by request of the company
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 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 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
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)
UX Research: Insights & Findings
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.
Initial UI Updates & 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:
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:
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:
Feedback from Copilot:
The page is bulky with so much information
Too many calls to action that are pulling users’ 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
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.
2. Follow Common Patterns
Reformatted to fit into a more intuitive pattern so users won’t miss any options.
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.
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:
Sign Up + Onboarding
Video of prototype sign-up 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 the header layout and the progress tracker
User Dashboard + Requests
Video of prototype of the dashboard and event information following all UX/UI updates.
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 (moved 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
Completed Requests + Rating
Video of the prototype for the rating process following UX/UI updates.
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
Impacts
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
Lessons Learned
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.
See more:
-
Alter Eco
Mobile App Design
-
CityPups
Design Sprint
-
FKBikes
E-Commerce Website