UX Design / Research
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.
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.
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?
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.
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
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…
User Experience Mapping
We then worked through an user journey to determine how to best engage the customer and hopefully complete the conversion from potential client to paying customer
WEBSITE RE-DESIGN
WEBSITE Architecture
We then 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 what needed to be included in the UI designs.
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?
iolight
UI/UX DESIGN
Iolight is an invention idea that was created for the Inventure Prize, “an interdisciplinary innovation competition open to all undergraduate students and recent graduates of the Georgia Institute of Technology” (inventureprize.gatech.edu). I worked with a fellow student to ideate, research, design, and begin the development of a sleeping mask that makes the process of falling asleep and waking up as efficient and easy as possible.
BACKGROUND
Sleep is the foundation of life and the fuel for innovation and progress; however, only half of Americans get the recommended amount of sleep and this leads to reduced focus, mood, and efficiency. It’s an unending cycle – restlessness, inability to fall asleep at night, grogginess, and laziness in the morning. All of these problems reduce the total amount of time that we sleep.
Before entering the Inventure Prize, we already had an idea, as we both had sleep problems. Personally, I always had trouble waking up, while my teammate, however, always found it difficult to fall asleep. And while being at an institution, as sleep-deprived as Georgia Tech, we were came up with Iolight.
Iolight Sleeping Mask Model
MARKET RESEARCH
The sleep industry is a $20 Billion market, and has exploded exponentially in the past two decades. With the introduction of new forms of technology and lifestyle, the number of sleep disorders and sleeping problems have vastly expanded. This, along with unexceptional competition leaves room for pioneers to bridge these gaps and help the world sleep tight again.
Target Audience
Due to the scope of this project, we decided to target our first prototype at highschool/college students (ages 15-25). But ultimately iolight hopes to help all people who want better sleep habits, including students, workers, people with sleeping disorders, people with mental incapacities, people with depression.
*Sleep Graphic Provided By Vecteezy*
USER RESEARCH
After narrowing our target audience, we were able to more easily test to see if our idea would attract students, particularly the Georgia Tech students on campus. Willing Georgia Tech students were given oral-surveys to gather data on their sleep habits. We asked questions like the following:
- Describe the process of your sleep routine, from the moment you decide to fall asleep to the moment you get up.
- How long does it take you to fall asleep?
- How do you feel waking up in the morning?
- How many hours of sleep do you get every night? Is it enough sleep?
- Do you know if you have any known sleep disorders? If so, what?
“I WANT TO FALL ASLEEP FASTER”
As expected, we were not the only ones that would lay awake at night restless counting the number of hours wasted from not being able to fall asleep.
“I WANT TO WAKE-UP FEELING REFRESHED”
While not surprising, the majority of the users mentioned even after sleeping for hours, they woke up feeling groggy and smashing the snooze button.
“I WANT TO SEE MY SLEEP NUMBERS”
People really enjoy seeing visible progress. When we brought up the idea of being able to see their sleep statistics and see their sleep improve, many users agreed that it was a functionality that would definitely be helpful.
SLEEP RESEARCH
Then began the research for our actual product. Along with extensive web searching, we read through research papers, as well as asked neurologist and sleep experts for additional sleep information. After organizing our research we narrowed down the potential sleep concepts we wanted to implement in our product.
BRAINSTORMING SOLUTIONS
With the research and user in mind, we began coming up with ideas for how we wanted to solve the sleep problem. While we had plenty of ideas (i.e. Sonic Sleep Device placed near the user or Dawn Simulation and White noise device to install in the room), we decided we wanted to try to do something unique from the current sleep device market. We wanted to create a sleep mask that could include all 3 sleep concepts: Dawn Simulation, White Noise Stimulation, and tDCS
USER JOURNEY
And as we were wrapping up our initial research, we mapped out the user journey and kept it in mind throughout the entire design process, particularly to understand what interactions we needed to implement in our product. We wanted to make sure we understood the full user experience from getting ready for bed to waking up in the morning.
DESIGN
Mask Design Sketches
Taking inspiration for previously existing sleeping masks and VR headsets, we began sketching concepts for Iolight. The goal of this process was to come up with as many ideas as possible to later potentially prototype and test the ideas.
During our process of sketching the ideas, we continued to do user research to find out which mask seemed most comfortable to them. We discovered that comfort is quite subjective, as it’s difficult to appease everyone. However, we worked to create a design we felt would accommodate most users, and decided iterate on the design as we developed the product.
App USER FLOW
We began the app creation process by setting up a user-flow depicting how a a user would interact with our application to work their mask. The goal was to make sure we had a firm grasp on how a user would progress through the app and give us a guideline when creating the UI for the application.
App Design Sketches
As we are developing the actual mask prototype, we also kept the application that would control the mask in mind.
APP DESIGN MOCKUP
This prototype was created quickly to show the judges a quick idea of what the visual design may look like. The user would interact with the Iolight app to use the Iolight mask.
FUTURE PLANS
Currently, we are still in the process of developing the sleep mask. Our biggest development challenge has been melding together comfort and functionality. And as with any project, fundraising and budget is always on our mind, as developing a product is not cheap!
We are continuing to do additional research and development and hope to be able to provide updates in the coming year!
Iolight Sleeping Mask Model