UX Internship

At the end of the New Media Design and Web Development program at BCIT we had a month long practicum. I was lucky enough to be accepted as a UX/UI Intern at MailChannels, and given a project to redesign the user interface for the admin side of their Cloud Console.

MailChannels website, customer console, and old admin console

To start the project I by interviewing users and mapping out the existing architecture. I noted where there were extra and redundant navigations steps that could be removed, and shorter paths that could be added to speed up user interactions.

One thing that was immediately noticeable was the lack of a consistent global navigation. From the homepage your only options were to continue deeper on your path, or go back one step. Right away I incorporated a global navigation into my wireframes and mockups.

MailChannels old admin navigation compared to the new

After making the console easier to navigate, I started working on making it easier to use. I made the buttons for adding new customers or conditions bigger, coloured, and more separated from the old navigation system. I also added a second button to the bottom of the pages so users can quickly and easily reach them based on where on the page they are.

Page length was another problem I worked to solve. The existing sales page was a long list displaying all the names and information of the companies using the service. I limited the number of companies displayed to 15 at a time, with easy page controls and the existing filters more pronounced.

After that I looked into pages that were too short. The pages to add or edit customers or conditions were only very short forms with two text boxes, two radio buttons, a Cancel, and a Submit button. I made these into modal windows accessible from the Add New buttons and Edit options.

Finally I came to styling the console. MailChannels has a style guide that hadn’t been used on the old console. I wanted to use the style guide but keep the admin console obviously separate from the website or customer console. The final design uses the company colours, fonts, and sizes specified in the style guide while being visually separate from the customer console and more focused on usability.

Thanks again to the MailChannels team for hosting me and being so great to work with.