Improve the design & messages in error pages across ZubHub

[Adaking-slack]

Describe the the feature request

When the user searches for a project that is not available yet, an error message pops up. To improve user experience and encourage the user to keep engaging with the platform, we can suggest other projects that the user may find interesting. The UI for the error mssage can also be made better.

[srish]

@Adaking-slack Thanks for creating this! The error pages need improvement all across ZubHub. So, instead of targeting just one page at a time, it would be nice if this task was part of a larger project. Do you want to modify this task, document what all error pages need improvement, and invite other designers and developers to collaborate with you on this task?

[outcast-02]

@Adaking-slack IF you are willing then i would love to work on the design with you! Let me know and i will share some ideas!

[PascalAnuche]

Hi @Adaking-slack can we identify what is need to be modified so that I can work on the designs

[Adaking-slack]

@Adaking-slack Thanks for creating this! The error pages need improvement all across ZubHub. So, instead of targeting just one page at a time, it would be nice if this task was part of a larger project. Do you want to modify this task, document what all error pages need improvement, and invite other designers and developers to collaborate with you on this task?

Yes I do

[Temabo]

Hello@Adaking-slack I would like to work with you to improve the error page design

[Stephxdesigns]

Hi @Adaking-slack I'd like to collaborate on this with you

[Adaking-slack]

hi @srish This is the design i was able to come up with. I belive that coming up with suggestions based on the user's search query can help with user retention

[Adaking-slack]

Another issue i tried to resolve is the error page that comes up when you click the project tab. The message User has not created any projects yet. Check back later!" feels like we are addressing a third party and not the user exactly, so i tried to word it better. I also added the click to get started to direct the user towards taking an action

@srish

[Adaking-slack]

Hello@Adaking-slack I would like to work with you to improve the error page design

hi, sure. I was able to come up with something, you can chech it out and let me know if you have other suggestions

[Adaking-slack]

@Adaking-slack IF you are willing then i would love to work on the design with you! Let me know and i will share some ideas!

hi, sure. I was able to come up with something, you can check it out and let me know if you have other suggestions

[Stephxdesigns]

@Adaking-slack great work! I think the create project button should be under the click button to create instead of being in an entirely different section

[Adaking-slack]

@Adaking-slack great work! I think the create project button should be under the click button to create instead of being in an entirely different section

hi, thank you for your observation

[Michelle-okechi]

great work @Adaking-slack i would love to collaborate with you on the designs

[coderatomy]

While acknowledging the commendable work done by @Adaking-slack, I propose implementing a distinct avatar design element. The current depiction of an envelope appears incongruent with our established style guide. I kindly request your assistance in refining this element to ensure its seamless integration within the designated style framework. Thank you.

Surely @srish, I think we should rework on the ErrorComponent to be a bit more flexible and understandable and also better looking. Am open to work after the designs

[Michelle-okechi]

@coderatomy i believe @Adaking-slack used that as a placeholder to indicate that there'd be an avatar element there. It's a low fidelity design

[coderatomy]

@coderatomy i believe @Adaking-slack used that as a placeholder to indicate that there'd be an avatar element there. It's a low fidelity design

Got you! Thanks @Adaking-slack

[pachougu]

@srish i worked on this using the brand guideline and asset, while waiting for you to assign issue/task to me

[coderatomy]

Certainly, @pachougu. This pertains to the page not found redirection page. I would like you to examine the ErrorComponent. Our goal is to establish a more realistic and intuitive error handling mechanism that is easily understandable both to humans and screen readers.

Here's the breakdown of how I envision this component:

Header: Provide a clear and concise title that succinctly explains the cause of the error.

Icon/Avatar: Utilize a realistic icon or avatar that is visually connected to the specific error, enhancing the user's understanding.

Body: Include a straightforward paragraph that outlines the error in detail. Additionally, offer guidance on what actions users can take if applicable.

We need a design that accommodates these requirements, including considerations for font sizes and appropriate icons to ensure a seamless user experience. Your expertise in this matter would be greatly appreciated. Feel free to add anything I missed

[Tegaphoenix]

@Adaking-slack , re the comment by @srish to make it a part of a larger project documenting and fixing error pages across zubhub. On the mobile interface, I also noticed a challenge when you click on ̈ create a project" as a non logged in use, a 404 error page. The sign-in/sign-up page should pop.

Currently On Mobile, what you find is. a) Access zubhub on mobile b) Click burger menu to access create projects c) A 404 error page pops up.

