fca-ux-ui-blu.png

Shorter UX / UI projects completed during my time at Fiat Chrysler Automobiles

 

Short UX/UI projects to exercise my wireframing, prototyping and communication design skills

 
 
 

FCA Internship
Trend Analysis, User Research, UX / UI + Logo Design
Summer Internship with Fiat Chrysler Automobile's UX Studio
June - July 2016

During this internship, I worked on 3 short UX / UI projects and on my main project, designing a unique and holistic experience for the 2018 Wagoneer.

At the end of my internship, I had the opportunity to present to the UX team, Product Planning team and also to the whole design management team (which included managers from all design teams and the Product Design Department head, Ralph Gilles). 


Uconnect Companion App

 
 
 

 

Prompt

Create a companion application for the UConnect Guardian Phone application to be used on the smartwatch. The smartwatch version should be able to do most of the tasks that the mobile version can: lock/unlock door, honk, show fuel/tire air/electric charge level...etc.

A few considerations that I had to keep in mind while designing:

  • There are three brand languages that I have to find a balance between in my smartwatch interface design:
    • FCA's brand language: Some parts of the design should be easily switchable, since FCA has 5 brands - Fiat, Chrysler, Jeep, Dodge, Ram
    • UConnect's brand language (for consistency between the two companion apps)
    • Apple Watch's design guides/rules/templates (all apps on the watch should have similar interactions, for ease of use for the user)
  • Interactions should be clear, so it is fast, intuitive and becomes second nature to the users. 
  • Information should be split into different sections (e.g. car information, maps, remote for actions etc), but navigation should be kept simple.
  • Only the most relevant information should be displayed in the most easily recognizable way. 
 

The most recent version of the UConnect Guardian Application given to me to use as brand language reference.

 
 

research

I started off by listening to Apple's podcasts about designing for the Apple Watch, downloading their wireframe guides to see the canvas that I was working with, then I created a Pinterest board to collect UI design inspiration. I also benchmarked several other car companion applications from many different companies. Looking into the visuals, motions and interactions used on Android watches also helped to keep my mind open. 

 
 
 

Prototyping

Due to the fast-paced nature of this project, I created quick napkin sketches then went straight to creating my digital prototype on SketchApp. Sketching my ideas out first really helped, since this kept my designs fresh and new, rather than stiff and typical if I were to have just started off with using Illustrator. 

 
IMG_0727.jpg

Prototyping on SketchApp

 

 

Chosen Designs

I also created an interactive prototype on Marvel App.

  • Swiping up and down (pressing the up and down symbols on the prototype) on the landing screen will allow users to switch between vehicles.
  • Swiping left (press on the bottom right side of the screen) will lead users to the maps page, and swiping right (press on the bottom left side) will lead users to the car tire and charge levels page.
  • Force touch will bring up the remote control functions, and the heart button on the maps page will reveal all the places that you have favourited/frequent.
 
 

 
 

UXD Request Form Re-design

 

Prompt

Re-design the UX Office's Project Request form website so that it is more intuitive, less tedious to fill out, and communicates it's instructions to users better.

This project request form includes the form itself and also an email framework used for replying. These two things should have a consistent design language, so that users receiving the response email can quickly and intuitively understand the context of the email.  

 
The original project request form and email reply. The problem with this is that many people would not read the introduction or notice the submission process instructions. This caused a lot of miscommunications and many people sent several extra emails to the UX team asking them if they have received their request or not.

The original project request form and email reply. The problem with this is that many people would not read the introduction or notice the submission process instructions. This caused a lot of miscommunications and many people sent several extra emails to the UX team asking them if they have received their request or not.

 

 

Prototyping

Some of my quick napkin sketches and system sense-making maps. I created the digital prototype screens on Illustrator, and mocked up the interaction on MarvelApp. I then worked alongside the UX Team's developer to recreate my visual mock-ups in code.

My design is currently being used as the primary form of communication from other teams to the UX team! 

 
For the first few I made on Illustrator, I took inspiration from the FCA work site's landing page. Towards the more final designs, I decided to look at their sleek vehicles in combination with websites with simple and easy-to-understand forms such as AirBnB. 

For the first few I made on Illustrator, I took inspiration from the FCA work site's landing page. Towards the more final designs, I decided to look at their sleek vehicles in combination with websites with simple and easy-to-understand forms such as AirBnB. 

 

 

Chosen designs

I took inspiration from timelines, and how they usually successfully brings people through sets of information in chronological order quite well. I wanted the form to be as intuitive for the user as possible, so I reduced the text on the original design down to simple phrases like "Tell us about your project!".

From clicking on the first orange box, the website will automatically scroll down to the form section, where things auto-fill themselves for the user depending on which options they choose (e.g. if they pick UXD under department, the manager section will auto-fill as Brad Gieske). Once they click submit, the website will autoscroll again down to short and friendly action phrases.

 
The email reply framework focuses on having the accept and decline buttons as the main focus. This is so that busy managers can easily respond to the email when they receive a request. The body of the email includes a short description of the project, project name, date and people in the project. This makes the email easy to understand and fast to skim through. The email framework should also be mobile friendly.

The email reply framework focuses on having the accept and decline buttons as the main focus. This is so that busy managers can easily respond to the email when they receive a request. The body of the email includes a short description of the project, project name, date and people in the project. This makes the email easy to understand and fast to skim through. The email framework should also be mobile friendly.

 

Logo Design

 
 

 

Prompt

Design a logo for the "applications/options" button for the steering wheel. This button will lead users to the navigation page on the cluster. 

 

Initial Sketches

I decided to list prompt words for me to use as inspiration for logo designs. The function that comes from this button to view all the different menu options for the cluster, and the motion graphics of it looks a little bit like something dividing into many different parts, or something slowly exploding. 

 

"options", "expand/explode/multiply", "divide"

"transition", "home/apps", "details/more"

 

 

Chosen logos

I personally preferred the more abstract logos like the one on the top left, however if I were to look at these from a user's point of view, something that looks more familiar like the list one in the center, or the home ones on the bottom row might be more intuitive.