USER EXPERIENCE DESIGNJuthamas Vadhanapanich
JUTHAMAS VADHANAPANICHART DIRECTOR / UI & UX DESIGNER
August 2013 - PresentART DIRECTOR / COCONUTS MEDIA LIMITEDHead of art department. Manage multiple projects from concept through completion. I am charged with deter-mining the best ways for us to visually represent the companyâs identity.
- Art direction- UI/UX direction - Storytelling idea on VDO project- Photography selection
13 years of experienceJanuary 2012 - PresentSENIOR ONLINE MARKETING EXECUTIVE / HOUSE OF GRIFFINWork on the digital media and marketing, social media, onsite implementation and general design. Analyze the website and business situations quickly. Develop insightful, thorough reommendations to improve techni-cal, design, content, on-page and oïŋ―-page optimization elements.
I do flexibility, creativity, project and time management, business savvy and excellent verbal and written commu-nications. I have experience with social media, product launches, web analytics tools (Google Analytics), search engine marketing (SEM) and search engine optimization (SEO). I am also responsible for doing SEO and Adwords. Plus I do graphic design, product design and web design.
January 2010 - July 2013VISUAL DESIGNER / REUTERS SOFTWARE (THAI-LAND) LIMITEDDesign financial (stocks, currency exchange, markets) UI/UX for software, iPad, iPhone, widgets and website. I design interface for KBC Bank (Belgian universal multi-channel bank), Barclays (UK) and DBS Bank. I also design LCD TV interface (big screen on the wall) for Shenzhen Stock Exchange in China. I coordinate with product managers and programmers to ensure sitemap, flow diagrams and wireframes are properly translated to the live site. I also do the HTML5/CSS3.
The project I'm working on is "Internet Suite" the native application on iPad. The Internet Suite app allow you to view market quotes, news and charts sourced from Thomson Reuters Internet Suite (TRIS) product.
JUTHAMAS VADHANAPANICHART DIRECTOR / UI & UX DESIGNER
Education Medias1996 - 1999Srinakharinwirot UniversityBachelor Degree of Fine Arts (major: Visual Arts and Communications Design) Grade / GPA: 3.19
1990 - 1994Triamudomsuksa Nomklao SchoolGrade 12 (major: Arts and French) Grade / GPA: 3.0
Age 3 - Grade 6Benjamin College Grade / GPA: 3.1
September 11, 2007AN INTERVIEW ON DAILY NEWSI gave an interview on Techonology section about my blog www.juth.net
2010AN INTERVIEW ON T.A.B. RADIOI was interviewed by DJ Private on T.A.B. Radio which created by Foundation for the blind in Thailand. We discussed about how web accessibility was going in Thailand.
SkillsHTML5
CSS3
Responsive Web Design
Sketch App
Photoshop
Illustration
Dreamweaver
Cartoon Character Design
WHAT ISUSER EXPERIENCE DESIGN?User experience (abbreviated as UX) is how a person feels when interfacing with a system.
The system could be a website, a web application or desktop software and, in modern contexts, is
generally denoted by some form of human-computer interaction (HCI).
āļāļēāļĢāļāļāļāđāļāļāļāļĢāļ°āļŠāļāļāļēāļĢāļāļāļēāļĢāđāļāļāļēāļāļāļāļāļāļđāđāļ āļāļ·āļāļāļ°āđāļĢāļāļ·āļ āļāļļāļāļĄāļļāļĄāļĄāļāļāļāļĩāđāļāļđāđāļāđāļāļĄāļĩāļāļāļīāļŠāļąāļĄāļāļąāļāļāļāļąāļāļāļĢāļīāļĐāļąāļ, āļŠāļīāļāļāļē, āđāļĨāļ°āļāļĢāļīāļāļēāļĢāļāļ·āļ āļāļ§āļēāļĄāļāļķāļāļāļāđāļāļāļāļāļāļđāđāļāļāļĩāđāļĄāļĩāļāļāļāļēāļĢāđāļāļāļēāļ
Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, eïŋ―ciency in performing tasks and so forth.
UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how eïŋ―cient and pleasant is the experience of users fill-ing out input fields in a Web form.
Compared to many other disciplines, particularly Web-based sys-tems, UX is relatively new. The term âuser experienceâ was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).
What Is User Experience?
Stop Thinking About Interfaces, Start Designing Experiences
āđāļĄāļ·āđāļāļāļđāļāļāļķāļ User Experience Design āļāļāļāļ°āļāļēāļāđāļĄāđāļāļāļĩāđāļāļ°āļāļđāļāļāļķāļ
USER INTERFACE DESIGN
USABILITY DESIGNāļāļēāļĢāļāļāļāđāļāļāđāļŦāļāļēāļĒāļāļāļāļđāđāļ āđāļĨāļ°āđāļŦāļĄāļĩāļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāđāļāļāļēāļĢāđāļāļāļēāļ
Definition of Usability = how easy & pleasant these features are to use.
āļāļēāļĢāļāļāļāđāļāļāļŦāļāļēāļāļēāļāļīāļāđāļāļāļĢāđāļāļ āļāļīāļāđāļāļāļĢāđāļāļ āļāļ·āļ āļāļēāļĢāļāļīāļāļāļāļāļĢāļ°āļŠāļēāļāļĢāļ°āļŦāļ§āļēāļāđāļāļĢāļ·āđāļāļāļāļāļĄāļāļīāļ§āđāļāļāļĢ āļāļąāļāļāļđāđāļ āļĒāļāļāļąāļ§āļāļĒāļēāļ āđāļāļ āļŠāļ§āļīāļāļāļāļąāļāļĨāļĄ āļāđāļāļ·āļāļāļāļāļāļēāļāđāļŦāļāļđāđāļāļāļīāļāļāļ āļŠāļ·āđāļāļŠāļēāļĢ āđāļĨāļ°āļāļ§āļāļāļļāļĄāđāļāļĢāļ·āđāļāļāļāļąāļāļĢ
āļĒāļāļāļąāļ§āļāļĒāļēāļāļāļēāļĒāđ
USER INTERFACE DESIGN
USABILITY DESIGN
USER EXPERIENCE DESIGN
A contact form for a user to submit a complaint
A contact form with only 3 fields that's clearly labelled
Having someone respond to the message within 10 minutes
PRODUCT DESIGN
USABILITY DESIGN
USER EXPERIENCE DESIGN
The original iMac
Everything is built in, no confusing cables
When you open the box, the first thing you see is a handle - to help you lift it out.
UX DESIGNERJOB DESCRIPTION
Work with clients to understand detailed requirements and design complete user experiences that meet client
needs and vision
Design and deliver wire frames, user stories, user journeys, and mock ups optimized for a wide range of devices and
interfaces
Adapt soliciting and using customer insights as well as thinks intuitively about customer needs
Strong conceptualization ability, design thinking and strong visual communication ability
Producing eïŋ―ective and attractive digital solutions within a timeframe
Collaborate eïŋ―ciently with designers, production managers and developers
Can think at all layers, from product (system) design, to interaction, to beautiful pixels
Demonstrated success in designing and delivering compelling products in a high growth, fast pace rapidly changing
environment that delight users
Solid understanding of grid systems, typography, web and mobile interface trends
Collaborative mindset and interest in working with product and engineering teams to ship products
WHAT DOES AN UX DESIGNERACTUALLY DO?
CONTENT INVENTORY
In the simplest of terms, content inventory is an organized list of pages on a website. Doing a content inventory is a step towards proposing changes in information architecture to enhance the user experience (e.g. user flow, find-ability and eïŋ―ciency).
WIREFRAMESA wireframeâa rough guide for the layout of a website or appâis the deliverable most famously associated with being a UX Designer.
Based on their findings, UX specialists might develop wireframes of diïŋ―erent layouts and perhaps also higher-fidelity prototypes.
Many designers have diïŋ―erent processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mock-ups. But when you skip one or the either, you lose a lot of conceptual detail and refine-ment. The interface suïŋ―ers because it enters into a stage prematurely and isnât thoroughly refined.
Sketch Wireframing can be done simply with pen and paper.
Wireframe, prototype, mockup â whatâs the difference?What is a wireframe?A wireframe is a low fidelity representation of a design. It should clearly show:â the main groups of content (what?)â the structure of information (where?)â a description and basic visualisation of the user â interface interaction (how?)
What is a prototype?A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface inter-action. It should allow the user to:â experience content and interactions with the interfaceâ test the main interactions in a way similar to the final product
What is a mockup?A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:â represents the structure of information, visualises the content and demonstrates the basic functionalities in a static wayâ encourages people to actually review the visual side of the project
USER PROFILES AND PERSONAS
A persona is a fictitious identity that reflects one of the user groups for whom you are designing.
Personas need to be informed by research to be useful. It can be tempting to put on your creative writing hat and invent details to make them believable or interesting. However, the goal should be to have your personas reflect patterns that youâve identified in your users (or prospective users).
Thereâs no shortcut for identifying these patternsâthey come from user research: conduct-ing interviews, surveys, user testing, contextual inquiry and other activities.
Knowing your audience is the first step in UX design and enables you to develop experi-ences that reflect the voice and emotions of your users. Personas can be developed using website data.
SCENARIOS AND STORYBOARDS
A scenario is a narrative describing âa day in the life ofâ one of your personas, including how your website or app fits into their lives. If youâre familiar with writing user stories in an agile environment, youâll be comfortable writing scenariosâalthough the focus here is on regular usage, not edge cases.
Depending on the audience, a storyboard may be a more appropriate tool for capturing how, when, where and why someone might use your product.
Inspired by the filmmaking industry, a storyboard is a visual sequence of events used to capture a userâs interactions with a product.
It may be an extremely rough sketchâpurely for crystallising your own ideasâor a more polished comic for engaging your audience more eïŋ―ectively.
By engaging the emotions of users and drawing on familiar elements, UX designers tell stories and teach information. Learn more about the value of storytelling in the context of UX in the two-part post âBetter User Experience With Storytelling.â
USER FLOWSDesigning how users should move through a system is another popular deliverable.
ScenariosScenario 1:User opens a browser on a Unix machine with single interface from a wired network User will go through steps 1) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7a) i) -> 8) in the flow chart above
Scenario 2:User opens a browser on a Unix machine with single interface from a wireless network User will go through steps 1) -> 1c) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7a) ii) -> 8) in the flow chart above
Scenario 3:User opens a browser on a PC/Mac machine with single interface from a wired network User will go through steps 1) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7b) i) -> 9) -> 10) -> 11) -> 12) -> 13) a) i) in the flow chart above
Scenario 4:User opens a browser on a PC/Mac machine with single interface from a wireless network User will go through steps 1) -> 1c) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7b) i) -> 9) -> 10) -> 11) -> 12) -> 13) b) i) in the flow chart above
http://web.stanford.edu/dept/its/projects/hostreg/docs/software-design/usecase.html
USER TESTING
Sitting users in front of your website or app and asking them to perform tasks youâve planned for them while they think out loud is the fundamental premise of user testing.
How many test participants you involve, how closely your test participants match your actual users, and how many iterations of testing you run are all decisions shaped by budget and time constraints.
User testing is straightforward enough that anyone canâand shouldâexperience running one. Being in the same room while someone struggles to use your product is a powerful trigger for creating empathy with usersâa common trait.
A/B TESTING
A UX specialist might devise a study to compare the eïŋ―ectiveness and quality of experience of diïŋ―erent user interfaces.
This is done by stating a hypothesis (e.g. âA green button is more attractive than a red button.â), proposing or creating multiple versions of a design, defining what a âbetter experienceâ means (e.g. âThe green button is better because users clicked it more.â) and then conducting the test.
A/B testing (also known as split testing or multivariate testing) compares diïŋ―erent versions of a page, and it can be conducted with any of several programs.
Basically, A/B testing software splits a websiteâs traïŋ―c into two equal segments. One group sees version A, and the other group sees version B. Statistics such as conversion rate and bounce rate are tracked for each version. Split testing deter-mines which version is better based on these statistics. One of the most popular applications for A/B testing is Googleâs Website Optimizer.
PRACTICE 01
āļāļāļ User Flow āļāļāļāļāļēāļĢāđāļāļāļĨāļđāļāļāļēāļĢāļēāļāļāļ§āļĒāđāļāļĩāđāļĒāļ§āđāļāļ·āđāļāļĒāļēāļāļŠāļĩāļĨāļĄ
USER FLOWāļĄāļēāļāļķāļāļāļĩāđāļĢāļēāļ
āļĄāļĩāđāļāļ°āļ§āļēāļ āđāļĄāļĄāļĩāđāļāļ°āļ§āļēāļ
āļĢāļ āđāļĄāļāļĒāļēāļāļĢāļ āđāļĨāļĒāđāļāļĢāļēāļāļāļ·āđāļ
āļĢāļāļāļāļąāļāļāļēāļāļĄāļēāļĢāļąāļāļāļāđāļāļāļĢ
āļĢāļāļāļēāļ āđāļāļĨāļĩāđāļĒāļāđāļāđāļĄāļāļēāļāđāļĨāļ§
āđāļāļĢāļąāļāđāļĄāļāļđ
āļŠāļąāđāļāļāļēāļŦāļēāļĢ
āđāļĄāļĄāļĩāļāļ°āđāļĢāļāļēāļāļēāļ āđāļĄāļāļēāļāļĢāļēāļāļāļĩāđ
āļĢāļāļāļēāļŦāļēāļĢ
āļĢāļāļāļēāļāđāļāļīāļāđāļ āļāļāļĒāļāđāļĨāļīāļāļāļēāļĢāļŠāļąāđāļ āđāļāļīāļāļāļāļāļāļēāļāļĢāļēāļ
āđāļāļĢāļąāļāļāļēāļŦāļēāļĢ
āļāļāļāļīāļ§āļāļēāļ āđāļāļĨāļĩāđāļĒāļāđāļāđāļĄāļāļēāļ
āļŠāļąāđāļāđāļāļīāđāļĄ āļŦāļĢāļ·āļāļŠāļąāđāļāļāļĨāļąāļāļāļēāļ
āđāļāđāļāļāļīāļĨ
āļĢāļāđāļāđāļāļāļīāļĨ
āļāļēāļĒāđāļāļīāļ
āļĢāļāđāļāļīāļāļāļāļ
āđāļŠāļĢāđāļāļŠāļīāđāļāļāļĢāļ°āļāļ§āļāļāļēāļĢ
āļāļēāļĢāļĢāļāļāļēāļĢāļāļāļāļāļąāļāļŠāļīāļāđāļBad UX
āļāļēāļĢāļāļĢāļąāļāļāļĢāļļāļāđāļŦāļĨāļđāļāļāļēāđāļāļĢāļđāļŠāļķāļāļāļķāļāļāļāđāļāļĄāļēāļāļāļķāđāļāļāļēāļĢāļĢāļāļāļāļĒāđāļāļ°āļāļēāļĢāļĄāļĩāļāļāļąāļāļāļēāļāļāļāļāļĢāļąāļ āļāļāļĒāļĒāļīāđāļĄāđāļĒāļĄ āļāļāļāļīāļ§ āđāļĨāļ°āļāļāļāļ§āļē âāļĢāļāđāļĄāļāļēāļāļŦāļĢāļāļāļāļ°â âāļŠāļąāđāļāļāļēāļŦāļēāļĢāļāļāļāđāļāļāļ°āļāļ° āļāļĢāļāļĄāļĒāļ·āđāļāđāļĄāļāļđ āđāļĨāļ°āļĢāļāļāļāļĢāļēāļĒāļāļēāļĢâāļāļēāļĢāļĄāļĩāđāļāļĢāļ·āđāļāļāļāļāļāļąāļāļĢāļāļīāļ§āļāļēāļĢāļāļĒāļēāļĒāļĢāļēāļāđāļŦāļĄāļĩāđāļāļ°āļĄāļēāļāļāļķāđāļ
āļāļēāļĢāļĢāļāļāļāļąāļāļāļēāļāļĢāļąāļāļāļāđāļāļāļĢāļāļēāļĢāļāļĢāļīāļŦāļēāļĢāļāļąāļāļāļēāļĢ āđāļĒāļāļāļāļąāļāļāļēāļāđāļŠāļīāļĢāļ āļāļąāļāļāļāļąāļāļāļēāļāļāļĩāđāļĄāļĩāļŦāļāļēāļāļĩāđāļāļąāļāļāļēāļĢāļāļąāļāļāļāđāļāļāļĢāđāļŦāļĨāļđāļāļāļēāļāļāđāļāļ āļĄāļĩāđāļāļāļāļāļĢāļĄāđāļŦ āļĄāļĩ iPad āđāļŦāļŠāļąāđāļāļāļēāļŦāļēāļĢāđāļāļ
āļāļēāļĢāļĢāļāļāļēāļŦāļēāļĢāļāļēāļĢāļāļĢāļīāļŦāļēāļĢāļāļąāļāļāļēāļĢāđāļĢāļ·āđāļāļāļāļēāļĢāļāļģāļāļēāļŦāļēāļĢ āđāļāļ·āđāļāđāļŦāđāļāļāļēāļŦāļēāļĢāļāļĒāļēāļāļĢāļ§āļāđāļĢāđāļ§
āļāļēāļĢāļĢāļāļāļēāļĢāļāļīāļāđāļāļīāļāļāļēāļĢāļāļĢāļīāļŦāļēāļĢāļāļąāļāļāļēāļĢāđāļĢāļ·āđāļāļāđāļāļāđāļāļĩāļĒāļĢ
āļāļđāđāļĄāļāļđāđāļĨāļ§āđāļĄāļĄāļĩāļāļ°āđāļĢāļāļĩāđāļāļĒāļēāļāļāļēāļāļŦāļĢāļ·āļāđāļŦāđāļāļĢāļēāļāļēāļāļēāļŦāļēāļĢāđāļĨāļ§āđāļāļĨāļĩāđāļĒāļāđāļāļ§āļēāļāđāļĄāļāļđāļāļĒāļđāļŦāļāļēāļĢāļēāļ āđāļŦāļĢāļđāļ§āļēāļĄāļĩāļāļ°āđāļĢāļĄāļĩāļāļēāļŦāļēāļĢāđāļŦāļŦāļĨāļēāļāļŦāļĨāļēāļĒāđāļāļĩāļĒāļāļĢāļēāļāļēāļāļąāļāđāļāļ āļāļĢāļāļĄāđāļāļĢāđāļĄāļāļąāđāļ
āļāļēāļĢāļĢāļāļāļēāļĢāļāļīāļāđāļāļīāļ
āļāļđāđāļĄāļāļđāđāļĨāļ§āđāļĄāļĄāļĩāļāļ°āđāļĢāļāļĩāđāļāļĒāļēāļāļāļēāļāļŦāļĢāļ·āļāđāļŦāđāļāļĢāļēāļāļēāļāļēāļŦāļēāļĢāđāļĨāļ§āđāļāļĨāļĩāđāļĒāļāđāļ
PRACTICE 02āđāļĢāļāđāļĢāļĩāļĒāļāļāļ§āļāļ§āļīāļāļēāļŠāļģāļŦāļĢāļąāļāđāļāđāļāđāļāļēāļĄāļŦāļēāļ§āļīāļāļĒāļēāļĨāļąāļĒāļāļīāļāđāļāļāļĢ
āļāļīāļāļąāļāļāļāļāļāļēāļĢāļāļģāđāļ§āđāļāđāļāļāļāļ°āļāļĒāļēāļāđāļŦāļāļđāđāļāļāļāļĄāļ·āļāļāļ·āļāļāļ§āļĒ āļāļĒāļēāļāđāļŦāđāļ§āđāļāđāļāļāļĄāļĩāļāļāļĄāļđāļĨāļāļĢāļāļāļ§āļ
āļĨāļāļāļēāļĢāļāļāļāļāļģāļāļēāļĄāļāļēāļāđāļāļĢāļĻāļąāļāļāļāļāļāđāļāļĨāļĨ āđāļāļĢāļēāļ°āđāļāļĨāļĨāļāđāļāļāļāļāļāļāļĢāļąāļāļāļđāļāļāļāļĢāļāļāļāļĩāđāļĄāļēāļāļĩāđ āļĢāļĢ.āļāļēāļāļāļ°āđāļĄāļĄāļĩāđāļ§āļĨāļēāļĢāļąāļāđāļāļĢāļĻāļąāļāļāļāļļāļāļŠāļēāļĒ
āļĄāļĩāļāļēāļĢāļēāļāđāļĢāļĩāļĒāļāđāļŦāļāļēāļ§āļāđāļŦāļĨāļāļāļļāļāļāļāļĢāļŠ āļāļāļĢāļŠāđāļĢāļēāļĄāļĩ 11 āļāļāļĢāļŠāđāļĢāļĩāļĒāļ
āļāļĒāļēāļāđāļŦāđāļŠāļāļāđāļāļĢāđāļĄāļāļąāđāļāļāļāļāđāļāļĨāļ°āļāļāļĢāļŠāļĄāļĩāļāļēāļ§āļāļēāļĢāļĻāļķāļāļĐāļē āļāļēāļĢāļāļąāļāļāļīāļāļāļĢāļĢāļĄ āļĄāļĩāļāļēāļĢāđāļŠāļāļāđāļāļāļāļĩāđ āđāļāļāļĢāļāļīāļāļāļ āđāļĨāļ
āđāļŠāļāļāļ§āļēāđāļāđāļāđāļāļāļ°āđāļāļāļāļĩ āđāļŦāđāļŦāđāļāļ§āļēāļāļĢāļđāđāļĢāļēāđāļāļāļāļ§āļĒāđāļāđāļāļāļāļāđāļĢāļē āđāļĢāļēāđāļāļāđāļāđāļāļāļĩāđāļāļ°āđāļāļēāļāļļāļŽāļē āļāļĢāļĢāļĄāļĻāļēāļŠāļāļĢ āđāļĨāļ°āļĄāļŦāļīāļāļĨāđāļāļāļŦāļĨāļąāļ
āđāļĢāļēāļĄāļĩ personal coach āđāļāļ·āđāļāđāļŦāļāļģāđāļāļ°āļāļģāđāļāđāļāđāļāļĒāđāļāļāļēāļ° āļāļđāđāļĨāļāļĩ
START WITH PERSONASSitting users in front of your website or app and asking them to perform tasks youâve planned for them while they think out loud is the fundamental premise of user testing.
How many test participants you involve, how closely your test participants match your actual users, and how many iterations of testing you run are all decisions shaped by budget and time constraints.
User testing is straightforward enough that anyone canâand shouldâexperience running one. Being in the same room while someone struggles to use your product is a powerful trigger for creating empathy with usersâa common trait.
Once you have created your personas, use their goals personas to identify the product functionality. Ask yourself what the product should do to address the personasâ problems or to create the desired benefits for them, as the left picture shows.
http://www.romanpichler.com/blog/personas-epics-user-stories/
PERSONAS
āđāļāđāļāđāļĢāļāđāļĢāļĩāļĒāļāļāļīāļāđāļāļāļĢ āđāļāđāļāļāļāļ āđāļāđāļāļāļąāļāđāļĢāļĩāļĒāļāđāļāļĒ āļāļđāļāļāļāļĢāļāļ
āļāļđāđāļāļāļĩāļĢāļĩāļĒāļāļĢāļąāđāļāļāļđāļāļ āļēāļĐāļēāļāļąāļāļāļĪāļĐāđāļāđāļĄāļ·āļāļāļāļāļāļāļāļĒāđāļāļēāļĢāļāļĩāđāļāļēāļāđāļāļ·āđāļāļāļāļĒāļēāļāđāļāļ§āļļāļāļī āļĄ.6 (GED)
āļāļāļāļāļēāļĢāļĄāļēāđāļĢāļĩāļĒāļāļĄāļŦāļēāļ§āļīāļāļĒāļēāļĨāļąāļĒāđāļāđāļĄāļ·āļāļāđāļāļĒāļĄāļēāļāļēāļāļāļāļŠāđāļāļĢāđāļĨāļĩāļĒāļāļīāļāđāļāļĩāļĒ āļŠāļīāļāļāđāļāļĢāļāđāļĄāļĢāļīāļāļē
āļāļĒāļēāļāđāļāļēāđāļĢāļĩāļĒāļāđāļāļĢāļ°āļāļāļāļīāļāđāļāļāļĢāļ āļēāļĐāļēāļāļąāļāļāļĪāļĐāļāļāđāļāđāļĨāļāđāļāļāđāļāļīāļāļŦāļēāļ āđāļĨāļāđāļāļĄ
āļāļāļŦāļēāļŠāļīāđāļāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļāđāļŦāļāļąāļāļĨāļđāļāļāļēāļĄāđāļāļĨāļđāļāļāļģāļāļēāļāļŦāļāļąāļ āđāļĄāļāļāļĒāļĄāļĩāđāļ§āļĨāļē
SCENARIOS
āļāļāļāđāļāļĒāļāļąāļāđāļĢāļĩāļĒāļāđāļĢāļāđāļĢāļĩāļĒāļ HarrowāļāļēāļĒāļļ 16 āļāļāļĢāļāļāļāļĢāļąāļ§āļāļāļāļļāļ āļāļēāļāļ°āļāļĩāđāļāđāļ§āđāļāđāļāļāđāļāļ·āđāļāđāļĨāļāđāļāđāļāļĩāļĒāļĨ āļāļąāļāđāļāļīāļ āļāļēāļĢāđāļĢāļĩāļĒāļāđāļ iPhone, iPad, MacBook AirāđāļĨāļāļāļĩāļŽāļē āđāļāļāļāļīāļŠ āļ§āļēāļĒāļāđāļģ āļāļĩāđāļĄāļē
SCENARIOS
DRAW THE SITEMAP
SITEMAPHOME
CHULA THAMMASAT MAHIDOL COURSES NEWS WHO WE ARE CONTACT US
FACULTIES
FACULTY INFO
Link to courses
FACULTIES
FACULTY INFO
Link to courses
FACULTIES
FACULTY INFO
Link to courses
COURSES LIST
GED
- Course Detail- Timetable to download- Promotion- Related News & Events
NEWS & EVENT LIST
ARTICLE PAGE
- Story- Teachers- Personal Coach- Videos- Gallery
- Google Maps- Contact Detail- Personal Coach- Form
STUDENTS
- CATEGORIES CHULA THAMMASAT MAHIDOL WINNER
STUDENT INFO
IGCSE
- Course Detail- Timetable to download- Promotion- Related News & Events
IELTS
- Course Detail- Timetable to download- Promotion- Related News & Events
and more
SKETCH FIRST PAGE WIREFRAME
FIRST PAGE WIREFRAME
HOME CHULA THAMMASAT MAHIDOL COURSES NEWS STUDENT WHO WE ARE CONTACT US
LINE @houseofgriffin Social Media Icons
LOGO
Carousel
Chula Thammasat Mahidol
PRE-GED GED
WWW.THESCHOLAR.CO.TH
PEOPLE INVOLVED INBUILDING A WEBSITE
BUSINESS FOLKS AND WEBSITE CLIENTS
PEOPLE INVOLVED IN BUILDING A WEBSITE
Once, you could get away with sticking a website up on the Internet and expect to get reasonable traïŋ―c without much further eïŋ―ort. In the crowded Internet highways of today, however, you really need a business strategy and a marketing plan. Your business and marketing folks must be involved with the website from the very beginning. They are in charge of the following responsibilities:
Setting the goals and requirements for the site. You must always understand the business goals, in order of priority, of the site.
Identifying the target customer. The marketing team members should provide a profile picture of the ideal customer that the site must cater to.
Reeling in the visitors. The marketing team also needs to figure out how to direct customers to the site.
PRODUCERS AND PROJECT MANAGERS
Once clients and companies are committed to a new web project, invariably their eyes tend to get bigger than the budget. Often times, they will ask for the moon because they simply do not understand the complexities that go into web development. Among many other responsibilities, the main job of the producer or project manager is to set and manage client expectations so the project stays on track.
INFORMATION ARCHITECTS
This impressive-sounding title goes to the person whose job it is to sit down and figure out how the whole site fits together and how people will navigate from one page to the next.
Among the first tasks of an information architect is to design a sitemap diagram that shows all the main sections of the site. The IA, as this person is often referred to, then dives into the page-level detail and creates a series of wireframe diagrams that show the content and navigational elements that go on each major page of the site.
VISUAL DESIGNERS
Armed with the sitemap and wireframes that define the underlying site structure, itâs the visual designerâs job to extend a companyâs brand image and character into a website look and feel. Visual design, however, is not just about making a site look good; it can make or break a siteâs eïŋ―ectiveness and even its usability. A good visual designer rearranges elements, adjusts relative placement and sizing of elements, and uses good graphic-design principles of color, form, consistency, and layout to accentuate navigation and important content, and indicate how users should interact with each page.
Many print designers who are new to web design create graphically rich, custom interfaces that certainly look cool but arenât very practical for the web. These sites often download slowly, are hard to automate or update, or are diïŋ―cult to use because users canât easily distin-guish clickable from non-clickable items.
CONTENT DEVELOPERS
For this reason, content development for a web project is often parceled out to two distinct individuals â or one individual wearing two distinct hats:
The content strategist: The person who identifies the chunks of copy needed for each page and the rules for each, such as character limits and style of copy.
The copy writer: The person who actually writes the text for each identified chunk.
WEB DEVELOPERS
A web developer is the person who assembles the actual web pages in HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). There is a real art to producing what is called the front end of a website (what you see when you visit a website) because there are so many browsers and computer configurations to account for.
PROGRAMMERS
Modern website projects would not be complete without a team of programmers. These folks can really give your website a turbo boost by making it a powerful business tool, whether it is an e-commerce site or a social networking site.
In addition to coding web-page templates with a scripting language such as PHP or ASP, programmers also create the online databases to house all the information the templates may need. Building databases can be so complex that many times you need a specialized data-base dude or dudette for that task alone.
āļŦāļēāļāļāļļāļāđāļāļāļāļĢāļĩāđāļĨāļāļ
āđāļāļēāļāļāļāļāļīāļāļāļēāļĢ
āļāļāļāļāļēāļĢāļāļĨāļēāļ āļāļĩāđāļāļąāļāļāļĩāđāļāļēāļāļāļāļāļĢāļīāļĐāļąāļ
āļāļāļāļāļēāļĢāļāļĨāļēāļāđāļāļĢāļąāļāļāļģāļŠāļąāđāļāđāļŦāļāļąāļāļŦāļēāļāļāļĄāļēāļāļģāđāļ§āđāļāđāļāļ āļāļāļāđāļĄāļĄāļĩāļāļ§āļēāļĄāļĢāļđāđāļĢāļ·āđāļāļāđāļ§āđāļāđāļĨāļĒāđāļāļēāļāļāļāļāļĢāļīāļĐāļąāļāđāļĄāđāļāļĒāļĄāļēāļāļđāđāļĨ āļāļĢāļ§āļāļŠāļāļ āļĢāļ°āļŦāļ§āļēāļāļāļąāđāļāļāļāļ āđāļāļāļāļāļģāđāļŠāļĢāđāļāđāļĨāļ§ āļāđāļāļ°āļāļāļāļ§āļēāļāļāļāđāļĄāļāļāļāļāļ°āđāļĢāļāļēāļ āļāļēāļāļāļĩāđāļāļēāđāļāđāļŦāđāļāļ·āđāļāļāļāļđ āļāđāļĄāļĩāļāļģāđāļāļ°āļāļģāļĄāļēāļāļĩāļ āđāļĄāļāļāļŠāļīāđāļāļāļĩāđāļāļąāļāļāļĩāļāđāđāļĄāļāļēāļĒāđāļāļīāļāļāļāļāļ§āļēāđāļāļēāļāļāļāļāļ°āļāļāđāļ
āļāļĢāļīāļĐāļąāļāđāļĨāđāļāđ āđāļŦāļāļŦāļāļķāđāļ
āļĄāļĩāđāļāļīāļāļāļĢāļāļĄāļāļēāļĒ āđāļāđāļĄāļĢāļđāđāļĢāļ·āđāļāļāđāļāļāđāļāđāļĨāļĒāļĩāļāļīāļāđāļāļāļĢāđāļāļāļāļ°āđāļĢāđāļĨāļĒāļĢāļđāđāļāđāļāļĒāļīāļāđāļāļēāļ§āļēāļāļąāļāļ§āļē āļĄāļĩāđāļ§āđāļāđāļĨāļ§āļĄāļąāļāļāļĩāļĄāļĩāđāļāļŠ āļĄāļĩāļāļēāļĢāļāļāļŦāļĄāļļāļ āđāļĨāļ§āļāļ°āļāļ§āļĒāđāļāļĢāđāļĄāļāļĢāļēāļ
PRACTICE 03āļāļāļāļāļēāļĢāļāļĢāļąāļāļāļĢāļļāļāļāļĢāļ°āļāļ§āļāļāļēāļĢāļĨāđāļāļāļāļīāļ
āļāļĢāļąāļāļāļĢāļļāļāļāļēāļĢāļāļąāđāļāļāļāļāđāļāļāļēāļĢāļĨāđāļāļāļāļīāļīāļāļĨāļāļāļāļīāļāļāļđāļ§āļēāļāļ°āļāļĢāļąāļāļāļĢāļļāļāļāļ°āđāļĢāđāļāļāļēāļ āđāļāļ·āđāļāđāļŦāļāļđāđāļāļāļēāļāđāļāļāļēāļĒ āļŠāļ°āļāļ§āļ āđāļĄāļāļ
āđāļŦāļĨāđāļāļāļāļīāļāļāļ§āļĒ social account āđāļāļāļ§āļĒ
āđāļŦāļĄāļĩāļāļ§āļēāļĄāļāļĨāļāļāļ āļąāļĒāļĄāļēāļāļĒāļīāđāļāļāļķāđāļāļāļ§āļĒ 2-Step verification
Personas āļāļ·āļāļāļļāļāđāļāļĻ āļāļļāļāļ§āļąāļĒ āļāļļāļāļāļēāļāļĩāļ
āļāļāļāļīāļ USER FLOW āļĄāļē
LOGIN PAGE
REMEMBER FORGOT USERNAME FORGOT PASSWORD FORGOT EVERYTHING NEW VISITOR
CREATE ACCOUNT
CONFIRM EMAIL
PROFILE PAGE
Basic infoSubscrube newsletter
Input more infoUpload Photo
LANDING PAGE
LOG OUT
INPUT EMAIL ADDRESS
INPUT USERNAME
LOG IN PAGE
CLICK LINK
LANDING PAGE
CLICK LINK
NEW PASSWORD
LOG IN PAGE
LANDING PAGE
EMAILInform the passwordor a link to create new one
Informusername
Invite to create new account
FIRST IDEA
āļŦāļāļēāļĨāđāļāļāļāļīāļ āđāļĄāļ·āđāļāļāļĢāļāļāļāļĩāđāļĄāļĨāļāļīāļ āđāļĨāļ°āļāļĩāđāļĄāļĨāļāļĩāđāđāļĄāļĄāļĩāđāļāļĢāļ°āļāļāļāļ°āļāļēāđāļāļĒāļąāļāļŦāļāļēāļŠāļĄāļąāļāļĢāļŠāļĄāļēāļāļīāļāļāļąāļāļāļĩ
REFERENCES
Thank you illustrations from www.freepik.com
Contenthttp://uxmastery.com/7-signs-person-isnt-actually-ux-designerhttps://www.sitepoint.com/ux-designer-actually/http://www.romanpichler.com/blog/personas-epics-user-stories
Download wireframe templates PDFhttps://drive.google.com/drive/folders/0B3_0TvLYb2PadkJ3eFM0N3ZNcE0?usp=sharing
RECOMMENDED