Reference Managment Tool

In this project, I took on the roles of UI Designer and Product Designer to revamp the visual design of a B2B platform aimed at company managers. Over the course of two months, I utilized Figma to create wireframes, mockups, and responsive prototypes.

Role: UI Designer, Product Designer.

Duration: 4 Months.

Tools: Figma.

Tasks: Wireframes, Mockups, Responsive Prototypes.

Context

This platform is designed to facilitate the uploading and storage of project information, ensuring all company projects are systematically archived. Additionally, it offers the capability to download this information as templates, enabling seamless presentation to internal and external use.

Research

The project began with a comprehensive research phase focused on UI and visual design. This involved conducting desk research to analyze current design trends and best practices in B2B platforms.

I created mood boards to explore different visual styles and gather inspiration, ensuring the new design would be both modern and user-friendly. This phase also included evaluating competitor platforms to identify strengths and areas for improvement.

The insights gained from this research informed the design direction and helped establish a clear visual identity for the platform.

Ideation

With the research insights in hand, the ideation phase kicked off. I collaborated with stakeholders to brainstorm and sketch out initial concepts.

Using Figma, I created wireframes to map out the new user flows and interface elements. These wireframes were then refined into high-fidelity mockups, ensuring a cohesive and visually appealing design.

The implementation phase involved developing responsive prototypes to test the new design across various devices and screen sizes. This iterative process included multiple rounds of feedback and revisions, ensuring the design met user needs and business goals.

Specifications

Once the design was finalized, the handover to developers was carefully planned to ensure a smooth transition.

Detailed design specifications, including style guides, component libraries, and interaction guidelines, were provided to the development team.

Regular meetings and open communication channels were maintained to address any questions and ensure the design was implemented accurately. This collaborative approach ensured that the final product aligned with the original vision and delivered a seamless user experience.

Visual language

The visual language for this project was crafted to align with the company's style guide while adapting it to the platform's specific needs. The color palette incorporated the company's primary colors with additional shades for emphasis, and typography focused on readability and clarity. Custom icons and high-quality imagery were used to enhance navigation and professionalism. The clean layout with ample white space improved readability and user experience. This approach ensured a cohesive, brand-consistent design that effectively supported the platform's goal

Conclusions

In conclusion, this project successfully transformed the visual design of the B2B platform, aligning it with the company's brand while enhancing usability and functionality. Through meticulous research, thoughtful ideation, and collaborative implementation, we created a cohesive and professional interface that meets the needs of company managers.

Page updated

Google Sites

Report abuse