Ford Motors, Qatar

Almana Motors is Qatar’s only specialist Ford dealership with exclusive access to Ford’s globally-renowned range of cars, crossovers, SUVs and trucks. As carriers of the top-notch Ford Motors brand, they wanted to enhance the digital experience for Ford lovers in Qatar.

What was done: Main website redesign, Vehicle Management System, Wire-frames & Prototype.

Softwares used: Adobe Illustrator, Axure RP.

Project done at Digico Solutions in collaboration with Johnson Luke

Check Almana Motor’s current website

Client Brief

Revamping their digital experience did not only involve a redesign to the Ford website; Almana Motors is committed to investing full care into servicing and repairing their customers’ vehicles.

We also created an online platform for Almana motors clients, an after-sales system that helps Ford owners follow-up on their vehicles and keep them intact. We called it the VMS – Vehicle Management System.

Scope

Project was completed in 2014 after 2 months of work by a team of 5: me (Creative Director), Luz Gallo (Senior CX Designer), Lara Chikhani (Marketing Director), Anas Khattar (Project Manager) and Shady Assaad (Strategic Planner). We designed the UI of the main website and Then we built the VMS, and created a style guide of colors and fonts based on approved ‘wireframe’ layouts.

Deliverables

Website redesign
Vehicle Management System design
Lo-fi Interactive Prototypes
Lo-fi wireframes & interactive prototype
UX Interaction report
UI style-guide

Main Website Vehicle Management System

Main Website

Homepage | Product page | Book a Test Drive | Download Brochure

Homepage

Being a top-notch motors brand, their website had to be a refined digital loom! A design approach that is user centered was needed, with flat and energetic colors that reflect the energy of the brand.

Simple starting point

A deliberate main-menu that makes the user’s first step painless, no matter the goal of the visit.

Straight-forward design

A simple design required significant concentration on images and straight to point value propositions.

Dependable Navigation

A structured site-map introduces a range of Ford cars, crossovers, SUVs and trucks. Extensive yet calm and organized.

Product Page

The product page is where the conversion happens, it provides the user a smooth and logical flow on information for easy decision making.

1. Showcasing Section

A section dedicated to show the vehicle’s superior design by previewing its images with an expandable gallery exhibiting images and videos of the interior and exterior.

Rayan-Portfolio-Ford-Product-page-Gallery-Animation-3

2. Pricing Module

In this section, the user can change the color and the model of the currently viewed vehicle (basic, mid-rage, sport, etc.) to check the price of each. It also provides a little form that gives the user the ability to view payment terms variations and estimations.

Rayan-Portfolio-Ford-Product-page-Pricing-Animation

3. Specifications

This section presents general and detailed information on the vehicle’s performance, design, technology and its interior.

4. Journey Assistance

The ‘Last viewed’ part helps the user recall the current standing in the journey of searching for a vehicle. While the ‘You may also like’ part gives options to decide on the next steps of the journey.

Book a Test Drive

Rayan-Portfolio-Ford-Book-Test-drive-page

Download Brochure

VMS – Vehicle Management System

Dashboard | Book A Service | Buy Accessories

Dashboard

Designed to provide quality maintenance records and convenience to time-sensitive customers who desire for value in a trusted application.

1. Sidebar

The sidebar displays all Ford vehicles owned by the customer and shows previous records for the selected vehicle. Notification icons appear on vehicles that need service soon. Choosing a different vehicle will switch the view to its corresponding profile.

Rayan-Portfolio-Ford-vms-alert-animation-2

2. Vehicle Timeline

A timeline that estimates the dates of services needed for the vehicle, it helps ford owners better follow up on the maintenance of their vehicles.

Clicking on a service on the timeline links to the ‘book a service’ page which allows users to schedule a date and time at their convenience.

3. Packages & Offers

Providing the best offers that go with the selected vehicle. Offers change according to the vehicle type, model, year of production and current condition.

4. Accessories

Displays relevant accessories that they may need for the selected vehicle. The user can click on an accessory to buy, or click ‘view all accessories’ which links to the ‘accessories page’.