Finastra
Project Overview
This project aims to design a user-friendly checkout process for e-commerce website by leveraging Finastra's design components and style guide. A key aspect involves effectively utilizing existing design components and style guide.
Key Data
Role: Visual designer
Timeline: 4weeks
Tool: Figma
The Process
Process 1: Research
Process 2: Mockups/ Revised
Process 4: Final Design
The Challenge
The challenge was to choose the right elements from huge component library for checkout process while considering design esthetic across the other design .
Design Research
To gain valuable insights and inform the design approach, I began by analyzing the checkout process and layouts of competitor e-commerce stores. While a two-column structure with the form on the left and product information on the right is a common layout choice, variations exist in the placement of specific details within the form and product information sections. Also, examining Finastra's component library helps deciding the direction of the designs.
Examples from Finastra's component library
Mockup
Following the competitive analysis, I began crafting low-fidelity mockups for the checkout process. Since Finastra doesn't currently have an e-commerce platform, I drew inspiration from their website's design and readily available design components to establish the initial mockup framework. My focus was simple UI which the user know what and how to do next. Most importantly, I did not want the user to feel they are lost.
The problem: Trapped
During the design review, another designer pointed out the lack of back buttons on all pages. While my initial, large call-to-action buttons aimed to guide users confidently towards the next step, they might have unintentionally created a sense of being trapped. This contradicted my goal of providing a user-friendly experience.
The solution
To address to the problem, I approached with 2 ways. First, I reduced the size of the call-to-action buttons, making them less visually dominant. Second, I introduced back buttons in the bottom left corner of each page. This approach enhances user experience by providing clear navigation options while still maintaining a clear call to action.
Final Design
After addressing the identified issues, I refined the low-fidelity mockups to create a high-fidelity prototype. The final design ensures consistency in visual style across all elements, promoting a cohesive user experience.
Lesson Learned
Usefulness of design components and style guide
This project made me realize the importance of brand guidelines and component libraries. These tools create immediate design consistency with less time and cost. While there may have been limitations during the initial development phase, having a well-established design system ultimately empowered the designer to work more efficiently throughout the project.