Back to Works
1: Context
How can we acquire new customers by renewing the website?
Background
The J-POWER Insurance Service Corporation is a Japanese insurance agency that focuses on serving the employees of the J-Power group, both current and former. Upon gathering feedback from clients, it became apparent that there was a need to enhance the user experience and visual appeal of their website. Moreover, as the website lacked responsive design, I took the initiative to address this issue and implemented a responsive design solution.
To achieve this, I focused on optimizing the site's layout, navigation, and overall design to enhance the user experience.
2: Research
2.1 Design Consultation
At first, I visited the client's office to hear their needs for the website design and to ensure we were on the same page about the criteria for the redesign. Their primary concern was to update the site's design to make it look more modern and appealing. However, when I asked about the company's values and culture, they mentioned the importance of being friendly. After the design meeting, I began to research similar industry websites to determine which content should be given high priority and highlighted on the site. Additionally, since the website would also be used by retired employees, the target audience's age range would be quite vast.
2.2 Imagining the user
Using the information I gained former the design consultation, I created two personas.
- Aiko Nakamura 23years old
- After graduating with a degree in Business Administration, she joined a company in the J-Power group to begin her professional career. While she is new to the insurance industry, she recognizes the importance of securing a policy for the future and seeks a reputable company with strong support for new policyholders.
- Goal
- To gain a clear understanding of the services offered.
- Behaviors
- Driven by visual experiences and aesthetics.
- Pains
- Lack of familiarity with the insurance industry.
- Needs
- Trustworthy and visually appealing content that is presented in a user-friendly manner.
- Satoshi Tanaka 70years old
- Now enjoying his well-deserved retirement, Mr. Tanaka is reflecting on the decisions he made during his working years. One particular concern that arises in his mind is the insurance policy he signed up for when he was still employed. As he nears his 70s, he recognizes the importance of reviewing his existing insurance coverage and ensuring its adequacy for his current stage of life.
- Goal
- To easily access the schedule for changing insurance plans.
- Behaviors
- Prefers to thoroughly read and understand information rather than getting a general idea.
- Pains
- Struggles with small font styles that hinder readability, leading to frustration and difficulty in finding desired information.
- Needs
- Enhanced usability and improved readability, including clear and legible font styles, to facilitate easy navigation and access to relevant information.
2.3 Finding when the website is be seen
Customer journey
In order to gain insight into the real-life user experience of the website, a user journey was created.
3: Design
3.1 Art Direction
Mood board
3.2 Ideate
Pattern
Using this information, I designed three first-view design.
- A: Featuring pictures of young people, to target new graduates of the J-Power group. This design was created to introduce the client's services to new graduates when they start working there.
- B: Featuring pictures of a consultant, to convey the client's trustworthiness and friendliness.
- C: Featuring pictures of a consultant and a family, to convey the bond between the client and their customers and the idea of a happy future with their insurance services.
Young people
Consultant
Consultant and a family
4: Solution
4.1 Design System
Color
I have selected a deep navy color to convey sincerity, intelligence, and stability, along with a vibrant orange color to evoke friendliness, energy, and a positive impression, which both are critical factors for an insurance agency. Both colors have a high saturation, providing a distinct and vivid color scheme. I aimed to create a calm and balanced impression without being too flashy on a white background.
Typography
For peak performance, I opted for the "Yu Gothic" web font on the corporate site. It's universally supported, with various font weights. Despite limited Japanese font options, I fine-tuned letter spacing and line height to create an impressive main visual while focusing on faster font loading and improved overall performance.
UI Components
The UI components were created with consideration for various possible combinations of patterns. For seamless sharing with developers, the design files were prepared using Adobe XD, including design specifications such as margins, resizable sizes, and hover states.
Components for desktop
Components for mobile
4.2 Final UI Design
Top page for desktop
Top page for for mobile
5: Takeaway
5.1 Looking back and moving forward
In this project, I had the chance to actively engage in a crucial client meeting, where I listened attentively and gained a deep understanding of their goals and requirements. As the project evolved, I had to be flexible, adapting to updated wireframes and collaborating with developers simultaneously while designing. This required smooth and timely coordination among all stakeholders.This project provided me with a profound understanding of website structure and design, offering valuable insights into both functional and aesthetic aspects of web design.
Looking ahead in my career as a UI/UX designer, I'm committed to refining my skills in developing user-centered designs that seamlessly blend aesthetics and functionality. I'm enthusiastic about taking on new challenges and using my expertise to contribute to future projects, all while pushing the boundaries of innovative and intuitive user experiences.