DocHipo Gets a New Look to Charm You

blog-bannerOct 2, 2020

On the faithful day of 29th September 2020, we were restlessly waiting as DocHipo was undergoing a change.

Understanding the persistent desire of every business to get the best design solutions, we have recreated a fresh look for DocHipo; a new user interface design to die for!

This newness harbors facilities and features that can give wings to your thoughts and desires that you often visualize. Furthermore, we wanted you to sniff the freshness of sighting something scintillatingly contemporary.

So join me on the voyage where I will take through our journey and what changes we have made on the website.

The Journey So Far…  

In the blazing month of July 2017, the idea was conceived internally by the team. Thrilled with the dazzling idea of creating a very own web app dealing with design documents, the team worked like crazy to make their visions a reality.

And then came 14th August 2019, when our efforts gave birth to DocHipo.  We even got a beautiful logo to personify what we stand for; clad in green, red, and yellow, our logo, which is tied in an endless loop, represented the three primary colors and the three levers of every business: Marketing, Sales, and Support.

As the months followed, we could see that DocHipo soon earned the potential of growing into something bigger and better.

So here is DocHipo today, unleashing a new minimalistic look and features, so that you can have the best design experience ever!

Let’s see what changes DocHipo introduced.

DocHipo Then and Now!

I am pretty sure we all have then and now pictures that we love to post on social media. This trend constantly maps the wonderful way we are all transforming.

So, I will take you through similar comparisons, mapping the marvellous changes that DocHipo introduced to make your experience better and brighter.

1. Sign-up Flow

We thought of welcoming you with a friendly Hi, so we revamped the sign-up page.

Before, the sign-up page had a user’s testimony. 

New UI design: Sign-Up (Before)

So, after registering, you would get an email that would disclose your verification code. The page usually looked like this:

New UI design: Verification email (Before).

Once you logged in, you were asked to update company information, where you typed your company name and time zone.

New UI design: Company updation (Before)

Here comes the landing page that showcased all the templates that DocHipo has for your document creation.

Blue is a significant color because it signifies reliability and trust. 

We wanted to give you a design platform on which you can rely on all your design aspirations. So, we had combinations of blue to communicate the message that, “Hey! You can trust us”.

New UI design: Landing Page (Before)

With time, we realized that trust has no boundaries, as it should make you feel free. 

So we changed the blue borders into something more neutral and opened the space for you to fly visually and explore as many templates as you can.

we thought of paying more attention towards welcoming you with colorful illustrations.

New UI design: Sign-Up (After)

Also, we wanted to break the monotony and add an extra feel. So now, we have a pretty looking character prompting you to check your mail for the code.

New UI design: Verification email (After).

We didn’t want your company information-filling experience boring. So, we added another colourful design.

New UI design: Company updation (After)

We even incorporated simple illustrations on the landing page, along with the neutral color combinations that can reflect an aesthetic vibe.

Now our landing page looks like this:

New UI design: Landing Page (After)

2. Sign In

I am sure that our stunning templates attract you to visit DocHipo frequently for fulfilling all your design needs. 

So, whenever you visited the sign-in page, it looked like this:

New UI design: Sign-in (Before)

However, we wanted to establish a theme and a distinct vibe to your visual faculties. So our sign-in page embraced and maintained a well-defined persona to prepare your sight with a distinguishable identity.

Hence, now our page looks like this:

New UI design: Sign-in (After)

3. Forgot Password

Human memory is fleeting, so it is normal to forget your password.

We understand this, so we always provide solutions to create a new one that you can remember (and can forget again).

So, at DocHipo the password reset request page looked like this:

New UI design: Forgot Password (Before)

Also, if we could not detect any account through the initials you provided, the page showed:

New UI design: If someone enters the wrong email (Before)

Now, we have an interesting character emulating your expression that you might have while figuring out your password.

New UI design: Forgot Password (After)

Not just that!

When you type a wrong login initial or look for an account that might not exist, the page alerts you by showing you this:

New UI design: If someone enters the wrong email (After)

4. Personal Profile

DocHipo gives you an option through which you can access your personal profile.

Previously, as you clicked the top-right corner icon to view your personal profile, a box would appear which would encapsulate widgets related to settings, tutorials, weekly pro tips, questions, and options to sign out.

New UI design: Personal Profile (Before)

Now, the same box has a distinct look, which separately shows personal settings and has other options under Help Center. This time we have also changed the option from ‘Have a Question’ to ‘support@dochipo.com’. 

New UI design: Personal Profile (After)

5. Create Document

Well, at DocHipo you could easily create a document without much ado. By clicking on the plus icon beside the profile icon, you can see a list of document options from which you can choose.

New UI design: Create Document (Before)

Now, the plus icon looks different. 

As you click this icon, you will see it divides the document templates under Groups viz. Business Essentials, General Purpose, Web Banner and Social Graphic. It showcases the document templates in such a way that you can conveniently select your option without getting hassled by the choices.

New UI design: Create Document (After)

6. Templates

In the past, we didn’t have a tiered hierarchy of document templates. The left panel in the Templates section used to look like this:

New UI design: Templates (Before)

To make this platform more user-friendly, this panel underwent a change. 

Now, once you click the dropdown of a group (Like: Business Essential, General Purpose, Web Banner or Social Graphic), you will see options to select the types that you are looking for, quickening the entire designing process.

New UI design: Templates (After)

7. Document Page

Remember your Document page, where you stored all your artistic endeavours. Yes, we thought of refurbishing that as well.

Earlier, this page, with no documents, looked like this:

New UI design: Empty documents page (Before).

Once you started creating and customizing the documents, your work would get stored in the document page. 

New UI design: Empty documents page (Before).

Now, when you wanted to continue working on a document or wanted to download it, you selected the three-dotted button at the top of the document thumbnail. This entitled you with an option box, from where you had the choice to edit, clone, share, publish, present, download, and delete.

New UI design: Documents page options (Before).

Now, the new DocHipo’s Document page looks a bit different, maintaining the neutral palette.

The empty Document page has an illustrated character, who is waiting to be inundated with all your creatives.

New UI design: Empty documents page (After).

Now, you can see the difference with your own eyes, as the revamped structure recreates the space where you can store your creatives.

New UI design: Empty documents page (After).

Here, when you select the option in the document thumbnail to take your desired action, you will notice that the option box is white, comprising all the previous options.

New UI design: Documents page options (After).

8. Document Preview

Previewing your document is critical before downloading, as you have to check the final look before sharing it with your teammates.

Earlier, the document preview had a black background.

New UI design: Documents preview (Before).

In the new version, we thought of changing that as well. So, now we have a white background to buttress the document that you are previewing.

Moreover, with the white background, you will have better visibility to properly review the document. Also, we have added an extra edit icon at the top of the page which will automatically redirect you to the workspace.

Check it out:

New UI design: Documents preview (After).

9. Document Editor

So, here is my most favourite part.

In the previous version, once you had selected the template, you were automatically redirected to the Document information page.

New UI design: New Documents (Before)

As you entered the workspace, the panel encompassed categories. These categories had widgets which helped you to customize and design the document the way you wanted.

New UI design: Documents editor (Before).

After selecting a shape from the “Shapes” widget, it appeared on the document which could be adjusted to suit your visual idea.

New UI design: Contextual editing options (Before).

As you expanded the “Text and Background”, to select the text widget. You dragged the option onto the document in the workspace. Then chose your font to present your message.

New UI design: Text Widget (Before).

You also had the option to coordinate the design with your team-members by discussing and commenting about the design in the comments section.

New UI design: Comments (Before)

Simple isn’t it.

Well, we wanted to give you the best feel, so we made more changes in the workspace itself.

Let me show you.

To start with the Document Information, we maintained the neutral look of the interface.

New UI design: New Documents (After)

Similarly, after clicking “Next”, you will be redirected to the remodelled workspace.

New UI design: Documents editor (After)

Here, we restructured the tool panel. We interchanged and added important widgets to make sure that you can smoothly sail. The widget itself is clad in soft colors to heighten the visual beauty. The “background” widget is now under “Graphics and Media” category, along with the existing widgets. 

New UI design: Contextual editing options (After).

Also, we made the text option more exciting for you. 

As you will select the “Text” widget, you will be able to select the text as heading, sub-heading and body. This will give you better guidance to make sure you do not mess with the type-hierarchy.

New UI design: Text Widget (After)

 Remember the top panel, which comprised exciting tools to make your design look exceptional. Well, we have it more now, especially with the text. The top panel provides you with options such as opacity, strike-through, transform, list, link, arrange, lock, and delete.

We understand the importance of text and typography to enhance a design and the message. So, now you can flawlessly create! 

New UI design: Text widget options (After)

The comment option is the same, but the structure maintains the overall look and feel.

New UI design: Comments (After)

We made sure that the blue border around the workspace does not limit your perception to create your masterpiece. So, all the pages maintain neutral tones. 

10. Recycle Bin

Previously, the Recycle Bin could be accessed via personal settings. 

New UI design: Recycle Bin (Before)

Now, the recycle bin can be accessed both via the personal settings and also through the trash icon on the left panel of the page.

New UI design: Recycle Bin (After)

Look at the pink illustrated character, who is ever ready to store your trash.

11. Invited User Joining

Earlier, whenever you invited a team-member to collaborate in the design, you would have to fill a password box like this:

New UI design: Invited user joining (Before)

Now, the look is different and in accordance with the tone of the website. We continued to put lovely illustrations to capture the friendliness of coordinating a project together.

New UI design: Invited user joining (After)

12. Global Search

In the top bar of the landing page, there is a global search option. You can search for any DocHipo templates or your documents here. Here’s how it used to look.

New UI design: Global search (Before)

 We have now made the search results bigger and brighter:

New UI design: Global search (After)

Here’s a video on all these fun changes in the New UI:

Conclusion

Transforming oneself to become better has no limitations. Hence, we want to be the best for you to leverage your business further.  

This new version of DocHipo aims to be even more user friendly so that you do not waste your time fumbling over-complicated design tools. 

Our overall website has a soft tone, with minimal designs to ensure more transparency. 

We arranged all the widgets and the features in strategic locations, which will naturally attract your gaze, creating no confusion at all. 

We are very excited to continue our journey with this new makeover. 

Sign up now and use the platform to your fullest!

Also, you can contact us for any template request.