top of page
57297.jpg
IMG_0776.png

Website

UI /UX | Style guides | Illustrations

The Product

The insurance company presents an unparalleled digital package that ingeniously combines life and home insurance, meticulously crafted to cater to the requirements of homeowners seeking to safeguard their residences and loved ones. This thoughtfully curated package offers all-encompassing protection, guaranteeing homeowners the tranquility and assurance they desire within their living spaces. With a strong emphasis on digital solutions, the insurance company streamlines the process, empowering homeowners to manage their policies and conveniently access the required coverage. By opting for this comprehensive insurance bundle, homeowners can find solace in knowing their homes and loved ones are shielded from unforeseen events and circumstances.

Projects

Create a concept webpage that helps the user understand:

 

  • Benefits of bundle insurance.

  • Underlying factors might affect its Health Score.

  • Services that Bubble Insurance provides.

Responsibilities

  • UI/UX Design

  • Wireframing

  • Style guidelines.

  • Branding
  • Visual design

Defining the process

During an online video communication session, I had the privilege of engaging with the stakeholders and gaining a broad understanding of the Insurance industry. The stakeholders offered valuable insights that proved instrumental in identifying crucial project stages and milestones. By deconstructing the project into these distinct stages, we constructed a comprehensive roadmap that delineated essential objectives and specified delivery dates. This collaborative conversation fostered a shared vision and facilitated the establishment of clear expectations, ensuring meticulous planning with a defined purpose. The resultant roadmap not only provided a well-defined trajectory but also served as a solid foundation for the successful execution of the project.

Analysis

  • Competitor analysis

  • Business flows

  • MVP Scope Prioritization

Concept & Design

  • Sitemap

  • Wireframe

  • Atomic design development

  • Usability testings

Output

  • Fidelity Final Designs

  • Style Guidelines

  • Design Assets

  • Client feedback

Analysis

As part of our market research efforts, we thoroughly analyzed the leading competitors' products, including their market positions, features, services, and target audiences. This information helped us to gain a deeper understanding of the competitive landscape and identify areas of opportunity for our client.

In addition, we met with the stakeholders to learn about their current project goals, roadmap, and target market segment. By understanding the client's objectives, we were able to align our research efforts with their needs and identify potential areas for improvement.

We interviewed multiple users and gathered their feedback to refine our understanding of the target audience further. We then analyzed the data to identify common tasks and goals users were trying to accomplish. This information helped us to create journey maps that clarified the user's point of view and need for optimizing the business flow.

Through this process, we gained valuable insights into the user experience and identified potential improvement areas. By focusing on the user's needs and goals, we were able to develop a more comprehensive understanding of the target audience and create a roadmap for optimizing the business flow.

competitor analysis.png
competitor analysis-1.png
Business Flow.png

Concept & Design

To ensure a user-centric design approach, I started by building a sitemap and creating user flows that allowed me to map out the information architecture of the screens. This process helped define the key functionalities and features the product would need to include to provide an optimal user experience.

Next, I iteratively created wireframes that incorporated feedback from Bubble stakeholders to refine the design and enhance the product's usability. During this phase, I explored various navigation approaches to determine the best experience for the user.

To ensure that the design aligned with the client's objectives, I regularly checked concepts and gathered stakeholder feedback. This collaborative approach helped identify potential improvement areas and ensured that the final design met the client's expectations.

Throughout the process, I remained focused on optimizing the user experience and creating an intuitive and user-friendly design. By incorporating user feedback and iterative design practices, we were able to develop a product that met the needs of Bubble's target audience and provided an optimal user experience.

sitemap (1).png
User flow diagram.png
wireframe-Product1.png
wireframe-Product1.png
wireframe-Product2.png
wireframe-Product2.png
Wireframe-Pricing.png
wireframe-pricing result.png
wireframe-pricing result.png

Mockups

Using Figma, I created high-fidelity mockups for different platforms and mobile devices. These mockups were carefully designed to ensure the UI was visually appealing and optimized for usability.

To test the usability of the mockups, I set up prototypes used in upcoming usability testing. This process allowed us to identify any potential issues with the design and refine the product to meet the needs of our target audience.

During this phase, I remained focused on ensuring the design was consistent across all platforms and devices. This approach helped ensure that the product provided a consistent user experience, regardless of the device being used.

Overall, creating high-fidelity mockups and setting up prototypes for usability testing was a critical step in the design process. By refining the design through usability testing and ensuring consistency across all platforms and devices, we created a product that met the needs of our target audience and provided an optimal user experience.

Desktop

BubbleHome-my.png

Tablet

BubbleHome-ipad.png

Phone

Pricing-mobile-my@3x.png

Prototyping

Screen Shot 2020-08-03 at 4.33.52 PM.png

Demo

Usability Testing

Using Figma, I created prototypes for usability testing in Maze. This was my first time using Maze for user testing, but I found the platform incredibly user-friendly and intuitive.

One of the features that I found particularly helpful was the ability to import the Figma mockup into Maze easily. This streamlined the testing process and allowed us to start the testing phase quickly.

During the testing phase, we collected valuable feedback from users that helped us identify potential design issues and refine the product to meet the needs of our target audience. The Maze platform made it easy to analyze the data and gain insights into the user experience, allowing us to make data-driven design decisions and create a product optimized for usability.

Maze Platform

Screen Shot 2020-08-03 at 5.13.15 PM.png

Design Assets

To ensure the developers had all the materials needed to implement the design, I worked closely with them to gather all necessary assets, including typography, style guidelines, CSS codes, and a demo video.

Throughout the process, I remained focused on ensuring that the design was implemented in a way that was consistent with the original vision and met the needs of our target audience. By working collaboratively with the developers and providing them with all the necessary resources, we ensured that the final product was visually appealing and optimized for usability.

Figma - Developer View

Screen Shot 2020-10-05 at 7.44.27 PM.png

Style Guidelines

Style Guide (2).png

Animated Illustrations

family.gif
bubble-family.gif

Personal Portfolio Website  | Ping Hung Hsu

Logo design.png

Logo Design

© 2019 by Ping Hung Hsu. 

  • LinkedIn Social Icon
  • Instagram Social Icon
  • Facebook Social Icon
bottom of page