UI Design

Alfa Romeo Jim Ellis

UI/UX DESIGN & Marketing Campaign

“Are you an ALFA TYPE?” is an interactive web experience created for Alfa Romeo Jim Ellis to attract new customers and create brand awareness.

INTRODUCTION

Alfa Romeo Jim Ellis is a local Atlanta car dealership, specifically the three models of Alfa Romeo cars. While working as a media/UI designer at Cumulus Media, Alfa Romeo Jim Ellis approached our digital marketing team with a task to create a landing page to help them promote test drives. They requested that we launch a small marketing campaign to bring more awareness to the brand locally. What started as a simple request to create a simple landing page, turned into a larger marketing concept.

DESIGN TEAM

The digital design team consisted of myself, another designer, and the design director. Together, we brainstormed and conceptualized the full marketing campaign.

My main role as one of the UI designers was to work through the entire user experience of the radio listener. I helped idealize the campaign concept, work through user research, and create mockups of the design.

USER RESEARCH

Understanding the Problem

For many customers who are looking to purchase a new car, Alfa Romeo is often times not a contender. One of the main recognized issues is the lack of brand recognition within the automobile industry’s stiff competition. When speaking to car salesmen, we discovered that most of the customers that step foot in an Alfa Romeo dealership know the brand and have a genuine interest. However, new customers that are unaware of the brand are quite rare, as the car brand is not as readily recognized.

Understanding the User & Target Audience

Our first goal was to understand who the customer is and in this case, the “listener” was. Since we were a digital team within a radio station company, the initial radio advertisement would play to all rush-hour drivers listening to our station, but we wanted to hypothesize ‘what type of listener would it most attract?’ Due to time restrictions, we were unable to conduct our own personal user research. However, after speaking to the managers at Alfa Romeo, we determined that there were 3 typical types of customers, and created user personas for each of them:

User Personas

John Hardy

John is a 39-year old design director that lives in the suburbs of the metro-Atlanta area with his wife and 3 kids. He commutes to work every day with the family car, but is looking for another car to take to work. Together with his wife, they are upper middle class, but still have a budget in mind!

Laura Vance

Laura is a 29-year old stay at home mom with 2 kids, married to her husband Nick. She has her own at home business, selling her famous cupcakes and is President of the PTSA at her kid’s elementary school. She needs a car that is spacious and safe for the kids, but also enjoys a little bit of luxary in her life as well.

Brandon Toshey

Brandon is a 25-year old software engineer that lives alone in an apartment in Atlanta. He has a need for speed and loves taking his cars to the racetrack, He loves showing up to the club with a flashy car, but does not want to have the car everyone else owns.

USER JOURNEY

Since Alfa Romeo had already purchased Radio advertisements for their business, we made sure to include this in the overall user journey. We wanted to work through an overall user experience to determine how to best engage the customer and hopefully complete the conversion from customer to test driver, and in turn… a sale.

Listen to the Radio

User drives during afternoon rush hour listening to the radio, and hears the advertisement for Alfa Romeo cars. Advert directs them to website.

Pain Points:
Driving through afternoon rush hour traffic; Remembering the website url.

Visits Website

User arrives at home & decides to visit and interact the website. If the user forgets the website, link to the page should be available on the station’s website.

Pain Points:
Remembering the website url. Having to interact with the multiple screens.

Schedule Test Drive

After viewing the car models, if interested, the user can schedule a test drive of the cars at the Alfa Romeo Jim Ellis location.

Pain Points:
Trying to figure out which day/time is available. Wondering if this is the only necessary task to schedule a test drive. Wanting additional contact/location information.

Test Drive

User receives email reminder about their upcoming test drive, and drives to dealership to test drive the car.

Pain Points:
Remembering the date of the test drive. Worried about having the correct address/time. Debating whether to still drive over to the location.

The MARKETING CAMPAIGN

We then began crafting the concept for the marketing campaign before we split off to create each element (radio ad & website). Since we were looking for a way to force Alfa Romeo into the potential customer’s consideration set, our goal was to create a solution to bring additional awareness to the brand and attract more customers by allowing them to interact with the brand itself.

Radio Advertisement
The radio portion of the user experience was a key factor in the user’s journey ensuring that they are directed to the website.

After researching the brand, we came to the realization that the brand definitely attracts a certain type of person, in which we soon came to name the “Alfa-Type.” Together, we decided that this concept is what we would hook an interested listener to view the webpage.

The following radio advertisement was written and produced by Design Director: John Petrini (Cumulus Media).

Interactive Website
We were also particularly intrigued by the 3 different personas and came up with the concept of matching each persona to the 3 models of Alfa Romeo cars. Inspired by the recent influx of dating apps and websites, we decided to give each car model its own personality to match to its potential owner. We believe a quick and optional initial interaction would create a memorable positive experience in the user’s journey to view the car models.

