The document discusses the design goals and flow for an application called Ovie. It aims to make the functions easy to understand and navigation simple for users. The design is broken into blocks to address unresponsive design issues. Sections are ordered from general to specific both in design flow and prominence level. Images can direct users to detail pages. White space and removing unnecessary content is recommended. The design should accommodate different user types like beginners through clear titles, descriptions and guidance. Detail pages should include navigation, visual cues to return home, and optimized content placement and sizing. Page titles should be clear, informative, specific and answer basic questions about the content.

1. Ovie Application

2. Goals
• Users:
– Understand the functions easily
– Navigate the website with ease
• Design  RWD: Design into blocks.
– The root of unresponsive web is unresponsive
design. Designing in blocks helps solve the
problem from the start.

3. Design Flow
• Design Flow: the direction users look through
a page; Normal flow: 1/ top to bottom, left to
right; 2/ General to Specific
• This flow is also the order to guide users from
the first section to the last section.
• The prominence level of each section is
according to the same order

4. Second
Section
Third
Section
First
Section
Old Design

5. New Design

6. First
Section
Second
Section
Third
Section
From General
to Specific
Image directs to detail page

7. Design Focus
• If the design is not abundant, make use of
white space especially on desktop. Example: G
Suite
• If the content is not important, remove
• Photo size.

8. White Space
Increase photos
To taller size.
If there are 2 columns (categories), these 2 will take up the width of the
page (normally 3 columns). If there is only one, this one column remain
the same size as if there are 2 column and automatically align centrally.

9. Removed
Old Design

10. Design for different users
• Good design focuses on different types of
users: beginners, regulars, etc.
• For beginners, there should be aids and
guidelines to help them get used to the
product: Example: Good title, description for
each section.

11. More informative
wording .

12. What do Users want?
Currency Unit or
Energy Unit?

13. Detail Page
• Navigation bar
• Logo as visual cue to go back home/dashboard
• Move photo to the left hand side.

14. Click to Home/Dashboard
Increase to
the same size,
better and
more detail
wording
Navigation bar
Old Design

15. Setting Page (Updated version)
• Goals:
– Functional
– Compact
– User-friendly

16. New Design

17. Title Convention
• Clear & to the point
• Informative
• Specific
• Answer the following question:
– What?
– Where? (optional)
– When? (optional)

18. Total Energy
Consumption
Energy Usage of … from… to …
“Overall energy usage from all categories of (Ex:)Data Center.”
- This is the page title. When users enter the website, reading
this page title in a few seconds helps them understand the
page’s objectives.

19. Dashboard > Data
Centers - Energy
Consumption Detail
Overall Energy consumption of CH – 14
from … to …
CH - 14’s Energy consumption efficiency
from … to …
CH - 14’s Energy usage cost from … to …

20. Thank you.