The document discusses implementing a new user interface (UI) for an existing system called Uranus. It outlines problems with the current UI and proposes solutions based on research into UI/UX best practices. This includes comparing competitors, analyzing design trends, and wireframing new screens. Research covered principles like minimalism, flat design, typography, navigation and information architecture. The goal is to improve the aesthetic and make the system more responsive based on a UX design process of discovery, user research, brainstorming and prototyping new screen designs.

1. Prepared by :
Mohd Syaheezam Asyraq
Eswati Azni
Version : v1.0
Date : 18/10/2013
Implementing a killer UI

2. PROBLEM
PROBLEM STATEMENT
• THE REQUIREMENT IS TO IMPROVE THE DESIGN OF
EXISTING SYSTEM (URANUS) IN TERM OF “AESTHETIC”
/”WOW! FACTOR”.
• RESPONSIVE.
• NEW DESIGN
• CSS

3. PROBLEM
UXD PROCESS
Current stage

4. 0.1 DISCOVERY 1 ONLINE RESEARCH
2 USER DISCOVERY
3 COMPARISON STUDIES
4 BRAINSTORMING

5. PROBLEMLITERATURE
“You need to know how to build
things in order to design them
appropriately. However when it
comes to saying what makes up
web design, my answer remains
Interface Design, Information
Design and Aesthetic Design. “
Collins

6. PROBLEMINFORMATION DESIGN
User don’t read,
They scan
Jakob Nielsen found that only 16% of people
read word-by-word. What about the rest? Yes,
they SCAN and Scan and scan…

7. PROBLEMEssential Principles for Good GUI/Web Design
PRECEDENCE (GUIDING THE EYE)
• Good Web design, perhaps even more than other type of design, is about information. A
simple example of precedence is that in most sites, the first thing you see is the logo.
• To achieve precedence you have many tools at your disposal:
– Position — Where something is on a page clearly influences in what order the user
sees it.
– Color — Using bold and subtle colors is a simple way to tell your user where to look.
– Contrast — Being different makes things stand out, while being the same makes
them secondary.
– Size — Big takes precedence over little (unless everything is big, in which case little
might stand out thanks to Contrast)
– Design Elements — if there is a gigantic arrow pointing at something, guess where
the user will look?

8. PROBLEMINFORMATION DESIGN
User don’t read,
They scan
Writing for web…

9. PROBLEMEssential Principles for Good GUI/Web Design
NAVIGATION
the most frustrating experiences you can have on a Web site is being unable to figure out
where to go or where you are.
– Navigation — Where can you go?
– Orientation — Where are you now?
SPACING
• Spacing makes things clearer. In Web design there are three aspects of space that you
should be considering:
eg: Line Spacing, padding, white space

10. PROBLEMTYPOGRAPHY

11. PROBLEMGRAPHIC PRESENTATION

12. PROBLEMEssential Principles for Good GUI/Web Design
VISUAL STRATEGY
– Photos, charts and graphs are worth a thousand words. Using visuals effectively can
enhance readability when they replace or reinforce long blocks of textual content.
– What you can do:
– Make sure images you use aid or support textual content.
– Avoid stock photos and meaningless visuals.

13. PROBLEMLITERATURE

14. PROBLEM
LANDING PAGE
Features
About
Entry Point
Testimonial
Menu
Login/Personal
Setting
Clients
Social Media/
Terms

15. PROBLEMCOMPARISON STUDIES - example
• Ranking on common search terms
• Overall look and feel of the site
• Clarity of proposition and price
• Clarity of calls to action
• Availability and clarity on what cover the policy offers
• Ease of contacting insurer
• Ease of accessing quote section
• Clarity of what is needed to complete quote
• What questions are asked?
• Is the progress and length of form clear?
• Length of form and how the form is grouped into sections
• How errors are dealt with
• Is it clear how to progress through the form?
• What is done to engender trust?
• Is it clear how to get help as you fill out the quote form?
• What information is given with the final quote?
• Can the user e-mail or save the quote?
• Is it clear what you should do next?
• Strengths of process
• Weaknesses of processes
• Overall summary of the experience

16. PROBLEMCOMPARISON STUDIES - FRONT PAGE
Features Testimonial Social
Media
Client List Task Steps FAQ Demo Video
✔ ✔ ✔ ✔ ✔ ✔
✔ ✔ ✔ ✔
✔ ✔ ✔ ✔
✔ ✔ ✔
✔ ✔ ✔
4 3 2 3 1 3 4
✔

17. LANDING PAGE
• engaging headlines
• simple and specific language
• benefits before features
• clear and compelling proof
• express calls to action
• confident guarantees
what makes a good landing page

18. COMPARISON STUDIES – COMPETITORS GUI
1 MINIMALIST
2 CLEAN
3 FLAT DESIGN
4 BIG TYPOGRAPHY

19. COMPARISON STUDIES – COMPETITORS GUI
1 MINIMALIST
2 CLEAN
3 LESS SEGMENTATION
4 BIG TYPOGRAPHY
5 BIG IMAGES

20. COMPARISON STUDIES – COMPETITORS GUI
1 MINIMALIST
2 CLEAN
3 LESS SEGMENTATION

21. COMPARISON STUDIES – COMPETITORS GUI
1 MINIMALIST
2 CLEAN

25. PROBLEMWEBSITE LATEST TREND
1 RWD
2 FLAT DESIGN
3 PARALLAX
4 SCROLLING INNOVATION

26. RWD – RESPONSIVE WEB DESIGN
1 CLARITY
2 BETTER EXPERIENCE

27. FLAT DESIGN
1 LACK GRADIENTS
2 NO SKEUMORPHISM
3 SOLID COLORS
4 WHITE SPACES
5 CRISP TYPOGRAPHY

28. SCROLLING INNOVATION
1 ADVANCED PAGE
2 Eg : LODGIFY.COM ,
ASUS
TRANSFORMERS
3

29. 0.2 WIREFRAME 1 USE CASES
2 WORKFLOW
3 SITEMAP
4 SCREEN WIREFRAMING
5 MAJOR INTERACTION

30. PROBLEMCURRENT SITEMAP

31. PROBLEM
Determine
Task
Recruit
Participants
Launch Study
FLOW – loop11.com

32. PROBLEMFLOW – usertesting.com
Create Your
Test
System Notify
the target
Get Feedback
Share with
team