Design & Test Phase
WEB REDESIGN Oct 14, 2018
Develop & Deliver
Prepared by:
Kuo-Wei Lee
kuoweilee.com
7001 W Parker Rd
+1 (469)-543-7288
Plano, TX - 75093
wadelee0722@gmail.com
1
Design / Test Phase At the phase. Putting design strategy, which is the outcomes from concept phase, into practice makes ideas manifest. After uncovering insights from research. I created prototypes for interaction. Usability testing evaluates a website by testing its functionality with potential users. It helps us see how users/customers understand and navigate through a prototype of the website. The most important tihing is to make sure if the design meets customers’ need or not.
Concept Phase - Discover Research
Sitemap
Information Architecture
Information Layout
Design Phase - Design Content Map
Site Template - Hi-fi
Wireframe Design
Web Visual Design
Site Template - Low fidelity Pilot Usability Testing
Test Phase - Deliver Interactive Prototype Setup Usability Testing - Test Website Refine and Ready to Deliver
KW
+1 (469)-543-7288 wadelee0722@gmail.com
2
Sitemap / Content Map / Critique Based on new AVESTA Sitemap Structure I drafted/designed a new website for AVESTA, which I think it would be more appealing and storytelling. At the same time, I made a critique on the current website (avestamedicine.com) which I can remain good parts and refine the rest of the website.
Critique and Hand draft please check DP_Attachment 01
What’s Telemedicine?
AVESTA
About
AVESTA Brief Intro.
About AVESTA Services (brief)
Why Functional Medicine?
Contact Us
Who’s Dr. Mandana?
(Langing Page) GI Health
Services
Anti Inflammatory Diet
Cardiovascular Health
Diabetes Help
Anti Aging
Pricing & Consulation
FAQ Threads / Forum
FAQs
Questions abt Telemedicine
AVESTA Services Q&A
Privacy Policy
Terms & Conditions
Pricing & Consulation
Consulation
Schedule Appointment
Terms & Conditions
Medical EDU (8 categories)
AVESTA Blog AVESTA News / Events
Store
KW
Products AVESTA RECOMM
AVESTA New Sitemap / Content Map
+1 (469)-543-7288 wadelee0722@gmail.com
3
Bootstrap Grid System A grid can create a basic structure, a skeleton for the design. The consist of invisible lines upon which design elements can be placed. Doing so ties them together in an overall “system” and supports your composition—rationally. In addition, the system helps developer arrange the content. My design based on the Bootstrap’s 12 column grid, 1170px Grid with 1440px of content area. Column width is 70px and Gutter width is 30px.
Technical Phase (Web Developer / Builder Responsibility) Column 70px
Avesta Medicine will need to find a web developer to build the website up according to my design. Recommeded using Responsive Web Design (RWD) to build the website to be compatible with Gutter 30px
multiple devices: Mobile, Tabelt, and Computer.
12 Columns
Content Area 1440 px
KW
+1 (469)-543-7288 wadelee0722@gmail.com
4
Wireframe Wireframes are important for multiple reasons. One of them would be that they, the wireframes, focus on functionality, behavior, and priority of content. Once you have those things established, designing the product becomes a lot easier.
KW
Lo-Fi prototype/wireframe please check DP_Attachment 02
+1 (469)-543-7288 wadelee0722@gmail.com
5
Color System / Typography
Free for commercial use, Download from: fonts.google.com/specimen/Roboto
Bold Regular Italic
font-style I used:
KW
+1 (469)-543-7288 wadelee0722@gmail.com
6
Web Visual Design AVESTA, Integrative & Lifestyle Medicine, I decided to use more greenish, close to nature, healthy lifestyle, and mild consultation pictures to brand the AVESTA providing natural, healthy way to make customer healthier rather than traditional, serious, taking a lot of medicines and treatments.
The photos I took/chose are 100% free copyright and authorized for commercial use.
KW
+1 (469)-543-7288 wadelee0722@gmail.com
7
Interaction Prototype Setup After testing out the flow, I developed a design language to unify the experience as demonstrated in this hi-fi prototype. Hi-fi interactive prototypes are made as close to the real graphical representation of the products can allow thorough testing on all the detailed aspects.
Prototype: https://xd.adobe.com/view/7cb54045-431f-4c08-4a60-096525ea63f5-0a84/?fullscreen
KW
+1 (469)-543-7288 wadelee0722@gmail.com
8
Usability Testing Usability testing evaluates an application by testing its functionality with potential users. It helps us know how easy or difďŹ cult it is for users to understand and navigate.
I invited 5 different testers, aging from 25 to 60. I think this range will be our major targeted audience. Compared to previous website, they are satisfied and esay to understand telemedicine/what services they can get.
KW
+1 (469)-543-7288 wadelee0722@gmail.com
9
Timeframe The table below outlines the work process phases and milestones needed to complete this project. This three phase process begins at the concept phase where everything is planned, then the design phase where look and feel (website prototype) is produced, and finally the test phase where everything is thoroughly tested and reviewed to check if the website meets customers’ need. This process is designed to ensure project efficiency and your complete satisfaction.
Concept Phase - Discover
Aug 13-25, 2018
Research
Sitemap
Information Architecture
Information Layout
Design Phase - Design
Sep 8-23, Sep 29 - Oct 7, 2018
Content Map
Site Template - Hi-fi
Wireframe Design
Web Visual Design
13 days
24 days
Site Template - Low fidelity Pilot Usability Testing
Test Phase - Deliver
Oct 8-12, 2018
5 days
Interactive Prototype Setup Usability Testing - Test Website Refine and Ready to Deliver
total 42 days
KW
+1 (469)-543-7288 wadelee0722@gmail.com
10
Thank you Dear Avesta
I am glad to have this opportunity to discuss potentially working together. Thanks to Avesta and Kourosh for giving me chance. At this stage, I’ve done my design job and wait for your feedback to adjust the overall look & feel, but I will still work with you to complete missing content and make a ďŹ nal design package for delivery.
Sincerely,
KW
KW +1 (469)-543-7288 wadelee0722@gmail.com