Visual Branding
The design director had a vision of taking a modern spin on a retro Alfa Romeo concept when the brand was first marketed. He believed that true Alfa Romeo fans would be able to appreciate reminisce back to the early days of Alfa Romeo. And by taking a more modern twist to a retro style, new customers wouldn’t have to understand the reference to enjoy the unique spin on a car dealership website. My partner and I put together some mood boards and created the following branding graphics.

INTERACTIVE WEBSITE

With the marketing campaign concept in mind, my partner and I then began the process of creating the webpage.

USER FLOW

We began the website creative process by setting up a basic user-flow depicting how a potential car buyer would work through the website experience. The goal was to make sure the client understood how a user would progress through the experience, as well as allowed us to clearly see each step in the process as we were creating the UI designs

Low-Fidelity WireFrames

With the marketing campaign concept in mind and thinking about how the user would best engage with our experience, my partner and I then began the process of creating ideas interfaces. We started with these low-fidelity mockups with the goal of putting any UI thoughts down on paper. We worked with the design director to discuss which ideas made the most sense to the potential customer.

High Fidelity Mockups

Due to time and budget restrictions, my partner and I were unable to create a 2nd low fidelity wireframe from our sketches. While we would have preferred to complete a basic round of user testing on an interactive digitized mockup, we transitioned to creating high fidelity mockups using Adobe XD. We used graphical elements from the previously created visual branding, and created our first digital mockup.

Note: The mockup featured here is the FINAL mockup design created.

Adobe XD Mockup

USER TESTING

Testing the Mockups

My partner and I did a few rounds of user testing with volunteer employees to begin the iteration process. Since the radio advertisement is geared towards working individuals, we thought this test group seemed appropriate. Together we gathered feedback that we were able to use to make improvements upon our mockup.

For example, we received feedback that users would be very tempted to skip the quiz if they are unsure how long it will take them. As a result, we made the following change:

Version 1

Users were tempted to skip the survey, as they were unsure how long it would take. Additionally, it was noted that the skip option seemed too small and unnoticeable; without seeing a skip option, users were tempted to close the page.

Version 2

We added a progress bar below the options to show that there were only 3 questions. We also increased the size of the skip options to allow users to skip to seeing all the cars if they were not interested in the quiz.

WRAPPING UP

Development

As my partner and I began the development process, unfortunately, due to unforeseen circumstances, the project was shelved until early 2020 and did not go into development. Moving forward, my partner and I decided to wrap up a few loose ends to ensure a successful re-launch in the future: documentation, file compilation, and an additional mockup for mobile development.

While this project came to an unexpected end, I am extremely pleased with the progress we made, and hope to see the campaign launch in 2020.

Interested in more information about this project?

Let's Chat!

Citi Private Bank

BRANDING & WEB DESIGN

Citi Private Bank, “the global bank – an institution connecting millions of people across hundreds of countries and cities,” came to our digital team requesting a new front-facing webpage, and a basic brand guidelines book.

INTRODUCTION

Citi Private Bank, is separate bank sector of Citi Bank that only provides services to wealthy individuals, including the world’s most successful entrepreneurs, investors, family offices, and lawyers/law firms. They pride themselves on “helping the world’s wealthiest individuals and families to protect and grow” their wealth, assets, investments, and financial planning.

While working as a media/UI designer at Cumulus Media, Citi Private Bank approached our digital marketing team for a proposal for a new home page for their current website.

DESIGN TEAM

The digital design team consisted of myself, another designer, and the design director. Together, we worked through expedited UI design process for Citi Bank Private Bank.

RESEARCH

“TRYING” TO UNDERSTAND THE USER

Our first goal was to understand Citi Private Bank’s (CPB) customers and target audience.

While the user base was well defined in CPS’s exclusive audience, interviewing or surveying potential users was rather impossible due to privacy purposes. We proposed an optional survey for user research be available on the current website for logged in users, but this option didn’t seem viable to CPB’s design representative. Additionally, since this was just a design proposal, the representative did not feel that it was particularly needed at this point in the project. As a result, the majority of our research was spent looking at competitor’s websites (i.e. Bank of America Private Bank) and trying to understand why their solutions work.

Additionally, we decided to take a different approach by conducting user interviews on the current website to determine the pain points of the current website with a different user group. We also collected additional research from speaking to CPB’s design representative.

Original Webpage Design

USER TESTING THE CURRENT WEBSITE

Creating a Tasked Based User Test

My partner and I decided to conduct tasked-based testing a user group that consisted of users ages 25+ that currently owns their own bank account. While this user group is not the exact target user group, we believed we would be able to gain valuable knowledge understanding their thoughts and emotions as they completed our test.

