Page Redesign
Thinx Cycleset-kit
3. how many pairs of each style
Existing Page
Key Issue
It is hard to understand the interface that users can move between selected style options.
1. Style Option Navigation
The interface is unclear. It is difficult for users to understand that they can click on each style to select a quantity.
2. Buttons to Move Between Styles & Button to Go to Review Page
'prev style' and 'next style' buttons are located on the place where buttons for next page are located on other pages. This inconsistency confuses users to understand the function of the buttons and what they have to do.
Redesigned Page
Annotation
1
Page Heading
Because of the page heading is too big, the subheading, which is the actual title of the page, does not stand out enough. This hinders users' understanding of the purpose of each page; therefore, I reduced the size of the text.
2
Page Subheading
To help users understand the purpose of each page, I enlarged the subheading, and increased the margin at the top and the bottom so the subheading stands out.
3
Style Option Navigation
I changed top navigation to side navigation because
-
side navigation enables me to allow more space between the heading section and the navigation option, so users can distinguish these sections easily.
-
By distinguishing the heading and navigation sections, I can emphasize that the navigation function is different from the headings.
3.1
Active Style
I placed a black line next to the active style option to emphasize that it is the style users are looking at and to distinguish it from other inactive style options.
3.2
Inactive Style Title
To distinguish the inactive style options from the active style option, I reduced the opacity of the style name text so it is like that of the style images.
3.3
Arrow of the Carousel
If users select more than 3 styles, the arrow is shown to inform them that there are more options, and users can move to these options when they click on the arrow.
4
Review Selection Button
This button is present from the beginning but inactive until users see the last selected style section to inform them of the next step, and to provide consistency with other pages.