In just two years since 2016, MyEE App has transformed how users monitor and engage with their data/usage. By 2017, MyEE App has served 14 million users every month, across the UK.
The EE brand has since evolved, leaving the app behind with no set design system or guidelines to dictate how the design will move forward. Additionally, due to the app's success, more and more features are set to be added to the app, which is currently unable to support them.
Update the UI of the MyEE application to align with the new digital style guide, as well as reconfiguring the app's navigation in order to accommodate new features. This will be done in the form of a design system.
This project is still on-going for the most part, and the design is continually evolving. I am leading the visual design of the new app navigation and patterning in incremental changes, from March 2017. I work in collaboration one other designer. I work both in the agency and in EE's offices (Leeds and London).
In addition, I work alongside a researcher, experience designer, 3 solution designers, a team of native app developers, and 3 product owners.
New navigation menu
A goal of the MyEE app is to breathe in the new visual design language into the app. Off the back of the 'future concept' roadmap, a new burger navigation was called for. The change would be completely UI focused, and would not alter any functionality.
The project began with wireframes to communicate the concept to product owners, solution designers and developers. Feedback was given from all, which informed the final solution.
I believe it's important to get everyone involved in the project from its inception, so we all have a clear, shared, understanding of what's expected.
The inception of the design system
The design for the burger navigation was completed in a design library, using nested symbols in Sketch. The advantage of a design library is that it's accessible by anyone in the team as a symbol file (to preserve its unchanged design) and so that any updates to the file are synced globally.
The content can be configured using overwrites in sketch.
The burger navigation has since been built and pushed to live in the iOS version of the application, with the Android version well underway.
Adopting the design system globally
To assure consistency for the users, designers and developers, we decided to implement a design system for current and future elements and modules in the app.
This includes creating buttons, links, text styles, grids, guides, modules, colour palettes, and specific MyEE design elements. Pictured above is the style guide which informs the component library; the two parts of the design system.
Click to Call
An example of where the design system has been implemented is in the new sections within click to call, the two screens on the right in the image above.
Modules now have standardised spacing, line heights, button heights and widths, as well as a nested symbol to swap icons out.
The project, Click to call, was a new proposition, off the back of some roadmap work completed prior by myself. The goal was to add automated calling into the application.
We aimed to add in a 'call EE' modal/pop-up on pain points in the app, which was highlighted prior thanks to the analytics team. The pop up would appear after a number of seconds on assigned pages, which suggests that the user is stuck or needs some help. The modal would appear with a CTA to call EE support. Additionally, we improved the help section of the app to accommodate calling support, as well as adding in links to other social channels.
Click to call went through a round of lab testing and two rounds of guerilla testing to validate its features.