Banafar Pharma E-Commerce Store · 1 Executive Summary This document is a collection of materials...
51
2015 Banafar Pharma E- Commerce Store SENIOR PROJECT 2015 JAN MICHAEL ESCOBAR, XIAOJU BIN, CALVIN LE, SAURABH SINGH
Transcript of Banafar Pharma E-Commerce Store · 1 Executive Summary This document is a collection of materials...
2015
Banafar Pharma E-Commerce Store
SENIOR PROJECT 2015
JAN MICHAEL ESCOBAR, XIAOJU BIN, CALVIN LE, SAURABH SINGH
1
Executive Summary This document is a collection of materials detailing the creation of Banafar Pharma E-Commerce
store. Its purpose is to document the project lifespan: from conception to prototyping and
implementation.
2
Table of Contents Executive Summary ....................................................................................................................................... 1
Introduction .................................................................................................................................................. 6
Abstract ..................................................................................................................................................... 6
Purpose ..................................................................................................................................................... 6
The Plan..................................................................................................................................................... 6
Project Benefits ......................................................................................................................................... 6
System Request ............................................................................................................................................. 7
Qualitative Requirements ......................................................................................................................... 9
Detailed Requirements ............................................................................................................................. 9
Feasibility Analysis .................................................................................................................................... 9
Proposed Schedule ..................................................................................................................................... 10
Research ...................................................................................................................................................... 12
Operations and Business Environment ................................................................................................... 12
Ordering Process ..................................................................................................................................... 12
Use-Case Diagram: General Ordering Process ........................................................................................ 13
Web Application Examples: India ........................................................................................................... 14
Narang.com: Homepage top half ........................................................................................................ 14
Narag.com: Homepage bottom half ................................................................................................... 15
Medidart.com: Prescription ordering page ........................................................................................ 16
Design .......................................................................................................................................................... 17
End-User Design Summary...................................................................................................................... 17
Banfarpharma.com Design Features ...................................................................................................... 17
Wireframe Diagrams ............................................................................................................................... 18
Shop interface: Home ......................................................................................................................... 18
Shop Interface: Products ..................................................................................................................... 19
Shop Interface: Prescription Upload ................................................................................................... 20
Account Interface: Sign-in/creation .................................................................................................... 21
Database Diagram ............................................................................................................................... 22
Content Management System Interface ................................................................................................. 23
Banafar Pharma Administrator Sign-in ............................................................................................... 23
Backend Processing Interface (CMS Interface) ................................................................................... 24
Banafar Pharma Code Infrastructure .................................................................................................. 24
3
Development............................................................................................................................................... 25
Development Method ............................................................................................................................. 25
Description of tools used for development ............................................................................................ 25
WordPress ........................................................................................................................................... 25
InstaWordPress ................................................................................................................................... 25
Divi Theme .......................................................................................................................................... 25
WooCommerce plugin ........................................................................................................................ 25
GIMP ................................................................................................................................................... 25
Hardware and Software .......................................................................................................................... 26
InstaWordPress ....................................................................................................................................... 26
First Prototype and Testing ..................................................................................................................... 26
Test Plan ...................................................................................................................................................... 27
Scope ....................................................................................................................................................... 27
Primary Objective ................................................................................................................................... 27
Secondary Objective ............................................................................................................................... 27
Resource and Environment Needs .......................................................................................................... 27
Test Approaches ..................................................................................................................................... 27
The Volunteers .................................................................................................................................... 28
Multiplatform Responsive Test ........................................................................................................... 28
Unobtrusive UX Test Approach ........................................................................................................... 29
Guided UX Test Approach ................................................................................................................... 30
Results of Test ......................................................................................................................................... 30
Implementation .......................................................................................................................................... 31
Go Daddy Setup ...................................................................................................................................... 31
Design Implementation........................................................................................................................... 32
Design Interface One: Basic Setup ...................................................................................................... 32
Design Interface Two: Module Setup (GUI) ........................................................................................ 33
Design Interface Three: Visual Design ................................................................................................ 33
Design Interface Four: Design Preview ............................................................................................... 34
E-commerce Store Calibration: WooCommerce ..................................................................................... 34
Orders Interface .................................................................................................................................. 34
Settings Interface One ........................................................................................................................ 35
Settings Interface Two ........................................................................................................................ 35
4
Settings Interface Three ...................................................................................................................... 36
Product Configuration ......................................................................................................................... 36
Configuring Social Network Login and Checkout ................................................................................ 37
Final Design ................................................................................................................................................. 39
Shop Section ........................................................................................................................................... 39
Shop Homepage .................................................................................................................................. 39
Product Page ....................................................................................................................................... 39
Cart Page ............................................................................................................................................. 41
Checkout Page..................................................................................................................................... 41
Prescription Entry and Upload ............................................................................................................ 42
Account Creation and Social Network Login ....................................................................................... 42
Final Schedule ......................................................................................................................................... 43
Banafar Pharma Senior Management Review ........................................................................................ 43
Team Profile ................................................................................................................................................ 44
Jan Michael C. Escobar ............................................................................................................................ 45
Occupation: ......................................................................................................................................... 45
Background: ........................................................................................................................................ 45
Personality & Traits: ............................................................................................................................ 45
Notable Quote: ................................................................................................................................... 45
Role(s): ................................................................................................................................................ 45
Responsibilities: .................................................................................................................................. 45
Saurabh Singh ......................................................................................................................................... 46
Occupation: ......................................................................................................................................... 46
Background: ........................................................................................................................................ 46
Personality & Traits: ............................................................................................................................ 46
Notable Quote: ................................................................................................................................... 46
Role(s): ................................................................................................................................................ 46
Responsibilities: .................................................................................................................................. 46
Xiaoju Bin ................................................................................................................................................ 47
Occupation .......................................................................................................................................... 47
Background ......................................................................................................................................... 47
Personality & Traits ............................................................................................................................. 47
Notable Quote .................................................................................................................................... 47
5
Role(s) ................................................................................................................................................. 47
Responsibilities ................................................................................................................................... 47
Calvin Le .................................................................................................................................................. 48
Occupation: ......................................................................................................................................... 48
Background: ........................................................................................................................................ 48
Personality & Traits: ............................................................................................................................ 48
Notable Quote: ................................................................................................................................... 48
Role(s): ................................................................................................................................................ 48
Responsibilities: .................................................................................................................................. 48
Moving Forward (End Statement) .............................................................................................................. 49
Features left to install ............................................................................................................................. 49
6
Introduction
Abstract Banafar Pharma is a “super specialty” medical and surgical supply distributor located in the city of
Hyderabad in the country of India. Banafar Pharma distributes medical supplies to various chain
hospitals, companies, and government institution in and around the state of Andhra Pradesh. The
company also offers prescription medicine and medical equipment deliveries to patients living in the city
of Hyderabad.
Purpose Banafar Pharma has been in business for several years now and have decided to expand their business
potential by expanding the use of their current web application, banafar.com. Banafar Pharma has
requested the need for an online shopping extension to their website, which is the focus of this project,
Banafar Pharma E-Commerce Store, overall.
UPDATE: As of February 13, 2015, Banafar Pharma’s senior management has requested the recreation
of their entire website. The e-commerce extension project will now become creating an entire e-
commerce website.
The Plan The plan for Banafar Pharma E-Commerce Store is to recreate banafar.com and transform it into
banafarpharma.com. Banafarpharma.com features an updated user experience design of Banafar
Pharma and includes an e-commerce store featuring various products in which hospitals, organizations,
and patients can purchase online.
Project Benefits The project benefits an Indian Medical Supply company to expand its market and sell life-saving
medicines and supplies. Furthermore, it allows the local people of Hyderabad to get medicine quickly
and efficiently at a good price.
7
System Request The following is an official System Request document associated with Banafar Pharma E-commerce
Store.
Project Name: Banafar Pharma E-commerce Store
Project Sponsor: Banafar Pharma
Organization: Banafar Pharma
Phone: 040-2-335-2060
E-Mail: [email protected]
Business Need:
A recreation of banafar.com with a fully functional e-commerce store into banafarpharma.com
Functionality:
After completion of banafarpharma.com, original information of banafar.com will be present
along with an online shopping interface customers can use.
Expected Value:
Tangible
- Increased sales via e-commerce
- Reduced order processing costs
Intangible
- Improved customer satisfaction
- Expanded clientele
- Improved advertising
Project Limitations:
- $300 dollar non-negotiable budget
- International, limited-use
- 10 week development time
Stakeholders:
- Srikant Singh, Owner-operator of Banafar Pharma
- Archana Singh, Co-owner of Banafar Pharma
- Multinational medical supply companies
o Johnson & Johnson
o Baxter
- 18 Banafar Pharma staff members
- Citizens of Hyderabad
8
Andhra Pradesh featured in red in the map below:
9
Qualitative Requirements UX Design
o To design a product based on common user experience trends to invoke familiarity and consistency
Technology Compatibility o Users
Final product must be fully compatible with average user technology o Business
The business’s technology must be able utilize the final product
Ease of Maintenance o End-users can provide their own maintenance
Detailed Requirements Account-based E-commerce
o Accounts are to be created from users
Multiple Form of Payments o Provide secure transactions for each payment method
Sales Restrictions o Prescription
Users provide their own prescription information for their needs
Prescription Upload o Users can upload prescription images
Feasibility Analysis Familiarities with functional area: Excellent. The company itself had already have a website for their
organization, so it would be easy for them to transition to using the e-commerce store. Also maintaining
the website will be an easy transition for them since the company already has experience with web
development.
User familiarities with technologies: Excellent. The company experience with the latest technologies.
Compatibilities with user technology: Medium. User experience maybe a challenge. Further research
needs to be done.
Compatibilities with business user: Medium. Even though the company has experience with technology,
they still need to be able to find someone who is experienced to be able to keep up with their
maintenance needs.
Project size: Small. Team consists of four individuals.
10
Proposed Schedule
11
12
Research Due to the location of Banafar Pharma and the clients they serve, extensive research was conducted in
order to tailor the user experience of the final product to match the familiarity and culture of the end-
users. This was somewhat of a challenge given the fact that the intended end-users are located halfway
across the globe and in a different country than the development team. The following section depicts
the research knowledge gathered in order to better tune the design of banafarpharma.com to suit the
end-users.
Operations and Business Environment The following is a summary of the operations and business environment of Banafar Pharma in relation
to their use of the new web application:
Location: Hyderabad, Andhra Pradesh, India
How Web Application Will Be Used
The web application will be used as an internet accessible portal for clients and consumers to place
orders on medical supplies and medications. Banafar Pharma will use the website as their online
catalogue and database to keep track of orders and inventory. Since much of the site’s database will be
automated, inventory stock is expected to be kept well organized.
Ordering Process The use of the new application to place and deliver orders will be as follows:
NOTE* Process list here only depicts general use. See next page for Use-case diagram.
1. Customer visits site
2. Customer selects wanted/needed products
3. Customer checks out virtually
4. Banafar Pharma order manager receives notification of order
5. Order manager processes order
6. Delivery manager packages order
7. Delivery staff member delivers order to customer
13
Use-Case Diagram: General Ordering Process The following diagram depicts the relationship and process in which customers and Banafar Pharma
staff will go about using the website.
Order Manager
Visits website
Delivery Manager
Delivery Staff Member
Customer
Selects products
Checks out virtually
Order processed
Order delivered
<<extend>>
<<extend>>
<<extend>>
<<extend>><<include>>
User Research and Cultural Information Summary
The business operates in Hyderabad, India. It is the 4th most populated city in the country with a literacy
rate of 82.96%. India has 243 million internet users – the third largest internet population in the world.
Since India is a growing economy, a current trend is the rapid increase in the number of mobile users.
The introduction of various low-price smartphones such as Android and cut-throat price competition in
internet tariffs are increasing the number of everyday internet users.
The main difference between an American e-commerce website and an Indian e-commerce website can
be found in the shipping delivery and payment methods. In India, “cash-on-delivery” is the norm and
preferred method of payment. In this scenario, the vendor directly delivers the product to the customer
and receives payment in-person. Moreover, in India, when specifying the shipping address a “landmark”
is also asked to be included since street names are not always clearly marked.
14
Web Application Examples: India The following are screenshots of several popular websites in India. They were studied in order to get a
greater grasp of the type of design implications that need to be considered when designing the user
experience of banfarpharma.com.
Narang.com: Homepage top half
Design Notes
- Features a modern overall look and feel
Full-width slider
Social networking icons
1240 x 768px size
Displays facts and information immediately
Boxed-width format below slider
15
Narag.com: Homepage bottom half
Design Notes:
- Displays general categories of products sold
- Provides brief tags, images and genre
- Social network profile login featured on the top right of the page
16
Medidart.com: Prescription ordering page
Design Notes:
- Interface requires upload of jpg files of prescription note
Pattern seen on another Indian website: bookmeds.com
- Clean and simple guide
Simple
Provides live example
17
Design As with any feature of software or technology and general, a good user-experience design can mean the
difference between whether end-users accept the final product or discard it and move on to something
else. This section details the design of banafarpharma.com. It includes considerations for two types of
end-users: the customers and system admins of Banafar Pharma.
End-User Design Summary - No real difference in overall look and feel of Indian web applications vs. American
- Prescription uploads differ
Uploading image of prescription note is common among Indian medical sites
- Shipping forms include “landmark”
- Cash on delivery most common payment vector
- Design must also include a good content management system interface for end-admins to
conduct updates and changes
Banfarpharma.com Design Features Banafarpharma.com will feature the common characteristics found in other Indian websites and some
new styles which include the following:
- Option for prescription fill form
- Option for prescription image upload
- Account-based e-commerce
Option to checkout as guest
Option to sign-in using social networking account
OAUTH
OPENID
- Payment options
Cash on delivery (COD) available)
Online payment vectors
18
Wireframe Diagrams The following are wireframe mockups of the e-commerce section of the new site:
Shop interface: Home This is the envisioned shop-homepage interface.
19
Shop Interface: Products This is a sample mockup of the envisioned product.
20
Shop Interface: Prescription Upload This is the prescription upload mockup. This feature is a requirement for the project. This interface will
allow customers to enter in text form their prescription or an image. The supported images will be tiff,
jiff, gif, png, jpeg, and pdf with a maximum file upload size of 50mb to accommodate for any lack of
format knowledge standards by a customer.
21
Account Interface: Sign-in/creation This is the planned social network login/account creation design. The planned social networks to be
used are Google, Facebook, and Twitter.
22
Database Diagram WooCommerce is a WordPress plugin that is being used to handle banafarpharma.com’s online store
database, checkout, and presentation. Below is a diagram of how the database is structured. More
technical information about WooCommerce can be found in the development section. This diagram was
taken from https://kishordgupta.WordPress.com/2011/01/20/e-commerce-database-design-entity-
relation-ship-diagram/ and is an exact depiction of WooCommerce’s WordPress database.
23
Content Management System Interface The following screenshots are the premade interface of WordPress and it is what administrators of
banafarpharma.com see. More detailed information about WordPress can be found in the development
section of this document. The screenshots are meant to give a visual perspective of the user interface
used by administrators. It starts from the admin sign-in form and continues to the CMS interface.
Banafar Pharma Administrator Sign-in This is a screenshot of the administrator sign-in form. It is accessible by Banafar Pharma site admins if
they have a registered account. They can access the login page by inputting the following URL into a web
browser: http://www.banafarpharma.com/wp-admin/
24
Backend Processing Interface (CMS Interface) The interface image below is what an admin will use once logged in. Logging in as an admin
automatically redirects to this page.
Banafar Pharma Code Infrastructure This is the structural code of the entire BanafarPharma.com website. Any changes made here affect
EVERYTHING on the website. This includes interface, login, responsiveness, look etc.
25
Development Development methodology, tools, and environment were based heavily on realistic goals, project
constraints, and limited development time. This section depicts the method and materials used.
Development Method For this project, the test-driven development methodology was used. This method entails a flexible
schedule to complete specific sections of the project without having to worry about meeting a specific
deadline and to design a final product while you develop and prototype.
Description of tools used for development The tools used for development include WordPress and InstaWordPress. A variety of WordPress plugins
were used to increase the functionality of the final product. These tools were chose because of their
popularity, familiarity, and adequate support.
WordPress
Has built-in database support
Prebuilt use user interface
Content management system
Community support
InstaWordPress Ability to prototype offline
Configure WordPress because acquisition of hosting service
Mainly used to test questionable features and functionality before deploying it into final test
environment
Divi Theme
Extreme design options and freedom
Ability to modify almost every basic web page element and design
Affordable development cost
WooCommerce plugin
Basic online store page templates
Features basic shopping interface and account creation
Customizable to suit UX design needs
GIMP Graphical image manipulation program
Used to modify and prepare photos for web application interface
26
Hardware and Software Go Daddy was chosen as the hosting service. Go Daddy has support for WordPress with automatic
installation. Furthermore, WordPress comes with a plethora of features. It is a content management
system and was used for rapid development enabling development time to be cut down considerably.
This is especially true with WordPress’s feature to use plugins. The WooCommerce plugin is being used
to implement an e-commerce section to the website. The theme that was picked to work with
WordPress is the Divi theme. This is because this theme was setup in a manner that was similar to what
was imaged for the website as well as having a page builder feature to further customize the overall
design.
InstaWordPress InstaWordPress is a tool that was used for prototyping. This tool is used to configure WordPress offline.
This came in handy prior to acquiring a hosting service. This tool enabled easy configuration to settings
that were on the server ensuring that minimal problems were faced during final implementation.
First Prototype and Testing The prototyping of this project was done in InstaWordPress. This was chosen because of its ability to
allow offline use of WordPress. Testing the first prototype offline was important in case the overall
concept of the project utilizing the intended software did go well. It was used to create a mockup of the
website which enabled the upload of the settings to the website and also considerably shortened
development time server side. If any bugs were identified, the source of the problem would be
corrected. However, if there were any issues beyond team comprehension then the WordPress online
community would be enlisted to overcome any of the bugs or problems.
27
Test Plan Like any new product in development, testing is a vital component when creating prototypes. They
assist in the polishing of a software product prior to implementation.
Scope This test plan encompasses the functional use of banafarpharma.com. This includes the following:
- Responsiveness
- Creation of accounts
- Navigating the online store
- Identifying store elements
Product names
Product prices
Shopping cart
Checkout option
Related products
- Navigating checkout
- Uploading prescription notes
Primary Objective The primary objective of this test plan is to ensure the priority requirement, the e-commerce store, is
functional and meets established quality guidelines before final design implementation can begin.
Secondary Objective The secondary objective of this test plan is to identify changes that need to be made on the visual design
of the website.
Resource and Environment Needs The following is a list of the required resources for this test plan:
- End-user cultural liaison
- Internet-enabled devices
- Internet connection
Test Approaches The first test conducted is the responsive test. This test helps to detect any problems general bugs or
errors in the new web application when viewing on different sized browsers and mobile devices. In
order to fully identify areas that need improvement in terms of user experience, two primary test
approaches were conducted. These approaches were based on social science test approaches of
qualitative reasoning and assisted guidance. These two approaches were compared in order to identify
any changes that needed to be made to the user-experience design as well as identify any technical bugs
that exist.
28
The Volunteers There were a total of five volunteers for each test. Two of the volunteers are the owners of Banafar
Pharma. The additional volunteers are coworkers of Saurabh Singh. The considerations for the samples
chosen were to have a majority of the volunteers be random people and two being stakeholders in the
project.
The random individuals selected had to meet the following criteria:
Cannot be in a occupation that involves the design or development of e-commerce websites
Uses the internet to frequently purchase products online
o At least once every month
Have made a purchase online from a mobile device
The tests were created by Jan Michael C. Escobar due to his education in psychology and knowledge of
social science research. Jan Michael also acted as the test guide while Saurabh Singh acted as the test
administrator.
Multiplatform Responsive Test The multiplatform responsive test was where the Banafar Pharma web application prototype was tested
on multiple devices which include a desktop, laptop, tablet-computer, and smartphone. Alongside the
physical devices, the prototype was tested on different operating systems including Mac OS X, Windows
(7, 8, 8.1), iOS (2010 and up), and Android (4.2.2 and up). The prototype was designed on
InstaWordPress and then uploaded to the web hosting server was also used for the final product. This
was done because InstaWordPress has limited access to the internet and external devices do not have
the capability of accessing it.
Reasons for Test
1. Discover general bug issues and glitches
2. Test for various browser compatibility
3. Test for various operating systems compatibility
4. Ensure multiplatform translation is ok
Visual Diagram
29
Unobtrusive UX Test Approach In the unobtrusive test approach, a volunteer was given the URL of the website and asked to purchase a
product. It was stated to the volunteer that they can purchase any product they found of interest to
themselves. Being told to purchase a product was the only guidance given to the volunteer. It was also
stated to volunteers that no help will be given unless they were absolutely stumped on how to perform
an action. Team observers observed the process in which the volunteer went through in order to
purchase a product on their own. Observations on the amount of time it took to find content and move
on to the next step was noted. Concluding the end of the test, the volunteer was asked several
questions concerning ease of use and difficulties encountered.
Reasons for Test
1. Discover any usability issues
2. Generate feedback about user experience
3. Observe any user experience difficulties when not guided
Visual Diagram
Volunteer TestAdministrator
Visits website
Asked to buy a product
Selects product
Goes through checkout
Observes interacton
<<extend>>
<<extend>>
<<extend>>
<<include>>
<<include>>
<<include>>
<<include>>
List of Observational Factors
The following is a list of things that were noted in particular when observing a user volunteer
How long it took for the user to complete the task asked of them
o Time is an important factor
Pauses during the task process
Facial expressions
o Changes of expressions
May hint on difficulty of use
30
Guided UX Test Approach In this approach, the volunteer was guided step-by-step on how to purchase a product. Following the
conclusion of the test, volunteer was asked about several questions concerning the perceived ease of
use. They were then asked to repeat the steps without guidance.
Reasons for Test
1. Discover any usability issues
2. Generate feedback about user experience
3. Observe the retention of familiarity
Visual Diagram
Volunteer
TestAdministrator
Visits website
Asked to buy a product
Selects product
Goes through checkout
Observes interacton
<<extend>>
<<extend>>
<<extend>>
<<include>>
<<include>>
<<include>>
<<include>>
TestGuide
Instructs how to useinterface
<<include>>
<<include>>
<<include>>
<<include>>
Results of Test It was initially hypothesized that most tests would result in catastrophic failures causing the redesign
and prototyping of banafarpharma.com. The multiplatform responsive test resulted in text size changes
and the unobtrusive and guided UX tests resulted in the volunteers having fast, successful, and positive
experiences with the ordering process. This is suspected to be attributed to the interface design of
WooCommerce, the online store plugin. At the time of the tests, WooCommerce version 2.3 was being
used.
31
Implementation This section details the implementation of banfarpharma.com.
Go Daddy Setup
The above plan was chosen because of its cost-effectiveness as a whole package and the plethora of
features it comes with such as SSL and Standard Search Engine Visibility. Furthermore, this is the
ultimate plan offered by Go Daddy that can handle the most complex sites and heaviest traffic including
unlimited storage and bandwidth. This is ideal because it enables the website to combat the growing
number of internet users in India.
After logging into the Go Daddy account, it has a nice user interface that enables a person to activate
the features and know more about them by simply clicking on either manage or the plus (+) symbol.
32
Design Implementation After testing what would be the beta application, the design was implemented onto the host server in a
unique way. Since the prototyping application InstaWordPress allowed for the basic design to be
created, the framework of the design was installed onto the hosting server. From there, the final design
was configured and created within the final hosting environment.
The screenshots below depicts the interface used to finalize the design on the end-host server. It should
be noted that every page of the website started as blank white page with no design or useable GUI.
Design Interface One: Basic Setup
33
Design Interface Two: Module Setup (GUI)
Design Interface Three: Visual Design
34
Design Interface Four: Design Preview *Note: Even the white space is part of the page interface. An orange border has been placed in the
image to give a visual idea of where margins can be.
E-commerce Store Calibration: WooCommerce Once the e-commerce plugin had been installed into WordPress, everything was calibrated under the
settings tab under the WooCommerce menu. First, WooCommerce had to be calibrated for the location
Banafar Pharma is based in and the currency had to be switched over to the local currency, rupees.
Next, the social logins had to be configured. This was done by going to the Social Login section of the
Settings tab. Each specific social network had to be configured separately with the use of an API key and
API secret key.
Orders Interface To calibrate the e-commerce, it is done through the settings tab under the WooCommerce menu.
35
Settings Interface One Once in the settings tab, the base and specific locations are configured for Banafar Pharma. Under the
same tab, the local currency is also configured. For the project, it has been set to Indian Rupee (Rs.)
Settings Interface Two
36
Settings Interface Three Continuing in the settings tab, at the top there is a tab to calibrate the Social Login, this allows for users
to login using existing social network accounts. WooCommerce was configured to allow for logins from
Facebook, Google+, and Twitter.
Product Configuration Adding new products is done under the Products menu on the Add Products tag. This is where the
name, description, pictures, price, SKU, and any attributes are added to each product. Once the form
has been filled out, the product can then be published to show on the e-commerce store.
37
Configuring Social Network Login and Checkout One of the defined features of banafarpharma.com is the ability to create an account and checkout
using a predefined social network login. This was done by creating developer accounts and generating
application programming interfaces with each respective social networking site featured. Once the API’s
were generated, they were inputted into API forms available on WooCommerce’s settings which
allowed them to be displayed via widget on a page during design. The following screenshots are
examples of what was done to create these APIs.
Google+ API Creation
Twitter API Creation
38
Facebook API Creation
39
Final Design This section will display the final, implemented designs that are live right now on
http://www.banafarpharma.com/ . Please note: not all pages are displayed here. Page designs displayed
here may be out of date when viewing live prototype.
Shop Section
Shop Homepage
Product Page
40
41
Cart Page
Checkout Page
42
Prescription Entry and Upload
Account Creation and Social Network Login
43
Final Schedule This is the final Gantt chart depicting everything done for the project as of March 18, 2015.
Banafar Pharma Senior Management Review The owners of Banafar Pharma were quite pleased with the design that was presented. They liked the theme and clean look. Product navigation and checkout features impressed them. Implementation of the various payment methods including cash on delivery and the various formats that would be accepted as part of the uploading of the prescriptions were appreciated. Furthermore, the ease of use of the backend database and interface was welcomed by both the owner and employees after conducting their own user testing and walkthrough.
Usability rating: 9/10 Responsiveness rating: 8.5/10 Visual appeal: 9/10
44
Team Profile
45
Jan Michael C. Escobar
Occupation: Chef at the Tacoma Cabana and freelance web designer.
Background: N/A
Personality & Traits: Self-motivated and determined. He leads other members of the team based on his experiences in his
previous education and occupations.
Notable Quote: “Lok’tar Ogar”
Role(s): Lead UX Designer / Researcher
Visual Designer
Documentation
Responsibilities: Leads the team in user experience and visual design. Creates wireframes, prototypes, graphics, and
optimizes files. Also leads in usability testing and framework implementation.
46
Saurabh Singh
Occupation: Works for Beyondsoft Consulting as an IT Manager.
Background: Indian
Personality & Traits: Straightforward, confident, motivated and positive. Communicates well with all team members and
ensures that everyone is on the same page. His humor is known to be appreciated by others.
Notable Quote: “Stand-up for what you believe in even if it means standing alone.”
Role(s): Project Manager (first 4 weeks)
UX Researcher
Client Support Specialist
Responsibilities: Ensures clear communication between client and team. Manages the client’s expectations and conveys
the client’s needs to the team. Distributes work evenly and ensures the deliverables are completed on
time. Assisted in researching various competitor websites and the demographics of the client’s region.
Will help the client in maintenance of the website and troubleshooting going forward.
47
Xiaoju Bin
Occupation Works for Emerald Queen Casino as a food server.
Background
Chinese
Personality & Traits Dedicated, motivated, and determined. A person who is quiet most of the time but usually gets his job
done. Always loves to learn new things. Dedicated a lot of time making sure things were getting done.
Notable Quote “Live, Love, Laugh!”
Role(s) Project Manager
Web Developer
Documentation
Responsibilities Created a project plan, making sure every task is on schedule. Being part of the web development for
the backend side of the website. Also played the role of project manager for the last three weeks of the
quarter.
48
Calvin Le
Occupation: Specialist at an electronic cigarette shop.
Background: First Generation Vietnamese American from California
Personality & Traits: A quick learner who is dependable and self-motivated. Detail-oriented and resourceful to get things
done.
Notable Quote: “Once you’re over the hill, you begin to pick up speed”
Role(s): Ecommerce Setup
Backend Support
Responsibilities: Setup the store portion of the website as well as input products into the store. Researching products to
gather images for products and editing them to the design of the store.
49
Moving Forward (End Statement) By the end of week 10, www.banafarpharma.com is a functional prototype. Users can login,
create accounts, use social logins, and use the product catalog at length. The uploading of prescriptions
also works well. From here, the Banafar Pharma company will take over in the completion of the project.
The website is expected to be launched by the end of fall 2015. The expandability of this project is great
as well as its potential outreach. Every team member has expressed great satisfaction in being a part of
it.
Features left to install Landmarks
o To assist the company when delivering.
Enable Credit Card Payment
o Online credit card payment transaction needs to be implemented after helping the
client choose the write merchant vendor (Ex: CCAvemue, ebs.in, DirectPay etc.)
50
This page left blank intentionally
