Spectrum Email
A complete redesign of Spectrum Email web app.
Role
Lead Designer
Problem
After a colossal telecom merger between Time Warner Cable, Bright House Networks, and Charter Communications in 2016, Charter (now a fortune 70 company) combined all residential and small business customers' email addresses under the Spectrum brand. Last year, I joined the team to redesign the email platform completely. Within two months, I found multiple problems that we try to solve with the platform's new 3.0 version.
Spam
Spam emails are getting through to customer's inbox, even after marking emails as spam. However, it is an engineering problem.
Performance & Security
A vendor built spectrum Email 2.0, and it has many issues with performance and security. Customers can easily forward spam emails to our CEO, and emails will take forever to load.
Accessiblity & Responsiveness
Being a Fortune 70 company, our product must be accessible, or we risk ourselves facing lawsuits by our customers. On top of it, the email app is not usable on the mobile viewport.
Lack of Feedback Loop with Users
The lack of analytics built into the app, causing us to rely on the "voice of customer" survey to learn what is annoying our customers. The next version should have analytic built-in across the app.
Infographic & Personas
Before we can start designing, we need to learn more about the user base, who they are, and why they are using Spectrum email. Using available resources, we know there are 6.5M+ active email users and decided to create a survey to gather demographic data about them. From the result, we create two research artifacts: infographic & user personas.
Infographic
My goodness, our customer base is mostly Caucasian, and at least over 50 years old. I immediately realize we are designing the email platform for a unique group of users.
Personas
I worked with a data analyst to analyze the survey result, and together as a team, we identified five personas.
Mapping out the current Spectrum email 2.0
Next, I started by mapping out the current layout of email 2.0. I tried to simplify it, but it is clear that the user experience is not great with inconsistent navigation patterns.
Usability Testing
After initial UI exploration, we created multiple testing plans to conducted usability testing sessions to gather feedback on the design proposal. We conducted each testing plan on the User Testing platform and gathered feedback on at least 7 Spectrum customers and 7 non-Spectrum customers. Insightful results are listed:
3-pane interface (Outlook Live) is indeed a preferred option.
Customers would like the ability to compose emails while browsing emails.
Many customers are using email on their mobile phones, so mobile responsive is a must.
Product Roadmap
Together, Engineering Lead, Product Lead, Design Lead (our "EDP" stack) decided the feature list for MVP and beta launching strategy. The "Next" column is considered nice-to-have for the official full launch of version 3.0. "Later" is for future consideration.
Solution
This navigation allows our new email platform to scale according to on multiple viewports. Actions are separated for Inbox and Email body.
Bulk Action
Pagination is better for accessibility than endless scrolling. Therefore, by selecting emails, they can only select all items on the page, which also helps with the app's performance.
Reply to Email
Reply to an email is accessible at the bottom of the email or in the other options menu. When writing a reply email, users can also expand it to have extra spaces for a long email.
New Email
As we learned from our user base, they prefer to have the ability to compose an email while browsing their emails. This solution allows them to do so. They can also minimize it and expand it for a long email, just like Gmail.
Contacts
We applied the same navigation pattern from Email for Contacts. As the user is creating a new Contact or updating existence one, they can scroll through different fields that they can enter.
Saving & Error Design Pattern
It is critical to map out different states when saving data to the backend and handle multiple error states. Using in-house Design System components and considering all solutions with accessibility in mind, we found a great solution to solve all those pain points. Please visit our link below to browse through the user flow freely.
Whimsical link: https://whimsical.com/webmail-settings-user-flows-MFP4ahqsB7cyfP4457rF9Y@3CRerdhrAw7tskTJupyCBPs2
Accessibility Considerations
With nearly everything in place, it was time for final accessibility and content reviews. I worked with our accessibility architect and accessibility tester to ensure our interaction patterns, color contrasts, button sizing, and typography rules met AA WCAG compliance before reworking titles, tooltips, descriptions and other content to maintain Charter's tone and content guide standards.
Summary
Spectrum email redesign has been a very challenging project. I had to work with multiple stakeholders to establish strong working relationships with the research team, design systems, accessibility architects, content writers, product owners, engineering teams, and customer operations. I enjoyed being a design lead for this project at Spectrum.
The project is in progress, and we are planning to launch the MVP in Q2 of 2021.
Case Studies
Hire Me!
Why consider hiring me?
Collaborative Approach: I'm easy to work with and won't take offense if my design isn't your cup of tea. I'm committed to falling in love with the problem at hand, not just fixated on a particular solution.
Effective Team Player: I actively engage in whiteboarding sessions, firmly believing that exceptional ideas emerge from teamwork rather than individual efforts.
Tech Enthusiast: I harbor a sincere passion and inquisitive mindset toward technology, utilizing cutting-edge advancements to create exceptional products that align with market demands.
Strategic Investment: Bringing me on board is an investment, not an expense. I enjoy mentoring younger team members, participating in product strategy discussions, liaising with the engineering team, and exploring cost-effective bootstrap solutions when necessary.
Do you believe I'd be a good match? Fantastic! I'd be delighted to meet for coffee or schedule a Zoom session to delve into potential opportunities. ☕️ 🖥
You can also connect with me on LinkedIn. 🤝
Danny is a passionate design leader who adapts to changes with an open mindset, owning a unique POV and vision toward new product spaces. He’s got a knack for navigating complex legal and technical requirements and translating them into the most intuitive experience possible. He steps in with graphic design and illustrations wherever they are needed.
Ariel Huang
Growth & Discovery Product Designer