UI feedback welcome [homepage screenshot inside 👇]

I’m no designer so would welcome any input to make the home/landing page look better. It is the most critical page.

I’ll share link to webapp for UX feedback later.
:pray:

1 Like

You sir have a gift…

I am terrible with design but want to try to provide something. The only thing I see is that the second two title headings are justified to the left, but the first is centered. It looks like the centered one is a main heading so maybe this is by design, but I cant tell if the size shows its different from the others and should be centered.

The final container it looks like the last rectangular option is cut off, so maybe adding an arrow of some kind to show it scrolls to the right?

The only other thing I can think of is thay the first container has 5 categories but a box that sais 16 options. With that said, if these heading are “favorites” and thus should only have 5. Then this point is not valid and should be ignored!

1 Like

Thanks!

Right, the size of the titles have been reduced. So there’s a clear contrast with the header.

The cut off button is acceptable according to Google UI material website and Airbnb design blog. Users understand it is a scroll because of the cut off.

And yes good point, I have an issue about the way I explain the count. The count is not that of the number of categories but that of the total options of activities across all categories. You are not the first to be confused and I don’t know how to better display this total count.

Could you put “5/16 categories” or something to show the total verse what is visible?

Thanks but I want to find a way to excite users as they glance at a single ‘tag’ showing how many total options there are.
Stay (5/16) | Wellness (1/16) etc… looks heavy and repetitive.
I need to browse design websites like Behance…

Hi @Fred_Kuzyk ,

Just posting couple of thoughts on how I feel on the design…

  • probably better to use a solid colour other than gradient.
  • the page looks a little dark (I think if your app is about creating voucher on general activities, maybe brighter colours will be more uplifting?)
  • use of 1 main colour and 2 supplement colours on the design. So for example the icons will all be in one colour for consistency and less distracting.
  • when I see there are 16 options, I thought there were 16 categories to choose from rather than 5.

These are just my personal thoughts, I hope it can provide some help.

2 Likes

Right, I’ve been told the colored gradient did not fit well. Will switch to plain and/or test a discreet 2-color linear gradient.

Good point too. I test on clear background but it looked cold. Will test in ‘between’ colors.

I really need these icons in multicolor, this is what’s uplifting, looking feisty like multicolor balloons at a bday party.

Yep, this is an issue. 16 is the sum of the counts below each category. Not sure about the wording to make it clear…

I may do something like this:

use gradient coloured borders on buttons, boxes etc.

If it’s a white background could use brighter colours on text, buttons, it could help lift up the tone.

instead of labeling it as categories, how about words like Selections, Activities? I may just remove the total count if there is not much to choose from in the beginning.

How do you do this? Border colors options are limited to HEX colors but i can’t use a gradient color image?!

Will test this… Thanks

I moved the count out of the category window and removed the count for budgets. Looks more clear.
Will share result soon here. Thanks tons for your input.

Greetings and a big hug, @Fred_Kuzyk.

On the first main page of the interface, I tried using an X or Y icon and explored the possibilities that arose with the title.

For the informational cards, I reduced the space on the sides so that they didn’t look so close to the edges, which gives the impression that there is breathing room when the user scrolls through the screen.

I used a gradient background with an image opacity of 35%.

The cards have a #FFFFFF background color with a 15% opacity.

In the option menus for each card, I moved them and leveled them to the same height as the card title. Both the card title and menu options are in white to make the more highlighted colored icons and titles more aggressive.

In the last “Budget” card, I added a nearly dark background with the code #1C1C1C to make the category images stand out more vividly.

Also, just as an experiment, I added titles on the cards above the prices to make them more aggressive and provide good information to the user.

The icons used are from the free website https://www.svgrepo.com/.

The gradient effect, which is a background image, is from the website https://gradients.ray.st/.

The benefit of having an application with a dark look like yours is that it is less tiring for the eyes and helps save battery compared to an application with many white colors.

2 Likes

Thanks for the time you took to make this!
I’ll have to do one dark and one clear theme to swap with a toggle.

