All
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
Laura Vance
Brandon Toshey
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.
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
USER FLOW
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.
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:
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?
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.
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.
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.
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.
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
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.
Note: The mockup featured here is the Proposed mockup design created.
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.
Interested in more information about this project?
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.
Users will expect to be able to…
Low-Fidelity WireFrames
With the research we gathered, we set off to create a solution that addressed our user’s goals & needs. Our goal in this step was to brainstorm ideas for each 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
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.
Note: The mockup featured here is the Proposed mockup design created.
Interested in more information about this project?
Dekalb County Police Department
WEB DESIGN
The Dekalb County Police Department requested help with recruiting potential police officers to join their forces. With the help of on-air commercials to spread the word, a simple landing page was need to see benefits of the job, find out more info, and apply online.
Navy Blue
#0E2155
White
#FFFFFF
WEBSITE MOCKUP
A basic mockup was created in Adobe XD.
FINAL WEBSITE
A basic mockup was created in Adobe XD.
Interested in more information about this project?
United States Air Force Academy Military Ball
GRAPHIC DESIGN
Created the United States Air Force Academy Georgia Military Ball Logo.
Interested in more information about this project?
The Stone Grill
GRAPHIC DESIGN
The Stone Grill, a Korean BBQ restaurant in Duluth, GA requested for marketing/promotional materials for their recent rebranding. I created a magazine ad spread for the Atlanta Magazine, a social media graphic, and a infographic placemat. The Stone Grill owner’s vision was to share his passion for quality meat.