2023
Lipana
Product / UI/UX redesign
UI/UX Designer
Research, planning, wireframing, prototyping, design, testing, iteration, implementation, launch, and monitoring for continuous improvement.
Product redesign
UI/UX Designer
Design system management
First, I gathered requirements from stakeholders. Then, I drew up paper sketches of the app's screens and features. Next, I created low fidelity wireframes using Figma. I tested those wireframes with stakeholders to get feedback and refine the design until it met their needs. The process was iterative, and lots of changes were made as necessary as the final designs needed to be functional, intuitive, and easy to use.
The first step is to gather requirements from stakeholders. This involves understanding what the app needs to do, who it is for, and what user needs it must meet. The next step was to draw up paper sketches of the app and website's screens and features. This allowed for quick and easy iteration of ideas, with the focus on functionality rather than aesthetics.
.png)
With feedback taken into account, low fidelity wireframes can be created using Figma. These wireframes are basic representations of the app's screens and features, using simple shapes and placeholders for content.
Inorder to create a design system, we first defined the brand identity and established design principles. We then went with the typography and brand colors that reflect the identity of Lipana. Next, I created input box styles and defined interactive states for all elements. Finally, I documented the design system for consistent use across the design.
01
Minimal, purposeful use of color
02
Typographic hierarchy and contrast make important information stand out
03
Similar component layouts that repeat throughout the screens.
Clash Display and Inter were chosen for their unique aesthetic and strong compatibility with the web. Clash Display is a Serif font that creates a bold and attention-grabbing visual impact, while Inter is a clean and modern Sans Serif font that is highly legible at small sizes.
Readability was a key factor in going with these fonts, as they are both easy to read and legible for longer blocks of text. The combination of a Serif and Sans Serif font helps establish a clear visual hierarchy, with Clash Display being used for headings and titles, and Inter being used for body text.
The colour scheme chosen adds a touch of vibrancy and modernity, while providing contrast and establishing a visual hierarchy.Overall, the colour combination creates a visually appealing and professional look for the Lipana application, while also ensuring that the colours are appropriate for the financial industry and easy to use for users.
The design system for Lipana defined the visual style and components used throughout the application. It includes typography, colour, layout, and interactive elements such as buttons and form inputs. The design system ensured consistency and coherence across the interface, making it easy to use and understand. It also provides a foundation for scalability and future design changes.
The high fidelity designs for Lipana are a polished and refined version of the low-fidelity wireframes, showcasing the finalized visual design and layout of the application.The main dashboard provides an overview of payments with interactive elements such as buttons and form inputs allowing for easy navigation and data input. The navigation process is straightforward and intuitive, with clear labeling and step-by-step guidance.Overall, the high fidelity designs for Lipana are both visually appealing and highly functional, providing users with a professional and streamlined experience for business management.
In order to ensure that Lipana is accessible and user-friendly across a variety of devices, we implemented a responsive design approach. This means that the application will adapt and optimize its layout and content based on the screen size of the device being used.
.png)
The next step was to move on to development and implementation. This involved working closely with developers to ensure that the designs were translated accurately into a functional application.Upon launch, ongoing maintenance and updates will always be necessary to ensure that it remains functional and up-to-date with the latest web development technologies and user needs. This may involve implementing additional features and functionality based on user feedback, as well as regularly testing the application to ensure that it remains accessible and user-friendly across a variety of devices and screen sizes.Overall, the process of designing and developing Lipana is an ongoing one, with the ultimate goal of creating a reliable and user-friendly platform for different types of businesses.
