CHAPTER 4

DESIGN

4.0

INTRODUCTION

This chapter will focus on the design part of the system. System design will be developed based on user requirements. It is important as the system design will be the guidelines for the system developer in construction phase which will involve coding and testing activities. Design is about creating the human interface for the system. It is also involve organizing and manipulating the database structure. This chapter will show the design of the webpage, use case, data flow diagram (DFD), data structure diagram and the flow chart.

4.1

Use case diagram

Figure 4.1 shows the use case diagram for Beauty Tips portal. There will be two types of users which are the system administrators and users. The website will have 11 functions. The system administrators have the authority to access all the functions as they will update and maintain the information portal. The users have access to 4 only such as Log In, Log Out, Ask recommendation, and view tips.

67

Figure 4.1: Use case for Beauty Tips portal

4.2

Flow chart

This part will discuss how the website works using flowcharts. The flowchart is divided into 2 different users which is Administrator and User. 4.2.1 Administrator

Figure 4.2 shows the flow between the processes for administrator. The administrator will use own personal computer to post all the beauty tips to the user in the portal, if user

68

request tips or tutorial to the admin, admin will decide to updating the portal based on user requirement and twice a month admin will updating the portal and put all tips and important tutorial to the portal.

Figure 4.2: flow chat for admin

4.2.2

User

Figure 4.3 shows the flow chart for user in the Beauty Tips portal. The user will log in to get into chat and they can choose the option in the menu based on their need. User can choose the view a video tutorial and get the tips from the portal. If the user wants other

69

menu they can return back to the home page and choose again what menu they want. User can log out if they done with the chat and get a beauty tips.

Figure 4.3: Flow chart for user 4.3

Data Structure Diagram

Wikipedia states that Data Structure Diagram (DSD) is a data model used to describe conceptual data models by providing graphical notations which

document entities and their relationships, and the constraints that binds them. Figure 4.4 shows the structure of the website when the user opens the website. The structure has 4 levels to open a website based on their need to review a tips and tutorial.

70

Figure 4.4: Data Structure Diagram

4.4 4.4.1

Data Flow Diagram Level-0 Diagram

Figure 4.5 shows the level 0 data flow diagram which shows all the processes involved in the Beauty Tips portal. User can log in after get verification about their username and

71

password to the website and join a community chat. User also can view the tips and ask the admin to update tips that they wanted. Admin will monitor a website and update and

deleting tips from the website.

Figure 4.5: Data Flow Diagram level 0

4.4.2

Level-1 Diagram

Figure 4.6 Level 1 data flow diagram shows all the processes in details. It shows the sub processes and procedures taken in each parent process as shown in the level 0 data flow diagram. Level 1 also shows the sub process of the login process. Firstly all users must enter the username and password. Then system will check the username and password

72

either it is match and valid or not. If the username and password are valid and match, user then may enter the system. If the username and password are not valid and match, user may need to enter again the username and password.

Figure 4.6: Level 1 Data flow Diagram

4.5

Screen Design

Figure 4.7 shows the overview of the Beauty Tips portal will look like. The design shows the main page of the portal when the users open it. Main page of portal shows the most review video tutorial, hot item of makeup brand for current month, and the most review

73

of Beauty tips. For the menu it consist of 6 there are home, beauty tips, video, new trend, chat, and log in, this entire button that will navigate user through the website without any difficulty so that user can have best experience while surfing the Beauty Tips Portal.

Figure 4.7: Overview of the Beauty Tips portal

4.5.1

Home Page Screen Design

Figure 4.8 shows the basic design of the home page. Home page in Beauty Tips portal should be interactive and provide information but still simple so that novice or first time user able to open a website without any trouble. Every section is separate so that user can distinguish between tips that they wanted.

74

Figure 4.8: Basic Structure of Homepage 4.5.2 Video

Video tutorial will be listed on this tab. The user can view the entire tutorial that specifically chosen by the admin based on their demand. The list of video will be updated by admin every two weeks so that user can get updated. Figure 4.9 shows the structure page of video in the Beauty Tips portal that will be developed in the future.

75

Figure 4.9: video tutorial design

4.5.3

Beauty Tips

Figure 4.10 shows the beauty tips page design that been divided into 4 sections. Each section has different tips for the user. For example, if the user wants to view day makeup they can click the section that provide a tips. The other section consists of tips for hair, nail and night makeup for user to review. All the tips can be obtained in this page so that user no need to open many page that can causes limitation of internet connection.

76

Figure 4.10: Beauty tips page

4.5.4

Chat

Figure 4.11 shows the page of chat for user to ask comment about their problem and get information from the user more experience. The chat page has been divided into 2 sections. First is the chat forum for user to communicate with other user. Second is the list of online user so that they know who and get know better each other. Chat page also provide a feedback for the user so that admin know better what user need and dont. Besides that, user also can ask admin to update data or ask admin directly to give a solution for their problem.

77

Figure 4.11: Chat Page Interface

4.5.5

New Trend

Figure 4.12 shows new trend page that divided to 3 sections. First section will be a flash graphic that show the latest trending makeup to catch attention user. Second section will be shows the tips how to get look and tips for user to follow. Lastly, another flash graphic from celebrity who follow a latest trend, this section is to convince user to try a new looks.

78

Figure 4.12: New trend page screen design

4.6

Conclusion

This chapter has discussed about the design part of the system which will be developed based on user requirements. The system design is important as it will be use as the guidelines for the system developer in construction phase which will involve coding and testing activities. Design is about creating the human interface for the system. It is also involve organizing and manipulating the database structure.