top of page
Top
Bravo Insurance
UX/UI Design
Background
 
Bravo is a fictional insurance giant with over 30 years' experience working primarily with regional agents to sell their insurance policies.
 
To remain competitive, they require a responsive e-commerce website to sell directly to younger consumers whilst refreshing their brand.
Role
 
UX/UI design, UX research, branding, prototyping & usability testing
​
Timeline​
​
4 weeks – February/March 2021
​
Tools used
​
Figma, Whimsical, Miro, OptimalSort
Objectives
Project Objectives
  1. A responsive e-commerce website to sell Bravo's insurance packages
  2. A new, modern and fresh logo to attract the young adult target market
  3. Adhere to the brand principles – trustworthy, clean & clear and modern & fresh
Research goals
  1. Understand the greatest frustrations users have when browsing online for insurance options
  2. Review the competition to see how they are attempting to communicate with Bravo's target market
  3. Pinpoint the most commonly-purchased types of insurance
Design Process
1.
Research
  • Competitor analysis
  • Interviews
  • User persona
  • Empathy Map
4.
Branding
  • Brand logo
  • Style tile
2.
Information Architecture
  • Card sorting
  • Site map
5.
UI Design
  • Responsive UI designs
3.
Interaction Design
  • Task flows
  • User flows
  • Wireframes
6.
Iteration & Implementation
  • High-fidelity prototype
  • Usability testing
  • Affinity Map
  • Further iteration
1.
Research
Competitor Analysis
To better understanding the industry and how the insurance providers are attempting to communicate with their users, I conducted a competitor analysis. I chose the below competitors based largely on their name within the UK insurance industry and their market share.
 
However, I also paid careful attention to providers like Lemonade. Despite not having a presence in the UK market, I noted they had a unique visual aesthetic and tone of voice that I felt was geared towards Bravo's younger target market. Critiquing their approach might give me valuable insights later on in this project.
Interviews
Once I had an understanding of the market, I moved onto user interviews, which I conducted via video call due to restrictions caused by Covid-19.
 
My key criteria was to approach users that sat within the 18-35 age range and who had some experience of purchasing some form of online insurance packages within the past 2 years.
​
Key findings​
Goals:

  • To find a trustworthy insurance provider

  • Policies that offer a happy medium, i.e. package contents vs. price

​

Needs:

  • Clear and simple language throughout the website

  • Concise summaries of their policies

​

​

Frustrations:

  • Actions by their provider that lead the user to lose trust in said provider

  • Encountering insurance terms or industry jargon that they don’t understand 

​

Motivations:

  • Comprehensive insurance coverage

  • A simple claims process (especially on mobile)

​

​

User persona
Having discovered the most common needs and frustrations amongst users, I developed a user persona. This was incredibly helpful to me as later on in the research and design process, this information guided me to prioritise the 'must haves' against the 'nice-to-haves'.
Empathy Map
My final step in the research process was to create an empathy map. Here, I used the data from my interviews to map what Janet might think and feel when shopping for insurance packages.
 
The fact that these simple post-it notes originated from my user interviews really helped me to ensure that future design decisions were in fact based on valid evidence and not just wild assumptions.
2.
Information Architecture
Card sorting & Site map
To decide how my users might sort and label information, I decided to conduct a card sorting exercise through OptimalWorkshop. ​
 
I then used these findings to categorise content that would make sense to the user. I displayed this navigational content in my site map below.
3.
Interaction
Design
Task flow
In order to figure out the site pages that the user might navigate through and the actions they may take, I decided to create a task flow.

Carefully considering how the user might achieve this aim helped me to consider the obstacles she might come across. I then explored these in greater depth in the following slide.
User flow
Using my task flow as a springboard, I considered Janet’s ultimate goal, along with her frustrations to create an extensive user flow map that I felt would accurately illustrate her full journey through Bravo’s website.

I went into great depth to consider all the blockages she might encounter along the way, and what Bravo’s website could offer to counteract these to win the client.
​
Looking back on this project, I certainly felt that the extra time spent considering all possible blockages allowed me to design a more cohesive end product for the user.
Sketches and wireframes
Now came the really fun part. With the data above, I began to sketch my ideas for the layout of Bravo's landing and quote pages. The sketches below were just a few of the mockups I made.
After gaining feedback from my peers and mentor on my sketches, I chose the most promising versions for both devices and created my wireframes in Figma.
Desktop Landing Page
Mobile Landing Page
Desktop quote process
Desktop quote results
4.
Branding
Brand Logo
From the very beginning, my aim was to create an uncomplicated yet elegant logo that would scale easily and ensure readability on a variety of backgrounds.
​
Also important though was that I kept in mind Bravo's business goal of having a logo that feels trustworthy, clean, clear, modern and fresh.
​
In the end, I found plenty of inspiration online but was really drawn towards the simplicity of IBM's logo.
 
