Al Khyam Website: Enhancing User Experience with Interactive Features

1. Al KhyamFinal Websiteand Sprint 3 Jeff Bertheau, Phil Malenfant MarwaMahmoodAldar

2. Al Khyam Restaurant and Grocery

3. Value Proposition • Improve upon old website • www.alkhyam.com • Intuitive navigation • Order functionality • Organized design • Simple administrative interface • User friendly – increase customer retention

4. E-Commerce Chain Attract Cleaner layout Intuitive navigation Mobile interface Interact Retain customers online Interactive options Recipes section Act Improved ordering system Handle takeout and grocery items Secure web ordering React Simple administrative interface Contact page for customer response Improved website = improved customer experience

5. Design

8. Technicalities • Coding • HTML5, CSS3, PhpMysql • Database • Administrative Database • Simple interface • Login • Page content • Edit/add content to pages • Entire site interacts with databases

10. Validations • Login form • Limited characters for entry forms • Stripped tags • Special characters rendered without performing functions • MySQL escape string prevents SQL injection • Contact form • Same validations • No MySQL escape string, as noting is saved into a database • Shopping Cart • Not hosted on our site • Handled by separate company’s database • Better security for our client • No additional database training necessary

11. Usability

12. Personas • Emulate our potential users • Build website around our the needs of our audience • Capture mindset of users outside of our primary focus • Who will use it? Why will they use it? What do they want? Draw in new users?

13. Personas • Married woman with one or more children. • Stay at home mother, prepares all meals for whole family for dinner. • Busy schedule makes grocery shopping a hindrance rather than a pleasant experience. • Active internet user, has made many online purchases in the past. • Loves middle-eastern cooking, would like one easy way to learn recipes and purchase items. • Doesn’t live very close to a middle-eastern specialty store. • Young couple living in Chicago. • Lovers of middle-eastern cuisine. • Frequent various middle-eastern restaurants in the city, but prefers to eat at home. • Would rather order carry-out than dine in a restaurant. • Very active internet users, both with smart phones. • Prefer ordering take-out online as opposed to calling the restaurant. Primary Secondary

14. Usability Tests Register for Carryout/Groceries Edit Shopping Cart Process Order • Select Dine In or Carry Out • Register for account • Registration web form is filled out and submit clicked • Member login clicked • Add Food Items to Cart • Delete Food Items from Cart • Review Current Order • Click Check Out • Select Payment Method • Click To Complete Check Out • Cancel Order Website functionality Order Carryout Order Groceries Navigational test

15. Results • Simplicity • Easy navigation • Neat and organized • Intuitive order CMS • Poor mobile functionality • Could use aesthetic improvements Positive remarks Negative remarks

16. Changes • Responsive web design added • Fluid web pages • Minor aesthetic changes

17. Demo!

18. Sprint 3

19. US22 – Usability Test Changes • Description • As a developer, we want to perform user functionality tests on our website in order to get a review of our product from the perspective of the audience. By doing so, we can improve upon our design and offer a better final product to our client. • Acceptance criteria • Our volunteers will perform the functionality tests we have written for the website • Users will give feedback on the website • We will implement changes based on user feedback • Client will accept Changes • Tasks • Create functional tests and feedback recorders to place in User Testing Document – Jeff, Marwa, Phil • Test users, record results – Jeff, Marwa • Make changes to website based on results - Phil

20. Responsive Web Pages

21. Responsive Web Pages