Sharif Matar
  • About
  • UX Work
    • Olay
    • Marriott
    • NBC Universal
    • dotMaps
    • Ford
    • Chase Bank
    • Video & Content Strategy >
      • Share The Meal
      • Defy Media
      • DollarShaveClub
      • Don Julio
      • Honda
      • McAfee
      • Hawaii Stories
  • Contact
CASE STUDY

Making Ford's international marketing experience fun 

Ford

Category Digital
Year 2016
​

UX Design Sharif Matar
Development Iconmobile Group
We wanted to create a contest that would drive authentic awareness and engagement for the Ford Explorer in the Middle East. I defined the vision and user experience for a mobile first multi lingual ​contest for a foreign market.

The campaign allowed people to create, register and share a dream road trip or epic adventure filled with places and activities. From concept to delivery, I designed an interactive four phase contest for the launch of the Ford Explorer.
Picture

The Endowment Effect


​Several studies have shown that individuals value objects more highly if they own them, a finding commonly known as the endowment effect. In fact, simply holding an object or just imagining it can help create a perception of ownership that produces the endowment effect.
Picture

​Sketching & Exploration

Starting out, I brainstormed by sketching ideas and rough design layouts of an adventure contest. This helps me determine very quickly what works and what doesn’t. I can iterate easily. This allowed me to see different versions I’ve considered and in what direction I’m going. Sketches were also my preferred way of gathering feedback early on.
Picture
User flows and design workshops

​Site Map Validation

Once we developed a concept, I wanted to validate navigation principles before jumping into detailed wireframes. This allowed me to understand how users would work their way through the experience.
Picture
Sitemaps, user flows and scenarios helped to ensure the experience is smooth. I built four different maps for each contest phase. It helped me balance the number of steps vs. the amount of information and possibilities for each step.

Collaboration & Feedback

Daily and weekly check-ins and progress reports were used to stay on track. This was critical as the  strategy team and developers were spread between Detroit and New York City. Further, part of the clients teams were based abroad which made scheduling meetings and feedback even more critical. Key feedback from the client and developers were discussed and implemented throughout the design process.
Picture
Developer feedback and collaboration checklist.

Personas & Use Cases

​Personas were developed based on the region and potential customers. I tied the use cases to each persona across all four phases of the competition.
Picture

Contest Timeline

The competition was split up into four phases where users would be able to fully engage with the contest at each step of the process. The primary phase (two) would allow users to explore, create and submit unique road trip adventure videos from a gallery of locations.
Picture

Design Scope

Looking at the information we had on our target audience and many of the planned use cases we concluded mobile devices would be the majority. Mobile first became important for scope and priority. 
Picture

Annotating Wireframes

​Wireframes turned the abstract nature of a flow chart into something real and tangible without distractions. This ensured that all parties were on the same page. Wireframing specific project features provided a clear communication to the client how these features would function, where they will live on the specific page and how useful they might actually be.
Picture
Picture

Art Direction

Picture
Picture

Copy Structure

Picture

Product Placement

After user testing banner space for the product call out we included above the trip builder with variable feature call out units on the page. We found that less ads actually resulted in an increase in both ad recall and feature message recall. By optimizing for responsive view-ability, we increased ad accessibility while providing a better experience for the users.
Price-Value Bias

​"How we frame a product’s 
price & features greatly affects its perceived value. ... Fundamentally, this is all because we tend to think that greater functionality means greater value (Yeung and Soman 2007)."

Product Features

The client wanted people to learn about the product with this campaign. The cars individual features were placed throughout the contest and content. This was a way to get users to learn about the car as well as value the features even more.

Content Strategy

My earliest design challenge was to propose how to develop a content strategy to find and display the location videos in our galley. I developed a plan to source dynamic footage and original videos for every location choice. These assets would be used to piece together the adventure video users would submit. 

Responsive Experience 

Picture
I designed a sample contest video.

Forms

On this project, registration was a key goal. We had a variety of form types and inputs across the campaign; checkboxes, radio buttons, multi-selects, 'remember me' functionality which required different messaging regarding their validation. As I worked to unify the appearance under one style, we needed a universal solution that worked on mobile and desktop, in a variety of different situations. For these difficult requirements I also needed to display at the right place and pace for each step. By using best practices and testing design for each phase, I made sure information was shown at the right time. The result was a bold colour palette that aligned with branding and used clear conversational language.
Picture
Picture
Picture
Picture
Picture
Picture

Process & Updates

​​In many cases we decided to change or even take out 'good ideas' or fun features once it was wireframed due to the fact that it just did not work with what this projects goals were. Seeing the features without any creative influence really allowed the client to focus on other equally important aspects of the project and clarified any expectations about how features would be executed.

​Documentation

​Since we were working with an off-site development team, it was important that all the pages, components, and phases were sufficiently documented. Below is a sample of location content guide and a page copy guide that was created to map out each component across all viewports.
Picture
Picture

Conclusion

​Agile methods were used successfully on this project which minimized last-minute surprises and allowed developers to predict timelines more efficiently. 
My constant flow of questions and deliverables early on made the development stage much smoother. Developers knew what to expect. This allowed us to focus on the inevitable road bumps that came up such as location changes, translation and media content management.
Mobile Mockups
OLAY - Research & Mobile Web
NBC - TV & Native & Motion
Copyright © 2019 Sharif Matar

​All trademarks remain the property of their respective owners, and are only used to describe products and services offered by each trademark holder. The use of any third party trademarks ​on this site in no way indicates any ownership.
  • About
  • UX Work
    • Olay
    • Marriott
    • NBC Universal
    • dotMaps
    • Ford
    • Chase Bank
    • Video & Content Strategy >
      • Share The Meal
      • Defy Media
      • DollarShaveClub
      • Don Julio
      • Honda
      • McAfee
      • Hawaii Stories
  • Contact