UI for skin care routines (two versions) - seeking advice

Question

I created a UI for displaying skin care routines for my website.

This will be part of a profile page , and when a user creates a post on the discussion board, this will be also included in the post detail (work in progress, but screenshot here).

I tried my best but I don't have a design background and would like to find ways to improve it.

Shown below are the screenshots of the two versions: In the first version, the Day routine and Night routine are combined; in the other one, Day routine and Night routine are separated.

Day routine + Night routine combined view: Day routine / Night routine separated view:

Here are some of my concerns:

• In the top version, Day, Night, Day & Night info with Sun/Moon/Sparkles Icons info is not very easy to parse. In the bottom version, Day & Night routines are clearly separated.
• In the bottom version, if a product is used both day and night, the same information is repeated. This is even worse when the reviews are shown (screenshot), since the same long text is repeated. On a phone, only one column can be shown the night routine goes under the day routine. This becomes very lengthy with repetitive information. The top version is more succinct and cleaner
• In the top version, some 'rows' (e.g. Pre-cleanse) have only one column, and others (e.g. Serum/Essense) have two columns. I'm not completely happy with either. Rows with one column look empty on the right side. Rows with two columns have an awkwardly floating border that only extends the length of that row.
• Overall, the information on these UIs is very dense, and it's very difficult to present it in a way that makes parsing the information more easily. I'm not sure if there's a lot more potential to improve it far more. For one, I could use more colors, but I'm just conservative with it since I'm not sure where to use it other than some important buttons. (product photos would be nice but they're copyrighted).

Any general feedback or feedback on any of the points above would be greatly appreciated.

Answer 1

Personally, I see the first option as quite confusing, it doesn't make it clear to the user which is the day, night, and combined options. The second variant is somewhat repetitive. As a user, a valid option in my opinion could be the checkbox with a clear division between day and night. In this way, it's not only clear what the products and the routine are, but also what the repeated options are at the prescribed time.

Answer 2

What are the goals of people who will glance at this screen?

What information are they looking for? Are there different type of users who are looking at this?

The only real advice would be to go and talk to the users that might interact with this screen.

When you are designing this page you are focusing on structuring the information in a clear and logical manner but although that is a good thing there is another facet to it.

As a user what do I want to learn from that view?

What are the most important parts there for the different type of users? Is it to view the type of products and their frequency or is it more important to see if someone is having a good morning routine but a bad night one? Or if they want to see that they are not going through moisturising phase or if they do that in the morning but not at night.

Trying to understand what people want to learn from this page will help you design it better.

Answer 3

Why elevate the day and night application to the level of dividing the page? (...genuine question—please explain.)

Reading the website user comments it appears products, experiences, and skin conditions, are the primary focus. In that case, simply use day and night icons within the details for each product:

---

 

---

Color can be added to emphasize the time of application over the other details: