search

lil-lab / recnet

A human-driven recommendation system for academic readings.
https://recnet.io
MIT License
3 stars 1 forks source link

Design new UI #80

Closed yoavartzi closed 8 months ago

yoavartzi commented 9 months ago

Create mock ups for both desktop and mobile interfaces. This should include a complete design of the UI emphasizing modern and simple design. We need higher information density than our current UI.

swh00tw commented 9 months ago

To clarify, could I modify the user flow (e.g. change the placement of the Logout button #47) or just change the skin (UI) of the website without modifying the user flow (UX)

yoavartzi commented 9 months ago

@swh00tw I have a sense some minor tweaks that are part of the UI overhaul (https://github.com/orgs/lil-lab/projects/12/views/1) are best considered alongside the re-design of the UI. Right? In general though, except such relatively minor issues, I would prefer to focus on the skin, so we do one thing at a time.

swh00tw commented 9 months ago

The new mockup is here. Feel free to leave comments or feedback in Figma! Some of the wording may need changes or improvements. To switch to dark mode, press esc to deselect everything, then find "Color Scheme" in the right panel and select "dark".

If everyone is satisfied with it, I can begin refactoring the frontend.

To see new design, click the link below and login, and go to page "Mockup v0".

https://www.figma.com/file/U0Xu4urIR37mx3QpijGWvs/RecNet-UI?type=design&node-id=1404%3A2267&mode=design&t=5BUWfou5IWcVbXg1-1

yoavartzi commented 9 months ago

Look really good.

yoavartzi commented 9 months ago

I also wonder if we can get higher information density. This is an issue with our current design, and the new design inherits this. Feed pages and profile pages should allow for more items. I think we can play with rec card a bit to make it more efficient.

Also, in the future, we will attempt to identify when multiple users rec the same paper and merge it in the feed, so we should design the card to support this. This means that the user name shouldn't lead the rec, but maybe conclude it (bottom right), and in the future we will pack multiple profiles there.

The All Users page can also be more economical in space. You can already see the issue with our current page. LinkedIn does a pretty good job (https://www.linkedin.com/mynetwork/) with their cards. Their design also fits nicely for future development where we recommend people at the top of that page in a way that is customized to the user.

swh00tw commented 9 months ago

Look really good.

  • We probably need an invite code screen as well.
  • How customizable is the color scheme? Purple is nice, but I would like to play with other options a bit to see how they look.
  • Is this mobile friendly? Is there a way to get a mobile view on Figma?
  • Can we incorporate a more stylized brand name at the top left? --> Logo: brand name and icon #93
  1. Can you elaborate more on the invite code screen (what should it contain? An example would be nice)
  2. Got it, I will add mobile support and email digest design next.
  3. I think new brand would be cool but I have no good idea about it now. @joannechen1223 would you want to try to generate one? lol
swh00tw commented 9 months ago

I also wonder if we can get higher information density. This is an issue with our current design, and the new design inherits this. Feed pages and profile pages should allow for more items. I think we can play with rec card a bit to make it more efficient.

Also, in the future, we will attempt to identify when multiple users rec the same paper and merge it in the feed, so we should design the card to support this. This means that the user name shouldn't lead the rec, but maybe conclude it (bottom right), and in the future we will pack multiple profiles there.

The All Users page can also be more economical in space. You can already see the issue with our current page. LinkedIn does a pretty good job (https://www.linkedin.com/mynetwork/) with their cards. Their design also fits nicely for future development where we recommend people at the top of that page in a way that is customized to the user.

So let me conclude a bit.

  1. Feed page, Profile page, and All users page should have higher information density, which means they should be able to accommodate more items.
  2. The user name shouldn't lead the rec card.

I will try to adjust the layout and try to make the usage of space more efficient. I agree we can make things more efficient. The LinkedIn user card is a good idea. The reason it inherits the current design is that I thought I just had to to change the skin originally. So I didn't change much😅

About the second one, can I put the people who recommend the same paper on the top-left of the card? And the wording would be something like "A, B, C all recommend this paper" if we have multiple people recommend the same paper. The avatars will be displayed like this.

Screenshot 2024-01-12 at 12 16 17 AM
swh00tw commented 8 months ago

Close after #112 merged