Short UX/UI projects to exercise my wireframing, prototyping and communication design skills
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.
- UConnect Companion Application (Smartwatch UX/UI) - 2 Weeks
- UX Team Project Request Form Website Redesign - 1 Week
- Logo Design - 1 Day
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
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.
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.
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.
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
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.
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!
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.
Design a logo for the "applications/options" button for the steering wheel. This button will lead users to the navigation page on the cluster.
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.
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.