The sequence ought to be: a) Access zubhub on mobile b) Click on burger menu to access create projects tab c) A sign in/sign up pops pop prompting visitor to create a profile.

I would love to work with you to locate more of these and improve the UX and the design.

[coderatomy]

Nice catch @Tegaphoenix!

[Michelle-okechi]

Certainly, @pachougu. This pertains to the page not found redirection page. I would like you to examine the ErrorComponent. Our goal is to establish a more realistic and intuitive error handling mechanism that is easily understandable both to humans and screen readers.

Here's the breakdown of how I envision this component:

Header: Provide a clear and concise title that succinctly explains the cause of the error.

Icon/Avatar: Utilize a realistic icon or avatar that is visually connected to the specific error, enhancing the user's understanding.

Body: Include a straightforward paragraph that outlines the error in detail. Additionally, offer guidance on what actions users can take if applicable.

We need a design that accommodates these requirements, including considerations for font sizes and appropriate icons to ensure a seamless user experience. Your expertise in this matter would be greatly appreciated. Feel free to add anything I missed

Thank you for this @coderatomy I'm working on this

[Michelle-okechi]

@coderatomy what do you think about this?

A second option showing the reason for the error message, the reason for the error and the steps to take

[Adaking-slack]

@coderatomy i believe @Adaking-slack used that as a placeholder to indicate that there'd be an avatar element there. It's a low fidelity design

yes, i do not agree with the image used, so I made use of the placeholder

[Adaking-slack]

@coderatomy what do you think about this?

A second option showing the reason for the error message, the reason for the error and the steps to take

I like the icons used

[Michelle-okechi]

Thank you

[pachougu]

![Uploading drafts - drafts vie_unstructuredstudiofdg.png…]() @Michelle-okechi i have redesigned it

[237Leopoldine]

While acknowledging the commendable work done by @Adaking-slack, I propose implementing a distinct avatar design element. The current depiction of an envelope appears incongruent with our established style guide. I kindly request your assistance in refining this element to ensure its seamless integration within the designated style framework. Thank you.

Surely @srish, I think we should rework on the ErrorComponent to be a bit more flexible and understandable and also better looking. Am open to work after the designs

I agree @coderatomy I think the big "Oops" message should be replaced because it is likely to scare away he user

[d-arkangel]

Hello @srish and @tuxology, I would like to ask if this "add suggestion feature..." is still open for, well, suggestions? Or is it closed?

[Temabo]

Hello everyone , I noticed there is a robot design for the error page already so we can come up with different copies for the pages it is needed and stick with the available design since it fits the ZubHub theme. @srish

[Stephxdesigns]

@Temabo I don't know if a robot glitching would fit the theme for every error page. For instance the no drafts or no projects page or no results can the illustrations send across the message? If the message is to say that something is wrong I think a glitching robot conveys that message

[Temabo]

@Temabo I don't know if a robot glitching would fit the theme for every error page. For instance the no drafts or no projects page or no results can the illustrations send across the message? If the message is to say that something is wrong I think a glitching robot conveys that message

Trueee @Stephxdesigns , We can probably make variations to fit other pages, but a design that still goes with the playful theme. Can we work on this together?

[Stephxdesigns]

Yeah sure I and @Adaking-slack started working on this earlier you can drop your email so I'll add give you edit access to the file so we can collaborate and probably come up with something better.

[Adaking-slack]

hi @srish after conducting research, we were able to discover the following error pages 1) When the user search result is not available 2)When there are no bookmarks, drafts and projects available 3) When an unauthorized user tries to search for a project. after highlighting these pages, @Stephxdesigns and I came up with the following designs

1) When the user search result is not available

2)When there are no bookmarks, drafts and projects available 

3) When an unauthorized user tries to search for a project.

We made use of a more descriptive illustration that is also consistent along all error pages, we also got rid of the "oops" text for better ux practice, considering not all users are native english speakers, and replaced them with a description of the error and a texts directing users to the CTA button

Please let us know what you think, and if the design fits with zubhub's theme

[srish]

Can we get some more variations of the designs shared by @Adaking-slack? I am not entirely satisfied.

[Adaking-slack]

Can we get some more variations of the designs shared by @Adaking-slack? I am not entirely satisfied.

hi @srish is it the variation of the design I just sent, or the first one?

[Stephxdesigns]

Here some other variations to the design

No Project design

No drafts design

No results found design

No bookmark design

Just like in the previous error pages this design uses a uniform image that let's users know that what they are looking whether projects drafts search etc can't be found.

