DocsBee
Designing a Proposal Management Tool from the Ground Up
Designing a Proposal Management Tool from the Ground Up
The global proposal management software market is expected to reach more than US$3.5 billion by 2026, but it still lacks a tool that sticks to user experience rather than feature-led growth. DocsBee was called to fill that void, with the help of UI/UX designers from Eleken.
Services
Web App design
UI/UX design
The design emerges
Starting a design project from scratch is exciting, fun, and… challenging. To turn a blank Figma page into some mockups, you need a place to start. Our starting point was the competitor analysis — we needed to explore our target market to see who was winning and why.
We focused on looking for the advantages and shortcomings. If the competitors were good at their game, we wanted to learn why. If competitors were missing something in UX (sure, they were!) we wanted to discover those pain points and use them to develop DocsBee’s competitive advantages.
As a result of competitor analysis, we generated a long list of big and small feature ideas that could be parts of DocsBee. But since the app’s hallmark was going to be its ease of use, we should have cut some features that weren’t contributing to the product's core value.
Thus, we used Kano Model to prioritize features on a product roadmap depending on the degree to which they are likely to satisfy customers.
Now, when we had all the components of the future app approved, it was time to think about the information architecture. To understand the logic between features, we draw user flows — the paths users would take through the app to achieve a certain goal.
An interface starts coming to light at the moment when designers create a wireframe version of a user flow.
Wireframing is a fundamental phase of any design process. At this stage, UI/UX specialists build layouts using only black, gray, and white to focus more on the structure and less on the UI. As a result, designers can iterate and approve their ideas before spending a ton of time on colors and visuals.
For the DocsBee project, wireframing was the most time-consuming phase. Design drafts went through numerous edits and iterations until we got 70+ approved screens ready to get to the next design phase.
With wireframes ready, we created several layout options to decide on the deployment of elements and navigation patterns.
Finally, we opted for the interface with a side navigation menu. That's because sidebars work better for products with a large number of navigation links, they are easier to adapt for a mobile version and scale as the app grows.The next step was to choose colors for our almost-ready mockups.
Orange was chosen as a primary color to differentiate from competitors, who mostly use green and blue as their corporate colors. Also, orange is a tribute to the bee in the company’s name and logo.
Color can set the tone and the connotation of a brand. It can also ensure better readability. Color matters, that’s why we devoted much time to finding DocsBee’s perfect color palette.
The design gets a splash of color and gloss
Colors
Tobias Frere-Jones, a famous American type designer once said: “All text needs legible typefaces. But especially at interfaces, our eyes need fonts that cooperate rather than resist.”
That makes a lot of sense since clarity is the foremost characteristic of a good UI. SF Pro is the font that together with Roboto and Inter makes our all-time classic trinity of interface fonts. No wonder we’ve chosen SF Pro for DocsBee’s app. The font is universal and legible, with low contrast and an open aperture. What is more, SF Pro includes nine weights, which is more than enough to create contrast between the sizes of paragraphs and various headers.
As the last step, we created DocsBee’s landing page to communicate the value of the product in a way that persuades customers to start a free trial. There were several design options, the approved one you can see on the screenshot below.
Need an MVP design for your product? Schedule a call with the Eleken team so we can negotiate all the details.