Will share results soon with all the insights you guys shared.

1 Like

Any comments welcome.

2 Likes

I like the lighter, brighter colors and feel - the spacing is better with the newest version.
A few opinions:

  1. Remove the total products and services number, it doesn’t do anything to enhance the experience and is confusing and takes up top real estate.
  2. The way the “Build your voucher” sits is strange, it looks like it’s half way scrolled down on a full block.
  3. I’m not clear on the actual functionality or how to get there in 2 clicks - is the idea to highlight by finger-click one of the categories then highlight the budget range and have it spit out options? If you have to go into the categories to pick one of those then it is more than 2 clicks.
  4. What is the benefit of showing how many items are within each category? How does that help the end user do anything different (i.e., would I pick shopping because there was more than 1? Probably not).

Anyway - I do think this is improving. Good job overall.

1 Like

I didn’t even know such complex designs are possible in appgver. How did you manage to get the glassmorphism effect??

Thank you for the precious feedback!

  1. I’ve build the electronic / mobile version of the popular experiential gift boxes sold everywhere in Europe. All boxes from all 3 main competitors mention the total number of experiences. It contributes to the excitement and helps to impress the buyer. I’ve worked for this company a few years back and adding the count helped to boot sales.

  2. Maybe because the container has rounded corners? Wanted the rounding to feel smooth / less aggressive, but I can make the line straight.

  3. The two questions invite the user to select a category and a budget = 2 clicks. After that, you get a result page with, say all voucher options “for her” at 99 USD. Any way to make it more clear?

  4. The count under each buttons invites the user to venture into the category, a bit like Amazon has counts next to each main category. Much like in point #1 it helps boost excitement and curiosity.

Curious to see what other people think about the count. Your questionnement is valid and I take it seriously, but let’s see what others have to say…

1 Like

It’s possible when you make yourself struggle and research a lot.
This effect is done with a play between shadows and their color and transparency of the background.

I wish we had more control over the shadow for each separate side of a container to create a stunning rendering I had in mind…

1 Like

Just my opinion of course - do what you feel is best. To me as a buyer, I don’t care how many options are listed I just want to find the right one for me as easily and quickly as possible.

I am not a fan of the gimmicky stuff like gradient backgrounds, etc. I like a clean and easy to understand interface. Maybe your audience is different though.

Here is my version of what I would do if I was building this out - I also might use tabbing to separate out New Vouchers - Upcoming Vouchers - Past Vouchers as well. For right now I just created placeholders at the bottom for navigation purposes using the menu navigation options - but you could use soft tabs. I don’t think end users care about dark/light mode as much as developers do.

For the categories, I would just use infinite scrolling for as many are available. Don’t use too many though.

I hope this helps.

3 Likes

Thanks for your input as always.
Did you make your mock-up with webflow or figma? I hesitated to use 3D looking icons and now I can see these look fun and feisty.

I wanted to use a slider last year when i started this project but I have a hard time with Appgyver components. And then I felt like the slider looked like a tool for a finance / banking app not so much like an inviting, fun tool for a feisty app. Plus, there may be up to 15 price points, which may make it harder to slide to a desired price if too many points are squeezed together on such a “narrow slider”. What do you think?

The number of categories should reach 15 ultimately.

1 Like

I built this in AppGyver - the icons could be whichever design you prefer - it was just an example of how I would lay it out.

I understand your hesitation about the slider - this version of the slider is definitely limited. I didn’t spend too much time trying to customize is but I think you can customize the components and the slider could definitely be improved. I would use a slider vs. having all the different price points listed out with images… if you look at ticketmaster or any event site they do a slider for price range. It makes it easy to set. Alternatively, you could do a drop down with different price ranges but that is clunkier.

Bravo!

Well you inspired me and I will try again to tame this slider. I’ll try to make the dot larger.

I will also use mucher larger icons that look playful.

Thanks for all!

UPDATE: The slider ain’t gonna work, no way to use my list of repeated price points objects. Not sure why the component asks for the increment value + min/max values when a simple list of value would suffice.

1 Like