ML Overview Vision Codebase Lifecycle Roles

Overview

Since the year 2000, MovieTickets.com has been offering moviegoers a quick and easy way to purchase their tickets online before going to the movie theater. With a past history of focusing mostly on ad revenue, the company recognized that by creating a better user experience their customers will want come back to the site. Back in the early days of inception, MovieTickets.com was one of the only options to pre-purchase online movie tickets before heading to the theater. With this no longer being the case, the company recognized the importance of focusing on a positive user experience while continuing to nurture the advertisement revenue.

Objectives

Build a larger user base, increase ticket sale conversions, grow advertising CPM

  • Build a fresh, new user experience
  • Rebrand company to a fun, modern style
  • Strategically place advertisements in non-obtrusive yet effective positions
  • Bring frontend development technologies up to speed with today's standards
    • Reorganize all frontend architecture
    • Use the latest coding languages
    • Output a fully responsive layout

Establishing a Vision

Taxonomy

I created a visualization of the proposed architecture for the new site’s content structure. This visual helped stakeholders see how users would organically navigate through the site. I went through approximately a dozen iterations while carefully combing through the sites intended user flows.

Sketches & Wireframes

This is where the real fun began. Sketches and wireframes allowed the team to dream big. Quick mockups of multiple new features would help the stakeholders recognize which items would be a necessity for launch and which could come in later iterations. It was in this stage where the refining of features really took place. Gathering the reactions and feedback from stakeholders also helped me to know if some layouts and features were going too far off the projected redesign plan. This is when dreams would be reeled in to more realistic expectations. For example, you will see Google Maps in some layouts of the sketches but when meeting with stakeholders and discussing tight deadlines, the maps features were moved off the requirements list and put on the ‘nice-to-have’ list.

Style Guide

I find that creating a style guide can be a pretty challenging part of a redesign. Especially when the style guide is not an iteration of the current guide, but is a complete do-over. Why is this part of the process so hard? Well, because we all have different tastes. Getting everyone to agree on this subject can be a challenge, but by listening to feedback and properly defending decisions, I eventually got the room to agree. Beyond that, we were all excited to see the styles come more to life!

Font Families:
Roboto Slab
Heebo
Button Styles:
Ad Presentation

The stakeholders for the ad sales department had a very defined objective: Sell ads and make the most money possible. Can you blame them? It was a delicate balance for me to represent the frontend side of the business while compromising and understanding the advertisement side of the business. They were used to calling the shots in the past. But with the recent shift to focus on the user experience, I was careful to keep the ad stakeholders updated weekly with progress reports and clearly define how I was considering ad revenue to still be a priority with design decisions.

Mocks & Prototypes

Where all the planning starts to really come together! Taking the concepts and layouts from the wireframes, adding the style guide, and showing actual page mocks is when the fantasy becomes a reality. I used Invision App to put together working prototypes and allowed stakeholders to feel like they could get their hands on a working product before I actually had to commit to code. They supplied feedback and the iteration lifecycle began.

UX Testing, Iteration Cycle & Finalizing the Mocks

With working mocks in tote, I was able to gather important user feedback so changes were made because of data, not just emotional responses. Much about design is emotion based, but once I gathered actual data from user feedback, I was able to reiterate and finalize the mocks with confidence.


Architecturing the Frontend Codebase

The site redesign gave me the opportunity to architect the frontend code base into a flexible system that many team members can easily adhere to. This modular system improved team efficiency and decreased development headaches by using the SMACSS methodology for file organization.



Frontend &
The Development
Lifecycle

Each major feature or page had its own epic and was comprised of dozens of stories. I was able to write all frontend stories for my team of developers to pick up and assist me with building the frontend of the website. The stories contained links to documentation where business rules were clearly stated with mockups, links to prototypes, and the style guide. I prioritized and assigned stories to frontend team members, including myself, for the appropriate tasks.

When tasks where marked as ‘Done’ by frontend developers, I would do code reviews to ensure proper protocols were being followed, everything passed design standards, and the story was appropriate to be moved onto the testing period.

I would work very closely with the QA team to aid in cross browser and multi-device testing. We were building the companies first fully responsive website so there where a lot of views to check the website on.

With this efficient development lifecycle in place, the entire development team was able to release the newly redesigned website to production within a seven month period.


Roles & Responsibilities

Senior Web Designer
  • Rebranded the company style by adding a new, brighter color palette, modern fonts and the latest design trend styles
  • Sole designer on all sketches, wireframes, finalized mockups and prototypes for the full website redesign
  • Met with executive level stakeholders to discuss changes and defend design decisions
  • Conducted user testing for UX improvements
  • Managed and directed the junior web designer on tasks such as icon creation and marketing using the new style guide
  • Performed biannual performance reviews
Frontend Developer, Team Lead & Manager
  • Organized frontend file architecture
  • Created custom responsive HTML templates and feature widgets to be used within the Sitefinity CMS
  • Styled templates and feature widgets using HTML and Sass
  • Wrote, organized, and delegated all frontend development stories to be completed by the frontend team and myself
  • Held daily standups to discuss progress and blockers with team members
  • Interviewed and effectively participated in the hiring of new employees for the frontend team

Say Hello