High Fidelity Prototype

High fidelity Wireframes

After I finished the paper prototype I created the first version of the hight fidelity prototype. The high fidelity prototype contained real content and was supposed to as detailed as possible so I could received feedback on the real look and feel. Just like the paper prototype I elaborate the whole flow from log-in to thank you.

‌Log-in

‌The log-in screen got a very clean design. To focus on the purpose of this frame, I only used the log-in form. The screens consists of the PSA logo in center of the fame, a short copy (e.g. welcome at the EBP) and the input fields with log-in button. Users of the Employee Benefit Program receive their log-in data from the administrator of their company, whenever they the forgot their passwords, they can click on ‘forgot password’ below the log-in button.

‌

Landing-page

The landing-page's purpose is to inform the user about the Employee Benefit Program. I used different section to describe what the employee benefit program provides, and also what the benefits are when users want to sign a private lease contract.

Modeloverview

‌As PSA groupe consists of three brands- Peugeot, Citroën and DS- the model-overview has three layouts. The user is able to choose a page with a brand per page, or choose for a page with all brands combined. At the top there's the title of the brand and below the models. A user suggested this feature when I conducted a participant observation [See Participant Observation - Brand option] Each model tile contains of an image, a title, from price, a discover button and a configure button. The discover buttons leads to the product-page, and the configure button directs the user into the configurator. These reason for these two options, occurred from my research on the MBTI-score. The MBTI-score showed that the different types of visitors have diverse interests. One visitor would like to be informed very well, and the other would like to jump into configurator instantly. [See Literature Study : MBTI-score]

Productpage

The product-page's purpose is to comprehensive inform the user. To do this, I included big pictures of the car in action, described the cars most important features, and added multiple call to action buttons to persuade the user. Also to create curiosity, I include a colour picker functionality so users can already explore the possibilities before configuring. Ultimately, there is a review section with reviews of other users. The sections show how many stars the user gives the car, a picture of their configured car and a small description. According to Cialdini’s social proof, this persuade users to take action. [See literature study : Persuasion #8].

‌

‌Version Overview

Whenever a user chose a model, they enter the configurator. The first step is to choose the model version. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #1] Throughout the participant observation I found out, that users found it really confusing to choose a transmission form and fuel kind, which functioned as a filter for the versions. Because of this, I chose the version option to be the first step in the configuration. Within this step users, can filter on fuel and transmission beforehand. [See participant observation - version option] As every model at least have three versions, the user needs to be able to see the differences between them. The model-overview provides the most important specifications per version. If the users wants more insights, they can compare the version with comparison feature. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #6]. Additionally, the model-overview provides clear images (to show differences between models), the model title, the price range, and a configure button.

Configurator

The user had chosen a car and version and is now ready to start with personalising the car based on the user preferences. To indicate in which part the user is at, the breadcrumbs provide clear indication. One thing I wanted to ensure, is the constantly displaying of the car. Users are easily confused, and since configuring a car takes a lot of decisions, I wanted users to be able to see their adjustments. Not only one angle of the car is provided. The user is able to switch between three different angles and also to change the outside view too inside. In this way, all the changes that have been made are easily accessible.‌Right below the car image, the mileage and duration are constantly accessible as well. During the participant observations, I found out that user like the option to change their contract specifications. [See participant observations: price indication & summary] The section at the bottom is the live price indicator, which is also constantly displayed as users don't want to be surprised with additional costs.[See Literature study:21 Best practices for ‘E-commerce Configurator(s) #7] The section shows the title of the car and the price based on the user's preferences. In the middle, there is an option to unfold the whole summary.‌The section on the right contains all the possible options to configure. This is only part of the interface that is scrollable, in this way I can guarantee that the essential information (car & price) are always displayed. On mobile devices, the upper part (car, title, price) and the request and next step buttons are fixed as well. The first options to configure are the colour and wheels to start easy. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #1] Every possible option contain the price and a short explanation, if this explanation is not clear enough, the user is able to click a floating information bubble to read more. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #8] After the user has chosen their favourite options, they can click on the 'next step' button at the bottom of the options panel. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #3] Ultimately, the user can skip certain options to configure, only, some options are required to configure. The user gets a notification which option they need to configure and are afterwards able to skip the rest. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #2]

‌

‌

Configurator Summary

Within the configurator, the user is able to open the summary mode. It is accessible from the section at the bottom of the configurator. The summary shows the configured car, the title of car's version, the most important specifications, and all the configured options. These options are all individual changeable from the summary.[See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #4] The user can click on the specific option they want to change, and the configurator brings them to that option. Also, from the summary page, the user is able to reset the configuration. I chose to add this functionality in the summary view, because it is a crucial action to perform and therefore should not be accessible easily. [See Literature study: 21 Best practices for ‘E-commerce Configurator(s)’ #5] Finally, there is an option to save the current configuration. By clicking on the ‘save configurator’ the user gets the option to send the configuration to their e-mail.

Summary (end of process)

Comparable to the configurator summary, the summary at the end of the process displays the configured car, title, total price, and all configured options. The summary page at the end of the process is added to have clear last overview of the configured car for the user. After this, the user starts filling the form to request their car. This summary should provide the last overview, at which, users can take time see their selections.

Request form

The user only a fews steps from signing the contract. The last thing to proceed is the request form. The current request form made use of folding accordions which had a good user experience during the participant observations. [See participant observations: contact form user 1] When filling in the request form, I added the configured car at the top, so users are still able to see what car they are buying. Within the car section, I added a 'change' button, which brings users back to the summary page. From there, they can adjust their configuration. Additionally, one user gave the tip to add a mini-map to select the nearest dealer. [See participant observations : tips and remarks]

‌

‌

Thank you

To give the user a warm welcome, the thank you page provides all kind of nice information. The current thank you page lacked every form of information and did not feel trustworthy. Therefor, in the new the design I added information to enthuse the user. [See participant observations : Tips and remarks] The thank you page now consists of, video's, explanation of special features, user experiences & ratings and useful links and contacts. Finally, to create curiosity, I tried the write interesting copies like Robert Cialdini's curiosity gap describes. [See literature study : Persuasion #5].