Client
Bonzah
Skills
Deliverables
UI/UX design
IxD design
Desirability testing
A/B testing
Prototype
Agile planning
Presenting
Visual competitive analysis
Style tiles
Prototype app
Prototype marketing site
Style guide
Process
Research
Design
Test
Iterate
Test
The client
Bonzah
Bonzah is a startup that provides car rental insurance for renters in the US. Prior to Bonzah, the founder and his companions ran a car rental comparison website for 12 years. The biggest complaint from those users was the high price of car rental insurance. The solution for this was a stand-alone third-party insurance app that sells insurance for a cheap price. Three types of rentals can be covered by Bonzah:
-
Docked rental cars like Hertz
-
Undocked carshare like Zipcar
-
peer to peer similar to Turo and Getaround
The stakeholder for this project was Steve Sherlock, the founder, and CEO.
Most Bonzah users find Bonzah on comparative websites, where they fill in their destination, duration of the trip and residence. Bonzah does not need to know where the car is from. The app is a vetted process — finding the right insurance coverage for the user. Bonzah insures the person for the duration of their car rental and does not ensure the car itself. As long as the user doesn’t violate the terms and conditions: the user is older than 18 years, the car is worth less than $40.000, and the trip takes less than 45 days.
What is the problem we are helping to solve?
Our team, Wig, Elizabeth and I, a UI Designation team, were asked to design for the already existing MVP prototype, designed by a Designation UX team. Given that almost half of the users are mobile users, the app is intended to accommodate those users with easy accessibility and a streamlined process.
The challenge for this project was to design the UI for the app that could function as the sidekick for the Bonzah website. The UI should be in line with the existing brand, but not mirror the website.
The design solution
Analyzing the existing website
By analyzing the website, I became familiar with the existing look and message of the brand. Bonzah did not perform desirability testing on their current website. I was excited to test my future designs, convinced that adding value this way was important for the success of the app.
For the app, I planned to use colors and photography in a more consistent and balanced way to avoid confused users. The excited and carefree photography theme is in line with how a user would want to feel after purchasing a car rental insurance. I was curious how this mood and feel was going to resonate with our testers. And like the website, the app needed to have a clean, transparent and glanceable layout, suitable for users on the go looking to quickly buy insurance.
The app needed to differentiate from the website with easy glanceability and a consistent clear layout when it comes to color use, photography and overall feel, to ensure a fast user flow. I was excited to other than reviews used on the website, establish trustworthiness with fonts, photography, colors and a very clean and thoughtful layout.
Takeaways
Color combinations
The green accents give a certain freshness to the website as a whole, complementing the gray and the fuchsia well. The Trustpilot and the Nerdwallet green aren't part of the color palette of the website. Curious how these color combinations are going to test with users.
Glanceable screen layouts
The first part of the webpage is clear and glanceable which could work great for the app, to ensure a fast user flow. Clean glanceable screen-layouts is a good objective for the Bonzah app. The general look and feel is fresh and clean, because of the use of negative space and the visual hierarchy.
Clear icons
The icons are clear and understandable
Font use
A rounded sans serif font is in line with the Bonzah brand and would work well for the app as well.
Opportunities
Inconsistent use of colors
The current website shows an inconsistent use of colors. The first part is predominantly white while the 2nd part of the page has a dark grey filter overlay on pictures. An opportunity here for the app is color dynamics consistency, making the layout recognizable for the user.
Trustpilot
Opportunity: The Trustpilot review section is a prominent feature of the website. I wanted to find out the best way of showing reviews. Navigating the page around this section was confusing because the page as a whole stops scrolling and you unexpectedly and unwillingly start interacting with the feature.
Consistency in subject photography
The subject photography could be more consistent. From driving in a convertible to high up in the mountains, back to an ocean view. This shift can be confusing because of the inconsistency.
Target audience
For the target audience, Steve did not want to focus on a specific group within his broad target audience. In the product briefing, he let us know he also wanted to focus on small to medium businesses and enterprises. Even though we were not focussing on one group, we could clearly see some trends. The majority of the users, 60%, is between the ages 25 and 44. A big part of this group consists of the so-called millennials that are said to be drawn to the sharing economy where car ownership is in decline. These users can be seen as budget conscious. Another significant statistic was that roughly 65% of all users are male. And that 15% of all users are return users, representing 64% of all revenue. It was good to know about these majorities, so I could create a more effective design based on these statistics. A narrow majority of users use IOS which could be the reason why we were designing for iOS first.
Analyzing the wireframes
The UX team provided us with wireframes which were a solid starting point. After we each analyzed the wireframes we came together to talk about a communal user flow for our final design. We selected the screens for a communal user flow for our final designs. A quick return user flow for the MVP prototype, which are the most trafficked screens.
The design principles composed by the UX team gave me a good insight into their design decisions
Password confirmation is added
Add Sign up and change it into a link
Delete Sign up button
Change icon into menu icon
Delete chat icon, this function is not a part of the MVP.
Improve visual hierarchy with type, cards, negative space
Good glanceability is important for a fast user flow, considering the user will probably purchase a Bonzah insurance while traveling. The screens have a simple, straight forward and clean layout. A takeaway from our meeting with the UX team was: Users value the flexibility of booking last minute, and users want a competitive quote fast. Most users find out about Bonzah on a desktop, and a fast user flow is a priority for guiding users from website to app to buying their insurance.
With a good visual hierarchy, and the use of negative space I can give the user a good overview of the complex information. A friendly, rounded font can be used to exude an approachable friendly feel. Another takeaway was the existence of distrust among the users because the Bonzah insurance policy is so cheap. That’s why a UI that looks reassuring and comforting is important.
The design for the app should be in line with the Bonzah brand, but not a copy of the website and the web app. By using different colors, but creating the same feel of the website. This app is catering to all ages, but specifically to return users, and these users they found, value a personalized feel for the app, which instills trust.
What did these takeaways mean for the beginning of the project?
The UX team did not interview return users. Since return users represent 64% of the revenue it was important to be able to test on return users in the coming sprints. Another good thing to know was that the founder never tested the Bonzah website for desirability.
Up until now, I was used to designing websites and apps for a specific user persona. This was a big tool for me in explaining my design decisions. I was a little caught off guard by the lack of a user persona. After the kickoff meeting, I found out the pros and cons of using a user persona in the design process.
The screens with the most text needed the most revisions when it comes to glanceability. The login screen needed the most revisions when it comes to functionality. These changes will all help in achieving a faster and more intuitive user flow. I sketched out the changes we made to the wireframes and we started preparing for our very first client meeting.
Kickoff meeting
During our client meeting, we confirmed the scope of the project and set expectations. During this meeting, we focussed on getting a clear visual direction from the founder apart from what he already had given us. The founder deemed it important that the UI was going to make the user feel like Bonzah ‘is there for the user’. “Bonzah is the single source of trust for them.”He wanted a simple, clean and fast visual design for Bonzah, a state of the art app. I asked him about how he visualized a state of the art app. The app should feel innovative and modern, should not look like it’s trying too hard, it should exude authority, and it should not look like the big insurance giants.
After the client meeting, we got feedback from our creative director and these are my takeaways:
-
Personas aren’t always necessary. Sometimes it can give the wrong notion, the persona can be taken too literal by designers. I think it might be too early to carve out a persona since the company is two years old. Making a persona might lead up to assumptions.
-
Another takeaway for me is structuring client meeting: Have the questions structured in different sections and communicate that with the client beforehand. Questions about how Bonzah works as a business, branding questions, visual questions, and activities.
My thoughts about my potential visual direction after the kickoff:
-
Bonzah is modern– The app should look current, state of the art and not like the big insurance dinosaurs.
-
Bonzah is reassuring– personal, Bonzah should give the user the idea that they are being taken care off.
-
Bonzah is fast– a simple, clear and clean layout would work best for a fast user flow. The layout should be informative and clear, to again, ensure a fast user flow.
-
The Bonzah app is mostly going to be used by return users, marketing or a tutorial in the onboarding of the app is unnecessary for the MVP.
Narrowing it down
Our team came together to analyze direct and indirect competitors and out of category inspiration.
Allianz insurance | Direct
Go insurance | Direct
Lemonade | Direct
Fair | Indirect
Maven | Indirect
Sweetgreen | Inspiration
Colors: Bright colors are used to draw attention, mostly a color palette of two with a white background
Negative space: Negative space to emphasize certain elements like CTA's is used by all apps
Typography: A friendly, rounded sans is mostly used. Type is also used to exude authority, ING or for a personal touch, looking at Lemonade which uses a script font, or Sweetgreen who uses casual handwritten details.
AI/ Hierarchy: Complex info is broken down into one task per screen. A visual hierarchy is established by use of fonts.
IxD: CTA's have a strong affordance. The younger the target audience the more dynamic the micro-interactions seem to be. Animated feedback after transactions is common as well.
Tone and voice: Simple, informative, straight to the point language is used. Go car insurance uses an extremely casual tone; "crazy fast insurance". Since Bonzah's target audience is very wide this tone might not sound appropriate to some users.
Imagery: Some apps use images and others illustrations, and some a combination of both.
How can Bonzah differentiate while keeping the target audience in mind as we;?
60% of Bonzah’s users are between the ages of 25—45. Designing for that group seems the most obvious thing to do while keeping the app accessible and easy to understand for all ages. (Link to subtle micro interactions).
-
Bonzah can differentiate by using a different color scheme than the competitors.
by emphasizing on the comforting and personal aspect. Comforting by using a comforting color scheme like Go insurance (outbound link to website Go insurance). And adding to the personal aspect by using a handwritten font or by use and a personal tone and voice.
-
More people are going to use car sharing apps. With that comes car sharing insurance. Because Bonzah is current and looking towards the future, it is good to give the app a current feel and a more modern than conventional appearance.
-
Bonzah can differentiate by having a different visual approach than the insurance 'dinosaurs' who go for an older, more conservative look and feel. With a well thought out clean layout that includes state of the art features like a chatbot and subtle micro-interactions.
Visual direction exploration
With the new insights from the client– the UX meeting and the VCA, I started my visual exploration by designing three diverging style tiles to test with our users. In our first round of user testing, we tested our style tiles by the look and feel. We used two methods to find out what emotional reaction the testers had by seeing our style tiles. We did a gut test to find out initial reactions of our testers. They were able to pick keywords and elaborate on these afterward.
Our first group of users consisted off three females and two males: age range: 28—74, from which one is a return user. Four testers fit the narrowed down target audience from 24—45 and one user is 74 which gave us great insights for older user groups.
1
“This reminds me of a friendly company that isn't trying to be like the big corporate insurance companies, more down to earth. Not a bunch of old guys running around behind the scenes”. – Luis
My first exploration was the concept of an exciting yet comforting modern feel (pastels and bright greens, I was inspired by the Nerdwallet green on the Bonzah website), the idea of having peace of mind after purchasing a Bonzah insurance. Rounded shapes and a rounded font like Comfortaa help convey the comforting feeling. I wanted to explore a more unconventional direction with the Bonzah target audience from 24 to 45 in mind. Also inspired by Steve's wish of having the app not look like the big insurance dinosaurs. That's also a reason why I chose a serif font for a more unconventional feel. Black and white pictures to maintain a consistent design system when it comes to colors. Glanceable screens with 1 task bu use of negative space. photography wide open spaces a feeling of comfort and freedom. A clean feel and clear clean icons.
2
Here's where your tiles need to be added, and remember to explain them thoroughly. Describe how you came up with each visual option, how the options differ from each other, and how each one addresses the problems you saw with the UX work, helps as many users as possible, and incorporates the design principles. Don't worry about describing every detail of the tiles themselves; focus more on why you created them.
“This looks playful, carefree...a friendly company that is not trying to be the big old corporate insurance companies...inviting for everyone. – Charu
Inspired by Sweetgreen and Lemonade I wanted to create a personal vibrant feel with this style tile. The Ux team emphasized that return users value a personal feel which instills trust. A handwritten font and handwritten doodles help with that. Since this app had to be a sidekick but not the same I decided to leave the Bonzah fuchsia out and opt for two other vibrant colors, I picked 4 different colors, with the thought of maybe leaving the green or purple out, depending on user tests. for an exciting feel which is in line with the bonzah brand. combined with the grey and the blue combination for a more authoritative feel. Open space road black and white photography. Again a simple clean and clear layout for a fast user flow, which was a takeaway from our first meeting.
3
This was the first time I performed desirability testing on style tiles I learned that it will help the test subjects give better feedback if they get an explanation of the concept of a style tile beforehand. Especially our older user had a hard time understanding what he was seeing and in what context he should see the UI elements.
After user testing, we gathered all the data and synthesized it by using an affinity diagram. The insights we got from our first round of user testing are:
-
Users appreciated details that felt friendly and inviting. For some this was unexpected and it made them feel taken care off.
-
Upfront information bolsters trust in the users because they feel the company has nothing to hide.
-
Bright colors, energetic photos, playful illustrations are valued by users.
-
Not too much information at once, better yet one task per screen, for better glanceability and a fast user flow.
-
Statistics on the webpage help with the credibility of the brand. Also, comparable statistics were found to be user-friendly. It saves the user time and is appreciated.
-
Clear policy information. No fine print, asterisks, and info that seems to be hard to find.
With the research, we've done from the start and these test results, we craft the following design principles.
“Insurance is something that is kind of serious because it is an important thing. It's something you need. At the same time, it is not something life threatening, like an emergency.”– Brittany
This theme was inspired by Bonzahs gradients in the logo and the feel of driving while the sun is setting. With a clear and clean layout, I wanted to emphasize on the CTA with a prominent and clear CTA button. Subtle gradients and the colors of a sunset should feel soothing and down to earth feel with the feeling of open space and pictures of people on the go in their rental car.
Bonzah is your buddy
Budget-conscious travelers are concerned about the price of insurance and know the value of customer service. Appearing knowledgeable and friendly makes users feel that the company cares for them and that they can afford the product. Bright colors, friendly language and personalized touches will build connection with the customer and reassure them they’re in the right place.
Upfront information
Insurance shoppers are wary of being taken advantage of and look for honesty. Clearly prioritized policy information builds trust. Simply structured and easy to read information will reassure users through the quote and purchase process. Negative space and clear type will make complex information digestible.
Bonzah on the go
Traveling customers purchasing insurance on their mobile device need to complete tasks right away with minimal distraction. Centralized, bright CTAs and one task per page will guide users to complete their goals. A clean, consistent layout that’s glanceable will give them confidence that they can complete this via mobile without missing details in a hurry.
Having these design principles crystallized narrows down my vision for the look and feel of the application and website. A clear transparent open look and feel, made for users on the go, which means, easy glanceable one task screens that help users reach their goal as soon as possible. Feels like I am headed i the right direction.
Moving forward / Test 2
One style tile was slightly favored by the users, but not by a landslide. With the founder's feedback, the scale tipped in favor for style tile 1. The runner up is style tile 2. Users connected the following words to style tile 1: modern, friendly, tasteful, informative, personal, inclusive inviting for any kind of customer.
Now, with a chosen design direction I was ready to build out the wireframes given to us by the UX team. For our next user test, we planned to have two initial app screens and a marketing website ready. We chose the 2 most essential screens to test.
There was one little hurdle. All of this should be ready the next day because we had user tests planned for the next morning. After coming home around 10 PM, I ‘cranked out’ a website and two app screens I was actually happy with. For me, this was a good lesson in just doing and iterating later on. For the Policy summary, I used to cards to organize the info into digestible sections. And for the website, I chose to use the rounded shapes for the hero image cut off. Both the website have a comforting feel, with an exciting fresh green touch for the CTA's.
Our testers the next day consisted off: Three females and two males in the ages of 19—45. One person was a return customer who also tested in our first round of desirability tests.
Underneath you can the selected app screens and the marketing website, before and after iterations:
- Hover over images to see the previous version -
POLICY SUMMARY
GET A QUOTE
Opportunities
- The picture card is too curved
- The picture is not appropriate. The overall feel reminds me of a life insurance website.
- CTA is clear, expected actions are clear
- The color scheme used feels comforting
POLICY SUMMARY
Opportunities
- Flag not necessary
- The Bonzah logo is out of place and distracting
- The ook of the app and website are consistent
- Users get a good overview of the policy
- The meaning of the icons are clear
MARKETING WEBSITE
Opportunities
- Green CTA color too harsh for 2 users --> I opted for a darker green
- The black and white photography with the 60's van feels too old fashioned. --> I Used a picture of a newer car with an exciting feel in line with the existing Bonzah branding.
-The website as a whole looks one dimensional --> I added shadows to the cards, top navigation and the line underneath the picture
-" The Domain font is distracting." --> I chose to leave the Domain font out for a more modern look and to increase readibiliyty and glanceability for a faster user flow
- The meaning of the icons are clear
- The information broken down in 3 boxes gives a good overview
- The CTA buttons are clear, and with this also the goal of the website.
- The hero image feels epronsal and communal.
Our common takeaways after our 2nd desirability test were:
-
Vibrant colors make users feel welcome, energized, and engaged.
-
Users want a clear, direct connection to the idea of cars and travel when it comes to using imagery.
-
Some users were comfortable with less conventional design elements, such as illustrations or retro photos, while other users preferred a more traditional approach.
-
An opportunity to explore all ideas, and combine traditional with less conventional elements to find the right balance.
Good synthesis of takeaways, but go further. Describe what all of these meant for your next round of design, and how the feedback helped you understand Bonzah or its users better. Client feedback and wishes, user feedback and design principles, own reserach target audience.
Takeaways
Takeaways
Takeaways
GET A QUOTE
MARKETING WEBSITE
Refine and build / Test 3
After the second desirability test, I got to better understand Bonzah and its users. For finding a balance between conventional and less conventional, I decided to change the black and white pictures for colored ones. I liked the concept of telling a story through photography, with a clear concept of feeling carefree an adventurous after renting the car. A personal touch is added with the line; " OK Chris, let get you started" and a little-handwritten scribble at the end of this sentence. I added a filter in the CTA color for a consistent feel of photography and used the Bonzah fuchsia to make the app feel on brand. I was curious how users would respond to these screens.
I felt like I was moving a bit far from my initial style tile direction, so I also made some other screens with the 'comforting' color schemes. I found out that custom photography would be most fitting for a project like this and that finding the right pictures is quite hard, so I took a quick side route to illustrations because that might work very well for a consistent design system. I snugged the illustrated screen in but did not test it on enough users to proceed with it.
I wanted to test out illustrations because I noticed how hard it was to find the correct images online. Most images I found were stock photos, and and they usually looked pretty stock. On the other hand, With the right use of photography that personal feel can be created, which is so important for the trustworthiness of a smaller insurance company.
We had five users between the ages 28–36, from which four were remote tester and one in person tester. Four females and one male from which one was an existing bonzah user. Same as above: Use each user's name, age, and experience with Bonzah or similar tools.
For this desirability test we used three test methods. The methods were A/B testing, a visual gut test and prototype testing.
Step 7 (tested screen)
Step 6
The simple and clean layout was appreciated by users. One task per screen makes it easy for users to use the app the go, and reach their goal fast. No problems with the color of the buttons. Colors felt appropriate. (This darker shade of green was picked over a lighter shade of green in AB testing by 3 testers). The feeling of going on an adventure felt appropriate and good for an insurance app to our testers. They especially liked the human, carefree element in the second picture, as well as the relatable in-car perspective. Car and hand image.
To add a personal touch, added a scribble that wasn’t well received, (Hi road car insurance) felt a bit out of place. Filter felt a bit dated, felt like the Instagram filters from years ago. The overall feel of the app felt boring. This is what they expected from an insurance company. Picture doesn’t feel personal to some users. No in-car perspective and people in the picture that feels relatable. I tested this new illustrative design and users felt that the illustrations were cheesy and not serious enough. (This was tested on 2 users in AB testing).
My general takeaways after the 3rd test are that opinions differ about what is to be expected from an insurance company when it comes to UI. Should the UI for insurance companies "look boring" as one of the testers said, should it attract attention at all? Should it feel serious? What is the balance between traditional and unconventional?
For Bonzah the UI should look and feel down to earth yet exciting, and authoritative yet personal, with a state of the art feel.
Policy summary
Marketing website
A focussed visual direction for Bonzah
Our users steered my designs away from the unconventional color schemes and black and white photography. I kept the 'boring' picture of the car but opted for full picture splash screens and modern looking form fields for the app. Looking at the target audience, 60% male and between 25–45 I feel my designs appeal to them and a broader audience. I made the app feel relatable and personal with welcoming taglines and -in-car perspective photography.
With the insights from this user test, I proceeded to work on the final version of the prototype. Users liked the human element in the pictures, a picture of a person from an in-car perspective should be the way to go. so I decided to emphasize that. With my next iterations, I decided to start from a zoomed out perspective, the road and with every next screen make it more personal. The road, the car and then a positive picture of a content driver behind the wheel. I choose these pictures carefully with the target audience in mind. Our broad target audience responded well to the picture of the car and seeing persons behind the wheel or having an in-car perspective. To keep a consistent look of the app, I opted to have the first image partially come back in the policy summary and the check out screens. With this design, I wanted to adhere to Steve s request of a State of the art feel, but a design which still speaks to a broader target audience. Also in line with the Bonzah brand, exciting, with a feel of adventure. And with this, I believe I balanced the unconventional with the more traditional insurance app feel.
Final design solution
Design system / style guide
Feedback on final designs
Steve was pleasantly surprised to see the drastic changes we made every single week, and he was happy with our designs. He liked the layouts of screens and thought they give a good overview and clear tasks. I got an email from Bonzah's developer requesting for assets and Steve had the following to say:
"Audrey was part of the design team that worked on our iOS/Android app UI project. I found Audrey to be very articulate and lateral thinking in her approach and UI proposals. We ended up using several components from her designs, and I found she had a really good eye for fitting imagery to the transaction context. I believe she'll grow into a very capable and value-adding designer! Best of luck Audrey!"
– Steve Sherlock, CEO Bonzah
"Audrey and I worked together on a month-long project at Designation and in that time she impressed me with the range, quality and speed of her design work. Audrey was able to think critically about client goals and user needs, execute and evolve concepts based on feedback and deliver a strong final concept. Two thumbs up!"
– Patrick DiMichele, creative director Designation
Final thoughts
When it comes to hard skills I learned to make a simple clean layout with grids, and how to create a good concise design system. For this project, it was important to make a user interface as simple and clean as possible. I learned how to make a screen with heavy information look understandable and glanceable. I learned to make fast turnarounds after doing thorough research and knowing the clients' goals to quickly start the testing and iterating process. I learned to design with the color fuchsia. I went for a complementary color for the CTA's which was thoroughly tested by the users. Keeping accessibility in mind with my color use so the CTA's would have the same affordability for color blind people.
After my first experience working on the WeWork project, I learned about my own process. The more time I have for iterations, the better the end result. So doing thorough research, with the visual competitive analysis being my favorite part of the research and with that research, balance the clients' goals and design principles and jump into designing right away. With that synthesizing and mixing in test results into the final product.
I started with a style tile that could not be farther away from the final product. In this case, the client was closely involved and I could explain my design decisions backed by test results for a better-designed product with every sprint. I learned that photography is not the easiest way to create a concise design system, I quickly tried illustrations, but because of time constraints I could not iterate and test on those. I learned how to make a 'sidekick'. for an existing website. Using a different color scheme, but by extracting the look and feel of the website, I made the app still feel brand– and subject appropriate.
I learned how to find the right balance when it comes to traditional and unconventional design for an insurance app.
Wigmor and Elizabeth were sharp, fast thinking team-mates and I am happy to have worked with them. We divided some tasks per team members strength, in order to be effective with the time pressure. I learned to be aware and have an overview of all parts, and to be flexible, in order to be succesful in unexpected circumstances.
-
Second, it's okay to use a series of lists in this section, but if you do, you have to add a paragraph of synthesis after each list. So synthesize your soft skills together and describe what you learned about yourself relating to soft skills, and how you'll keep improving on them for the rest of your career. Synthesize your hard skills and how you'll continue to improve them for the rest of your career. Synthesize your thoughts around using photos in projects for the rest of your career. And so on for each list. This section is a really necessary place to look at yourself thoroughly and thoughtfully and understand how this project points the way for the rest of your future career. You have to be able to tie all these lessons together into an ultimate synthesis at the very end of the section/case study.