This Webmail Application was an overall fun project. Very tricky at times because of the demands from multiple business units of Web.com. The mail application was the first full featured application to be designed and developed and paved the way for the start of an application suite.
This mail platform was to take the place of multiple, old legacy mail clients our current users had. Choosing what functionality to keep, add and/or change was a large and ongoing debate. However, user research and feedback provided proof that modernization was welcome.
Here are the early wires:
As the wires were being developed, I worked to define the UI and visual design. We chose to use Lato font for its legibility on PC's because most users were on Windows. I created the iconography which was somewhat design by committee, but it was favored because at the time the new iOS 7 was trending and everyone LOVED colors!
There were other products being designed that would integrate with Webmail to create a unified, holistic experience while managing their online services. That being said, there were certain navigational elements we wanted to standardize for all apps. The top left of the app is where you can switch between the apps internal features (Email, Calendar, Contacts, etc.):
The top right is the user menu which allows access to launch other products.
We also unified our login experience for the newer products being designed.
Demands were made for ads & upsells, outdated UI trends and recycled code. I was fortunate enough to work closely with the tech lead and we both wanted to ensure the best for the users, according to our specialties. Both the developer and myself made sacrifices and found quality compromises which made it easy to sell our ideas to the product owner. A "flat UI" approach kept the interface simple and clean. Upsells were handled contextually and thoughtfully.
I made TONS of specs for this project, both functional and CSS. During my final design review, I spent a long weekend in the Google Inspector nailing down exact CSS styles. I sent my updated stylesheets to the dev for code review and once implemented, the UI tightened up big time! But this didn't happen all the time, so spec docs looked something like this:
This was one of those projects that I will forever remember. There were some tough times but looking back, the process worked, our team worked and in the end, this product was very successful. The user migration occurred without hiccup and it came with positive feedback.