Building a feature from UX to Code

Better Proposals is a cloud-based software that enables its users to create, send, and track documents easily and efficiently. Although their editor is excellent, heavy users require a tool that can save them more time when creating documents. That is precisely why the Document Importer Project was developed.

My Role

Product Designer, Interactive Designer, Front-End Developer

Duration

6 Weeks (one cycle) - 2023

Tools

Figma, FigJam, PHPStorm, XAMPP, GitHub, Jira

Tech Stack

HTML/CSS, Javascript (Vanilla) and JQuery, PHP, MySQL

Business Goals

Make document creation and brand customisation more efficient and frictionless. This benefits a wide range of users, from salespeople who need to send multiple documents daily basis, to corporations that have content-heavy documents and want to save time by avoiding manual copying and pasting.

User Goals

Streamline the document creation process to save time—eliminating manual copy and paste speeds up workflows and reduces typos and missing information, while swiftly applying their company's or their client's branding to documents for prospects.

Shape Up Method

We adopted the Shape Up method to build this and many other features. As a senior designer and front-end developer, I paired up with a senior back-end developer and in six weeks we took the project from the initial concept through to a fully functional feature.

Design Process

During the early stages of the design process:

I created low-fidelity wireframes that focused on the functionality of the features and user flows.
Guided stakeholders through wireframes, gathering feedback and identifying potential issues to ensure our final product meets high standards.
Created a final design that was used as a blueprint for the development process.
The result: Following user feedback, it was discovered that most users found the system navigation to be easy to use, thanks to the clear and concise steps, descriptive headlines, the option to hover over elements for further information, and the preview feature.

User Flow

User flows are essential in the design and development process. They provide a better understanding of how features should work and aid in the decision-making process before writing any code.

Web Development

Collaborating with a colleague, I focused on front-end development and integrating it with the back-end they developed.

My main goal was to improve the user experience through visual feedback and informative content at every interaction stage.
I also conducted tests on diverse .docx documents, including those from Word, Google Docs, competitor platforms, and pre-built templates.

Changes on the fly without unwanted surprises

In order to meet platform-specific requirements, users should divide documents into sections and blocks. The interaction design and layout were carefully thought out, showing a preview to help the user understand how their document will look at the end.

Goodbye, boring PDFs. Hello, digital branded documents.

In the final step of our process, we provide assistance to users by offering:

Pre-defined colour combinations.
Generated images from free stock websites. This allows them to style their documents quickly by simply typing in a keyword representing their business.
The alternative to further customise their documents by editing text, changing colours, moving sections and more.

Better Proposals