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.
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.