Rework UI - suggestions?


I’m working on a new UI for the homepage. What do you think? Any suggestions or feedback?

4 Likes

I like it, maybe you can add a poll to your post? and what about your Github Profile?

Can we have something in the Collections screen marked in red. This needs to be what pack is needed to open much like it says on the Overview page. I’m finding that I get long load times on the Collections screen but I need to go to the Overview page back and forth. I have another forum topic on this issue if you link back through my profile @JaViJeC thanks

Doesnt right click Open in a new tab, solves all your loading issues?

I mean, meanwhile they add the feature.

@JaViJeC Some ideas:

In the top part of our insights:

We could use these radial charts from shadcn to display the numbers:

The horizontal progress bars you used look like, well, progress bars, so it looks like you have to get them to 100%, but it’s the opposite, it is the chance you getting a new card from that pack. That’s why we use the vertical bars instead. Because a ‘lower bar’ means lower chances. I don’t think that is very obvious in your design.

Finally, of course, also make sure it works well on mobile.

1 Like


Here is a proposal, always open to improvement. I think I found a balance that has less text and is more intuitive. If someone is good at UI design I have no problem to rewrite the code to apply it.

2 Likes

Instead of inserting the generic sprite of the Pokemon, why not insert directly the png of the pack or its logo?

I honestly don’t know how much a PNG can affect the loading speed, but if you want to put one in, I think the pack logo makes you recognize it faster than the “Lunala pack” wording with the sprites next to it.

I also see that in the lower part in the Genetic Apex section next to the title you have inserted the PNG of the logo which however is repetitive, I suggest putting only the PNG.

I know that the logos of the packages change based on the language, for example I use the app in Italian, but in any case the color scheme is always the same and you can recognize it from that

I also suggest that the box indicating the pack with the highest probability contains a link that takes you to the collection tab with the filter already applied for that pack.

3 Likes

Love the proposed new visuals landing page.

I have two suggestions:

  1. I’ve found the wording (Charizard pack) to read a bit clunky since it was swapped over. I think either just ‘Charizard’ or ‘Genetic Apex - Charizard’ is a bit cleaner to read.

As for the other text, the current wording “Palkia pack is the most probable pack to get a new card from among Palkia pack, Dialga pack” could also be shortened to “[pack name] is the most probable pack to get a new card from [set name].

e.g Palkia pack is the most probable pack to get a new card from Spacetime Smackdown.

  1. Whenever a change is next made, can we please be able to access the ‘Collection’ page straight from the home page on mobile?

As it currently stands we have to open the menu and then select collection. The two options along the top (overview and scan) are both useful for quick access, but the overview page on the home page is a bit redundant as it’s a link to your current location.

What if that overview link is replaced by collection when you’re on the homepage, and remains as a link back to overview when in your collection?

@ user709 I believe that the intended purpose of the link was for it to say there Collection and not Overview. I did not realize of this inconvenience before, but it makes sense.

And I believe that since we already have the page translated to most languages we could add the picture of each expansion according to their language.

After thinking about it a bit, maybe this is the version I would propose. The top pack is immediately recognizable.
While in the Genetic Apex section I inserted the PNGs of the expansion logos and the individual packages that are still recognizable because we see them continuously in the app.

Obviously the spaces can be managed better but I did this edit on an app i my iPad :sweat_smile:

2 Likes

I really like the idea of adding those images. The only issue is finding PNG or WebP files with acceptable quality to insert them properly.

Incredible. If this is doable, it would be a fantastic addition.

https://v0-web-app-redesign-9xvyidlmc-javijecs-projects.vercel.app/

I’m still trying things, V0 made me this design

Good idea, I just added this.

4 Likes

How about changing the bars to something like this?
I mean to put the names, a drawing and the percentage. Then, we would change the colors and the format in which they are ordered. When I look at the bars, especially when the percentages are very low, they don’t give me any information.

2 Likes

Yeah, I agree that the bars perhaps needs to be rescaled to the closest (perhaps N*2) , so that they show the maximum probability. And they look nice.
Since the data is visible in numbers already, I believe that they loose functionality.


An acquaintance made a design for me.

I’d personally think about future-proofing the Overview page to some extent. If the game continues to add new boosters monthly, that’s going to make the Overview page very long and a chore to deal with.

My thought would be to potentially group the boosters together by pack number (all the A1’s, all the A2’s, etc). and allow for horizontal scrolling but website design is not my passion.

1 Like

Hi guys, I think you’re trying too hard to use all the space on the screen. All you need to do is use the logo for each pack and have a progress bar next to that and ‘you have 259/283’… This will be in a list sorted by most progress made to completion.

[Pack Logo] [Progress Bar] [you have 259/283]

Go minimal and you’ll nail it :slight_smile:

1 Like


I am working on an Android version on my own. The idea is that donations will also go to @marcel who maintains the database.