Oen Tech

Oen Tech | Redesign user login page

UIUX Design


This redesign of the user login page can be roughly divided into the following stages in the design process:

Research and Analysis: The purpose of this redesign is to encourage users to utilize email for receiving verification codes, aligning with cost considerations, and enhancing the brand image according to the 2023 Brand Guidelines. The project was a collaborative effort involving engineers, project managers, and UI/UX designers. After finalizing the scope of work, the UI/UX designer initiated discussions with the project manager and began gathering relevant data and reference examples.

Conceptualization and Ideation: At this stage, the UI/UX designer and project manager have already determined the general direction for the new user login page. This allowed them to begin crafting UI user flows and specify the conditions required for the design.

User flows added design diagram

Design Concept: Following the 2023 Brand Colors guidelines (Technology Blue: HEX #4DB2CE / Enthusiastic Yellow: HEX #FFB010 / Steady Black: HEX #000000), additional brand colours were incorporated into the user login page due to the product's visual system update. Furthermore, to enhance interaction with users, animations were added to the mouse hover effect when entering an email.

Brand Colors of 2023
Update Design system components and colors

Usability Testing: After completing the design drawings, they were handed over to the engineers for implementation. The design drawings contained all the necessary materials and rules required by the engineers, such as SVG files and duration specifications for animations. Upon completion by the engineers, final approval was conducted by professional managers and UI/UX designers to ensure that the visual aspects of the webpage adhered to the specifications and that any necessary modifications for user experience were addressed.

Before
After

Finally, the project progressed smoothly throughout the production process. Through discussions with the project manager and engineers and by presenting different opinions and ideas, we were able to plan the development phase effectively. This allowed us to gain a better understanding of everyone's working methods and make the workflow even smoother.

Other projects: