Dropbox Paper

UI & UX for Divjoy.com

Date: Started on 5th Feb 2020 but website seemed too beautiful and I had to go back to learn more UI & UX so updated on 7th Feb 2020

Hello there! 😄

Thank you for letting me review your website. Below I have mentioned my thoughts. I hope it helps.

Review:

This is how your website looks in a 1920x1080 size desktop browser screen.

Most landing pages give a short explanation of their product in headings styled by huge letters. In your case, you have only mentioned the name of the product.

As a developer myself, I had to read the first two headings before I could actually get to understand what product does. This means users will need to spend some time reading before they understand your product. We know people barely read. So I would suggest Removing the first two headers and explaining your product in BIG and BOLD manner.

After you explain your product in heading, you can then explain something like Divjoy is a react code base generator or something like that.

You cam keep your logo in the top left like most websites do. Users tend to expect our logos at the top right.

It is considered pretty unusual and is not a good practice to display shadows equally in every direction. I suggest using shadows in only one direction. Maybe bottom right like material design would be good.

Also you can see when user hovers the card, the card gets large but user does not know what it does. According to the Law of Preferred action in UX, users will only click it if they know what it does. So you can make start now or use this template link or button at the bottom the card appear when it is hovered.

User-uploaded image: image.png

In this section, you see everything is BOLD. Bold text style should be used only to emphasize certain things. So I would suggest making the text styles into normal.

What are explaining there is a list of benefits. I would suggest creating a list of these features. It does not have to be big cards but just readable and countable items of text.

In the section of editing the code, you can see the top bar explains nothing. Users may not know that the bar at the top helps users navigate between pages so I would recommend you either using a placeholder or a tooltip at the start of the editing.

I do not know how you chose which color to use in which section but according to practices, consistent colors are used across consistent titles. For example: the colors for page, component etc would be consistent no matter where they are used.

Also in each card, you have a edit button. This creates too much to process. Instead you can remove the edit buttons from there and only show them when user hovers over the item.

Just an idea: what if you could use the DIVJOY italic in the who is divjoy for question? Also instead of how does this work, how about how does DIVJOY work?

So far, these are the comments from my side. It allowed me to learn a couple of new things as well. Thank you for that. Since your bio said you are a YC Alum, I suddenly felt pressure to deliver actionable and useful recommendations. I have tried my best. 🙂

A little about myself:

I am called Neu and I currently run a startup called Insteps which allows teams to create one to-do list and send copies of original to-do list to several people which the team members will access as if it’s their own personal to-do list. The progress of one person will not affect the another and the admin can track progress.

I live in South Asia and am considering to apply for Y-combinator. Do you have any tips regarding this?

I would be happy to hear your recommendations: bvlash@gmail.com

Let me know if you found this helpful. 😄