However, in an effort to give my logo a modern twist, I decided to angle the white lines diagonally whilst reducing their thickness to ensure readability when the logo had been scaled down. 
Style Tile
Since the start of the project, I had the idea of using a vibrant shade of blue as my primary colour, as my research confirmed that this colour evokes themes of security, trust and peace – perfect for a insurance company.
​
Keeping the brand keywords in mind, I opted for a modern-looking sans-serif font for my body text and playful yet emotive imagery that I believed would resonate with Bravo's target market.
5.
UI Design
Responsive UI designs
Landing Page
Mobile Landing Page
Quote Screen 1
Quote Review
Quote Screen 2
Quote Results
6.
Iteration & Implementation
Usability Testing
Now that I had created my first set of prototypes, it was time to put the user interface to the test.
​
Before conducting any tests however, I established a set of test objectives that I believed would offer a clear picture as to the success of my prototype:
​
  1. Understand the user’s first impressions of Bravo’s homepage
  2. Examine the ease at which the user is able to navigate to the ‘get a quote’ section and then through the quotation form
  3. Identify any frustrations the user experienced
​
Methodology
​
I interviewed 4 participants over video call who undertook tasks related to these objectives whilst they shared their screen. I then documented my findings in my affinity map.
Test results
Participants:
  • 4
  • Ages 21-34
  • Have all purchased insurance packages online
  • Varying levels of understanding of the insurance process
​
Outcome:
  • 100% completion rate
  • 100% error-free rate
Pros:
  • Clean overall design
  • Consistency of quote screens
  • A theme of trust emanating the homepage
​
Cons:
  • Mixed understanding of Bravo’s insurance offerings
  • A lack of consistenty between certain imagery and tone of copy
  • Too many buttons on certain quote screens
I was pleased to note that all all participants were able to complete the tasks I had set them and without any errors, and that the copy and UI I had created for the homepage denoted a sense of trust.
 
However, a problem that was highlighted after evaluating my affinity map was that there was a frequent lack of understanding as to what sort of insurance that Bravo were actually offering.
​
I knew that the business goals could not be achieved unless this problem was addressed, so I made this a priority in my next set of iterations.
Affinity Map
Conclusion
The results from the usability testing confirmed that my prototype was in fact usable and that users experienced few frustrations when navigating through the prototype.
​
Once I had synthesised my findings into an affinity map though, there were several observations that stuck out at me, such as:
 
  • Needing to clarify Bravo's insurance offerings
  • Addressing elements of the layout, copy and imagery in the 'About us' section
  • Finding a way to improve the microcopy for returning users in the quote process.
 
I made sure to prioritise these in my iterations.
​
Note that if I found that more than one user was making the same observation, I stuck the post-it notes on top of eachother. This method allowed me to quickly identify the most pressing problems and prioritise them accordingly.
Challenges
  1. Sometimes I found myself getting lost in the smaller details of this project, as my time management suffered as a result
  2. At times, i struggled to keep stay on track with my day-by-day deliverables. This was largely due to the time involved in recruiting and scheduling test subjects
  3. I realised towards the end of my case study that there was a consistent lack of understanding as to Bravo's insurance offerings
Solutions
  1. Re-read the business goals each morning to ensure that I'm consistently focusing on the bigger picture
  2. This was a valuable lesson to learn. For my next cases study, I've already made a note to recruit users prior to starting my research
  3. After creating my first set of wireframes, I would conduct a usability test. Garnering feedback here would ensure that any key problems could be ironed out earlier in the design process, leaving more time at the end for other adjustments
Next Steps
1.
Iterations
Make further iterations based upon the feedback compiled in my affinity map
2.
Further prototyping
Create a revised prototype based from my iterations (and perhaps with more interesting animations)
3.
User Testing
Conduct a 2nd round of user testing from new participants to ascertain the quality of my iteration
Any questions? Fancy working together? Hit the button and let's chat.
bottom of page