INTERACTIVE GAME DESIGN
Helping transform Ford's international collateral experience |
FordCategory 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. |
|
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. |
|
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.
User flows and design workshops
|
Site Map ValidationOnce 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.
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.
Developer feedback and collaboration checklist.
|
Personas & Use CasesPersonas were developed based on the region and potential customers. I tied the use cases to each persona across all four phases of the competition.
|
Contest TimelineThe 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.
|
Design ScopeLooking 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.
|
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.
|
|
Art Direction
|
Copy Structure
Product PlacementAfter 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 FeaturesThe 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 StrategyMy 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
|
I designed a sample contest video.
|
FormsOn 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.
|
|
|
|
|
|
|
Process & UpdatesIn 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.
|
|
|
ConclusionAgile 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
|
With this new program, we unleashed a robust experience for the brand’s consumers, transformed Ford’s collateral, helped fuel the brand’s marketing-communication efforts and delivered a new way to engage consumers. |