However, before we began, we needed to do our own homework. We scoured the current website, using the site map to try to create a website architecture of our own. We also wanted to note pain points we found ourselves hoping to see if the similarities matched with our user group.

Conducting User Testing

As we wrapped up our personal website research, we began conducting tasked-based testing on our user group. We were interested in discovering how each user’s experiences with the current design would differ from our thoughts.

Example Tasks:

Open an account with Citi Private Bank.
Where can I find CPB’s Market Views?
Explain to me who CPB’s target audience is.
Give me your initial thoughts when first scanning the homepage.
Give me your overall thoughts on the navigation of the webpage.

“TOO MUCH INFO TO DIGEST”
All of our users mentioned that there was an overload of information, making it overwhelming to look at or navigate. We noticed an immediate shock/frustration when users first opened the page.

“NO IDEA WHERE TO FIND EVEN THE BASIC THINGS”
During the user testing, we found that many users were unable or were extremely frustrated trying to complete seemingly easy tasks. We noticed that there was lack of predictability within the page.

“IS THIS A BUTTON OR A LINK OR NEITHER? “
We found users clicking on random bits of information just to guess and check if they were clickable. There was a lot of guess and check as we watched users interact with the page.

“I VISIT BANKING WEBSITES JUST TO LOG IN”
Banking, no surprise, is a very personal thing. Users mentioned that aside for the first time visiting the webpage, they usually will only use banking pages to access their account.

Information Architecture (Card Sorting)

Based on our user research, we determined that the biggest current issue with the website was the overall information architecture. As a result, we decided use an online application (Optimal Workshop) to launch a quick card sorting exercise to gather more data and detailed analytics about the user’s ideal information architecture. The goal was to give us an idea of how to lay out our webpage.

Participant A

Participant B

Participant C

WEBSITE RE-DESIGN

WEBSITE Architecture

Based on our card-sorting test and user research, we created a simple web architecture to map out how a user could work through the website experience. This step gave us a checklist and allowed us to clearly see ewhat needed to be included in the UI designs

Low-Fidelity WireFrames

With the research we gathered from the users, we set off to create a solution that addressed many of the pain points we discovered. Our goal in this step was to brainstorm ideas for the Home Page, seeing if we could simplify the UI/UX. We worked with the design director to discuss which ideas made the most sense to the potential user.

High Fidelity Mockups

Note: The mockup featured here is the Proposed mockup design created.

Adobe XD Mockup

PITCHING OUR DESIGN

After completing our high-fidelity mockup, we had our initial user testers review our new design for additional data for our next iterations. When a design was finalized, we put together new basic guidelines book to show the new visual treatment we created.

We packaged the mockup and brand guidelines, and sent our design proposal to CPB’s design representative. And then the waiting game began…

Update Nov 2019 (after I left Cumulus Media): Citi Private Bank finally responded stating they have decided to shelf their website design for the time being, but would most likely be hiring a larger design firm to put together a design.

Brand Guidelines

Interested in more information about this project?

Let's Chat!

Natural Body & Spa

UI/UX DESIGN

A website redesign was created for Natural Body & Spa to promote their specialty products, attract new customers, and provide a user experience to users visiting the webpage.

INTRODUCTION

Natural Body & Spa (NBS) is a local spa in Georgia, “dedicated to creating new and exciting ways to promote natural beauty and wellness.” While working as a media/UI designer at Cumulus Media, NBS approached our digital marketing team with a task to redesign their current website primarily to create a more usable experience for their customers and promote their products/services. They requested our team to not stray too far away from their current branding, but were open to modernize their look.

DESIGN TEAM

The Team

The digital design team consisted of myself, another designer, and the design director.

My Role

My main role as one of the UI designers was to research, create wireframes and the UI mockups for the new website. Additionally, I worked to understand how this web experience perfectly fits into the overall user journey.

USER RESEARCH

CLIENT NEEDS

Natural Body & Spa requested a proposal of the design mockup within a week’s time. This forced us to set a game plan in order to quickly iterate through this design, as efficiently as possible while still keeping the users in mind.

Step 1: Quick user research, just enough to understand who the users are and what their needs/expectations are.
Step 2: Work through the information architecture, conducting a few card sorting user tests.
Step 3: Create a website map to show the client and create the structure for our new design.
Step 4: Quickly sketch low-fidelity wireframes to brainstorm ideas
Step 5: Create high-fidelity mockups of the main site pages & mobile responsive view

Identifying Users & Expectations

In this case, we narrowed it down to 2 main user groups: (1) returning spa customers & (2) new potential customers interested in spa services. We identified what makes these 2 groups different and how to best provide a solution that caters to both groups.