The image on the design can also be aligned to the left instead of the top if that's what is preferred. This is how it would look

Left aligned design

Please let's know your what you think @srish

[DonPresh]

Here are some of the designs I made for this issue.

404 Error search screen.

I improved the copy by telling users the reason what they searched for cant be found and suggested alternative options

No projects screen

Improved the copy and added illustration to spice up the page since our users are youngins and images improve user experience

Draft

I made 3 iterations because I could not decide on what illustration works better

No bookmarks

Improved copy and added an illustration

Clearer view of the draft

@srish I'm still working on the mobile version. Please review!

[DonPresh]

Mobile version of correcting 404 error screens.

404 error search screen

I designed two iterations for this issue.

1. The user gets a straight-up recommendation
2. User clicks button to access suggestions

My Projects screen

Draft

Bookmarks

@srish please review. Thank you!

[Kub-kub]

@srish Here's my attempt for My projects empty state

[Temabo]

Hello @srish These are some variations I have made for this issue; I made some illustrations that fit the theme of the platform.

For the Project" Screen

"No Draft" Screen

"No Bookmark"

Search error

These are the different illustrations I came up with, their colors can be adjusted.

[Stephxdesigns]

Hi @srish some new variations of the design have been added. Please check them out.

[Adaking-slack]

hi @srish after conducting research, we were able to discover the following error pages

1. When the user search result is not available 2)When there are no bookmarks, drafts and projects available
2. When an unauthorized user tries to search for a project. after highlighting these pages, @Stephxdesigns and I came up with the following designs
3. When the user search result is not available

2)When there are no bookmarks, drafts and projects available 

3. When an unauthorized user tries to search for a project.

We made use of a more descriptive illustration that is also consistent along all error pages, we also got rid of the "oops" text for better ux practice, considering not all users are native english speakers, and replaced them with a description of the error and a texts directing users to the CTA button

Please let us know what you think, and if the design fits with zubhub's theme

hi, @srish i made an update to this design taking out the white background and increaing the size of the icons

no project created

No Bookmark designs

No drafts Page

No result and suggestion Page

[yokwejuste]

@srish please final decision on this issue designs

[Mbeute23]

I design 4 error page design which are My projects, Bookmarks, My draft, and Search pages.

My project

My draft

Bookmark

Search

@srish Pls what do you think about the designs

[Boluwatifey1]

Hi, @srish and @tuxology I came up with an idea for this error page, after my thorough user research I discovered that users get confused after an error message pops up so I added suggestions and ideas so as to guide users on the next step to take after getting an error message. I only created for the all projects feature, if I get a go ahead I will design for others

this is the design:

[tuxology]

Hey folks, so I like this approach by @Temabo https://github.com/unstructuredstudio/zubhub/issues/789#issuecomment-1758493341 A few points:

• This design adheres to the robot styled elements we have
• The robots could be improved a bit based on specific error messages (no draft, no project, no activity etc) with some more creativity in them.
• Robot design styling could be more close to robohash styles: https://robohash.org/

[Temabo]

Hey folks, so I like this approach by @Temabo #789 (comment) A few points:

• This design adheres to the robot styled elements we have
• The robots could be improved a bit based on specific error messages (no draft, no project, no activity etc) with some more creativity in them.
• Robot design styling could be more close to robohash styles: https://robohash.org/

Noted! @srish I will modify the designs to fit the error message.
I am open to work with other designers so that we can come up with ideas to improve on it.

[Boluwatifey1]

Hey folks, so I like this approach by @Temabo #789 (comment) A few points:

• This design adheres to the robot styled elements we have
• The robots could be improved a bit based on specific error messages (no draft, no project, no activity etc) with some more creativity in them.
• Robot design styling could be more close to robohash styles: https://robohash.org/

Noted! @srish I will modify the designs to fit the error message. I am open to work with other designers so that we can come up with ideas to improve on it.

I am open to collaborating with you

[Temabo]

Hi @tuxology @srish I designed some variations of robots for the error pages, although I am unsure of which would go where. These are the 4 robots I have been able to design, I tried to incorporate https://robohash.org/ style. Please let me know what you think about these.

@Boluwatifey1 I just saw your comments, this is the link to the figma file, please take a look and share your thoughts https://www.figma.com/file/A1GYQtENXSmPUzB63MTgPj/outreachy?type=design&node-id=657%3A3125&mode=design&t=TiAo3gjS3KxPvl7F-1

[coderatomy]

Nice work @Temabo