Refined User-flow Wireframes
Smartwatch
1. Purchase a personalized luggage tag
2. Inquire about corporate orders, i.e. hotels, flights, through a form
3. Read about sourcing and types of leathers
4. Read about leather care
5. See gallery of samples curated from user generated content, i.e. Instagram
Constraints
- UI is very small compared to desktop dimensions
- With reduced space, navigation bar is revealed when clicking on the hamburger button
- Can’t attach files. Must have files uploaded to Smartwarch which is not possible.
- Footer reduced to minimize screen real estate, otherwise there will be too much scrolling involved. Some footer links have been added to navigation.
- Interactions often requires finger tapping and swiping which lacks precision
- Use of drop-downs require interaction as hover states are not supported
- To account for less precise control, there can only be one form field or button spanning across the screen
- To account for less precise control, radio buttons are replaced with a drop-down field
- Carousels and Instagram feeds support clicking/swiping interaction
- To account for less precise control, comment box is no longer expandable. A scrollbar will appear when there the text passage exceeds the length of the comment box.
Smartphone
1. Purchase a personalized luggage tag
2. Inquire about corporate orders, i.e. hotels, flights, through a form
3. Read about sourcing and types of leathers
4. Read about leather care
5. See gallery of samples curated from user generated content, i.e. Instagram
Constraints
- UI is narrower than desktop dimensions
- With reduced space, navigation bar is revealed when clicking on the hamburger button
- Can’t attach files. Must have files uploaded to phone which is not possible on some phones.
- Footer reduced to minimize screen real estate, otherwise there will be too much scrolling involved. Some footer links have been added to navigation.
- Interactions often requires finger tapping and swiping which lacks precision
- Use of drop-downs require interaction as hover states are not supported
- To account for less precise control, there can only be one, sometimes two, form fields or buttons spanning across the screen
- To account for less precise control, radio buttons are replaced with a drop-down field
- Carousels and Instagram feeds support clicking/swiping interaction
- To account for less precise control, comment box is no longer expandable. A scrollbar will appear when there the text passage exceeds the length of the comment box.
Gaming Console (Connected to a TV)
1. Purchase a personalized luggage tag
2. Inquire about corporate orders, i.e. hotels, flights, through a form
3. Read about sourcing and types of leathers
4. Read about leather care
5. See gallery of samples curated from user generated content, i.e. Instagram
Constraints
- Projected on TV Screen which requires a much wider UI compared to desktop dimensions
- Line length needs to be short to aid readability. A lot of white space around text will surround text passages due to wider screen
- Interaction requires a console controller which lacks precision
- Hover states are supported
- To account for less precise console controls, form fields and buttons have a greater length
- To account for less precise console controls, radio buttons are replaced with a drop-down field
- Carousels and Instagram feeds require clicking interaction
- To account for less precise console controls, other product views automatically scroll up when the user reaches the bottom of the product view series and scroll down when the user reaches the top of the product view series. Remove use of arrow buttons to navigate. Similar auto-scroll application to Instagram feed.
- To account for less precise console controls, comment box is no longer expandable. A scrollbar will appear when there the text passage exceeds the length of the comment box.
- Navigation bar is sticky to reduce scrolling
