trep
Diploma in Experience and Product Design | User Experience Design
CHIN WAI JIE [1426627] NG LUO WEI [1426458] TENG JIA MIN [1353189]
“The main focus of our telco is to create an efficient and convenient online purchasing experience for young adults. Catering as much as possible to their convenience in terms of time, transparency and quality.�
CONTENTS MARKET RESEARCH SINGTEL STARHUB M1 APPLE REDMART LAZADA SURVEY FINDINGS INTERVIEW FINDINGS
USER RESEARCH PERSONA
7 8 14 19 22 26 28 31 35 41 42
DESIGN REQUIREMENT
49
CARD SORTING
55
INFORMATION ARCHITECTURE & SITEMAP
62
PAPER PROTOTYPE
65
FINAL INTERFACE
107
MARKET RESEARCH
SINGTEL “A telco digital service.”
POINT
1
Good Practices
Figure. 1a. Singtel Digital Service Shipping Privileges
Possible Implementations
Flexible Delivery Provide the Options convenience to customers of having their new phone delivered right to their door step or choose to self-collect at their preferred SingPost POPStation.
We could cater to their needs by letting the customers to choose their delivery options. This would satisfy their needs for busy scheduled customers.
Self-collection 24/7 Service at Your Own Convenience
We could implement the 24/7 selfcollection service as it will be a flexible option for working adults who are often busy and students who are often not at home to self collect their items.
No need to wait at home or queue at the post office to collect th parcels. Select POPStation as delivery mode to collect your parcels anytime when you re-contract your Mobile combo plan online.
NETS or credit Multiple Payment Options card when making purchase online. Entrusted SSL, issued by the world leading Certificate Authority worldwide.
SingtelShop, (2015). Singtelshop.com - Mobile Phones. [online] Available at: https://www.singtelshop.com/ shop/phones/customer-support.jsf#delivery-options [Accessed 5 Nov. 2015].
We could implement the Entrusted SSL, which is certified world-wide, as it would further push the trust between the telco and the customer.
SINGTEL | MARKET RESEARCH | 9
POINT
2
Bad Practices
Figure. 1b. Singtel Digital Service Customer Support
Possible Implementations
Unknown of Majority of the When will people who want Receive Package convenience are very busy. The delivery is only from monday to friday.
We could try to accomodate to the majority by implementing the delivery to be on weekends as well. This will ensure that people who are not free on weekdays will have the option of receiving the package on days that they are free such as weekends.
Unable to Track Near Exact Time of Item Arrival
With reference to Figure. 1c. we could implement the GPS tracking system which is a mobile application which makes service more transparent to customers. It also boosts efficiency and convenience at the same time.
Unable to tell customers almost exactly when the item purchased will be arriving.
This is only used at the day and around the time the delivery is expected to arrive. Customers will be able to track their items and estimate the near exact timing the delivery will arrive. This systems cuts off uneccessary waiting time such as sitting around at home waiting and unable to focus on anything. We could implement this system so as the customer is allowed to track their item arrival time and their busy schedule would not be so affected because of it.
Figure. 1c. Domino’s Pizza GPS Tracking
SingtelShop, (2015). Singtelshop.com - Mobile Phones. [online] Available at: https://www.singtelshop.com/ shop/phones/customer-support.jsf#delivery-options [Accessed 5 Nov. 2015]. DEVLIN, C. (2015). Domino’s tracks delivery drivers. [online] Stuff. Available at: http://www.stuff.co.nz/business/70859878/ New-GPS-monitoring-devices-will-track-Dominos-Pizza-delivery-drivers [Accessed 7 Nov. 2015].
SINGTEL | MARKET RESEARCH | 10
POINT Step: 1
3
Step: 2
Figure. 1d. Singtel Digital Service Purchasing iPhone 6s Color Option
Step: 4
Figure. 1e. Singtel Digital Service Purchasing iPhone 6s Choose a Model
Step: 5
Figure. 1g. Singtel Digital Service Purchasing iPhone 6s Choose a Number
Figure. 1h. Singtel Digital Service Purchasing iPhone 6s Checkout
Step: 3
Good Practices Step-by-Step System
Possible Implementations Singtel digital service is very clear in terms of indicating each steps by numbers and headings such as, “1) Choose a model”
We could implement the step-by-step system to minimise the chance of our users being confused. Furthermore, with this step-by-step system, the choices are often placed side by side of each other. Making it clear and easy to make comparisons.
One can scroll down slightly to move on to the next step after each step is completed. Making it very systhematic. Figure. 1f. Singtel Digital Service Purchasing iPhone 6s Choose a Plan
Good Practices Color System
We may however improve from Singtel’s digital service is that we could include a indication if the specific color chosen is out of stock. The indication could be a different colour of button.
For Singtel, there is a tab at the top of the screen indicating user’s selections. This makes it straightforward and clear allowing users to be reminded and able to refer to their choices.
To improve on the limited view of the phone only from the front view. Maybe we can implement one that can allow the phone to be viewed from all angles for the user to get as much informtion from the view as possible online.
It eliminate the need for users to scroll all the way back up to check and recall what was selected.
Possible Implementations With reference to Figure. 1d. there are color options available to click and get an idea of how the phone looks like in a certain color. However, there is a limit that only the front view of the phone can be viewed.
We could definitely implement the color system to show the available colors.
Singtelshop.com, (2015). Apple iPhone 6s - Singtelshop.com. [online] Available at: https://www.singtelshop. com/shop/phones/phone-details.jsf?brandId=150&modelId=IPHONE_6S_16GB [Accessed 5 Nov. 2015].
Top Tab
We could implement a similar function to make it easy for users when they are purchasing their devices and choosing their plans. This will makes users feel more secure. This is because they are able to constantly check and ensure that they chose the right choice and minimise any mistakes.
SINGTEL | MARKET RESEARCH | 13
STARHUB “A telco digital service.”
POINT
1
Bad Practices Search Panel
Figure. 2a. Starhub Digital Service Shipping Privileges
StarHub, (2015). StarHub Ltd Official Website. [online] Available at: http://www.starhub.com [Accessed 8 Nov. 2015].
Possible Implementations The homepage shows a “Enter your search� panel which is confusing for people. The homepage itself did not clearly show that it is a telco website, especially with the adorable pet dog picture instead of pictures of mobile plans or other related mobile advertisements.
A possible implementation we can have is to never design the homepage in this manner. It should show advertisement of the latest phone or the newest plans that the telco would like customers to take note of.
This search buttons makes the telco digital service looks like a search engine instead of a telco homepage.
STARHUB | MARKET RESEARCH | 15
POINT
2
Figure. 2b. Starhub Digital Service Search for iPhone 6
Bad Practices Looks like a Search Engine
Possible Implementations Buying from a telco website and seeing links like what people usually see on search engines like Google and Yahoo is not a good purchasing experience. It gives of an impression of an unorganized website and the user is looking for things like a serach engine when it should be easy to find and there is not a need to search.
What we can do is instead of pasting the whole link there, we could possibly design a button that states iPhone 6 for the customer to click on instead of clicking on the link making it much more pleasing to the eyes to use visual instead of links.
Anon, (2015). [online] Available at: http://search.starhub.com/?q=iphone6&type [Accessed 8 Nov. 2015].
STARHUB | MARKET RESEARCH | 16
POINT
3
Figure. 2c. Starhub Digital Service Price Plan Options
Bad Practices Verticle Layout
Possible Implementations The layout of the plans is designed in such a way that it makes it very difficult to compare the plans. After scrolling downwards, the previous plans could not be clearly seen. This causes the frustration of being unable to view all the plans at once to compare them at ease.
Learning from this bad practice, we could design our telco in such a way that it is easily comparable by placing the plans side by side such that it is clearly able to be viewed at once with ease.
StarHub Store, (2015). iPhone 6s. [online] Available at: http://www.starhub.com/personal/store/mobile/ browse/apple/iphone-6s.html [Accessed 8 Nov. 2015].
STARHUB | MARKET RESEARCH | 17
POINT
4
STARHUB “A telco digital service.� Figure. 2d. Starhub Digital Service Promotions
Good Practices Catered to Specific Group of People
Possible Implementations Good plans for people that exceed their data usage. As youth will enjoy extra GB of data if they sign up the 4G plans with the specific telco.
We could implement specific plans for special groups of people such as youths who tends to use a large amount of data. These specific plans which serves the needs of specific group of peopel will help in attract them to our telco.
StarHub, (2015). Youth Plan Promotion. [online] Available at: http://www.starhub.com/personal/promotions/mobile/youth-plan-promotion. html?icid=dis-___201511--&utm_medium=carousel&utm_campaign=___201511 [Accessed 8 Nov. 2015].
STARHUB | MARKET RESEARCH | 18
M1 “A telco digital service.�
POINT
1
Figure. 3a. M1 Digital Service Personal Page
Bad Practices
Possible Implementations
Listing out the Models of the Phones
The selections for phones are in words and point form. Making it difficult for the user as he/she have to go through point by point.
We could implement the way we select our phones to be in picture form placed it in a format like thumbnails. This will make it much easier to see instead of the listing of phone models point by point.
Size of Advertisement
The pictures and advertisements are too small, causing it to be not eyecatching enough.
We could make advertisements and pictures the main focus of our digital service to make it more eye-catching as compared to their really small ones at the corners.
M1.com.sg, (2015). M1 - Mobile Phones & Plans. [online] Available at: https://www.m1.com.sg/personal/mobile [Accessed 8 Nov. 2015].
M1 | MARKET RESEARCH | 20
POINT
2
Figure. 3b. M1 Digital Service Choosing of Phones
Bad Practices Repetition of Same Model of Phones
Possible Implementations For the same model of phones, there is a repeated selection because of the number of GB for the phone. It is confusing and difficult to choose because the phones looks exactly the same from the outside.
We could showcase the phones in different GB through the standardization of one page for a model of phone. There there will be selections for the specifications like the GB in the page itself, so as not to create too much routes and confusion for the users.
M1.com.sg, (2015). M1 - Choose a phone. [online] Available at: https://www.m1.com.sg/personal/mobile/phones/filters/all-plans/apple [Accessed 8 Nov. 2015].
M1 | MARKET RESEARCH | 21
APPLE “A digital service for Apple users.”
POINT
1
Figure. 4a. Apple Digital Service Homepage
Good Practices
Possible Implementations
Clear Hierarchy
Latest Apple products advertised on the homepage, taking up around 75% of the whole desktop screen.
Taking advantage of the style of the eye catching advertisement on the homepage, we could implement it in our telco digital service to showcase the latest phones available.
Variety
The homepage is not only used to advertise one product, there are a range of five slides shown on it whereby the slides will change every few seconds.
Taking advantage of the variety of products the advertisement can showcase due to the range of slides, we could implement it in out telco digital service to show the latest phone of different brands available [eg. Apple, Samsung, HTC]
Apple, (2015). Apple. [online] Available at: http://www.apple.com [Accessed 5 Nov. 2015].
APPLE | MARKET RESEARCH | 23
POINT
2 Good Practices Straightforward Comparison
Possible Implementations The layout of the purchase page shows a side by side comparison of the different generations of iPhones.
We could implement the layout of putting phones side by side for direct comparison even for different brands phones. This could be according to the user’s choice of phones he wish to compare.
Figure. 4b. Apple Digital Service Comparing iPhone Models
Apple, (2015). iPhone - Compare Models - Apple. [online] Available at: http://www.apple.com/iphone/ compare/ [Accessed 5 Nov. 2015].
APPLE | MARKET RESEARCH | 24
POINT
3
Figure. 4c. Apple Digital Service Shipping and Tracking Items
Good Practices
Possible Implementations
Speed Delivery
Apple store implemented a earlier and faster delivery for in-stock items.
We could implement similar systems allowing customers to receive their items earlier as compared to other telco. So we could provide a service which would let users get their phones earlier as compared to other telco.
Monitor Items
Apple store will email a tracking number to the customer for him/her to track their order.
We could implement similar system to allow customers to be able to check their order. This system is very transparent and allows customers to be aware of the state of their order. Reducing possibility of frustrations due to unawareness.
Apple.com, (2015). Shipping, Returns & Pick Up Options - Apple. [online] Available at: http://www.apple. com/shop/browse/campaigns/shipping_and_returns [Accessed 5 Nov. 2015].
APPLE | MARKET RESEARCH | 25
REDMART “A digital service to purchase groceries online.�
POINT
1
Figure. 5a. Redmart Digital Service Anticipation Bar
Good Practices Anticipation Bar Keeps customers looking forward to something [free delivery] and have a goal to work towards. Which might have a effect on making customers buy more things.
Possible Implementations We could implement a similar kind of bar during purchases to give customers incentives such as if they purchase certain amount of accessories or have certain kind of add ons, they could be given free deliverly or discounts.
RedMart, (2015). Online Grocery Shopping - Groceries Delivery Singapore. [online] Available at: https:// redmart.com [Accessed 5 Nov. 2015].
REDMART | MARKET RESEARCH | 27
POINT
2
Figure. 5b. Redmart Digital Service Cart
Good Practices Clear Listing of things in cart
Possible Implementations The placement of the cart is at the top of the screen, making it very easy to check and look at what you have already added to your cart.
We could implement a bar that allows customers to easily check on their selected items while shopping. The bar will always remain at the top of the screen and allows customers to check easily even when scrolling.
RedMart, (2015). Online Grocery Shopping - Groceries Delivery Singapore. [online] Available at: https:// redmart.com/christmas [Accessed 1 Dec. 2015].
REDMART | MARKET RESEARCH | 28
LAZADA “An online shopping service.”
POINT
1
Good Practices “Highlights” Panel
Possible Implementations The “Hightlights” panel displays everything at once without compromising other products on the digital service.
We could make use of this panel to display all the latest phones of different brands without compromising other brands. This will ensure fairness to all brands.
Figure. 6a. Lazada Digital Service “Highlights” Page
Good Practices “Brand Central” Panel
Possible Implementations The “Brand Central” panel allows users who are brand specific to straight away jump to only browsing the brands of their choice.
We could implement this panel on our digital service to allow brand specific users to head to the brands of the device they wish to purchase. This will allow users to not waste time browsing other brands device, making it a faster service for them.
Figure. 6b. Lazada Digital Service “Brand Central” Page
Lazada.sg, (2015). Lazada.sg: Online Shopping Singapore - Electronics, Home Appliances, Mobiles, Tablets & more. [online] Available at: http://www.lazada.sg [Accessed 5 Nov. 2015].
LAZADA | MARKET RESEARCH | 30 29
SURVEY FINDINGS “Young adults age 18 and above.”
SURVEY Question 1: How often do you change your phone? Result:
Analysis: People often change phones once every two years. Question 2: What would you like for your next phone? Result:
Analysis: Majority of the market are more interested in Apple and Samsung phones.
Question 3: How did you get to know about that? Result:
Analysis: Majority knows about new phones through online research. Question 4: What is the biggest problem(s) you have encountered when using your Telco’s services?
Result:
Analysis: There is a wide range of problems people ecounter with Telco.
Question 5: Why do you prefer to purchasing online? Result:
Analysis: Majority of people prefer to purchase online because it is convenient.
Question 7: Do you think it is important to get the recent phone. Result:
Analysis: Majority of the people feels that it is important to get a recent phone.
Question 6: Why do you prefer purchasing at the store? Result:
Analysis: Majority of the people find it insecure to buy online.
SURVEY | MARKET RESEARCH | 35
INTERVIEW FINDINGS “People with the latest phones.”
INTERVIEW Question: How often do you change your phone? Why? Ans 1: I change my phone every 2 years because of the my Singtel plan. Actually I wanted to change to HTC M9 but I realised it is not much better compared to M8.
Ans 2: I change my phone every 2 years because recontracting is expensive if you terminate the contract early. I wish I can change more often though.
Analysis: Majority thinks that owning the recent phone is ideal but they often will choose to stay with
current phone for two years because there will be a voucher after two years therefore cheaper.
Question: What are the things you look at while choosing a phone? Such as Price, Plans, Features, Brand or Others?
Ans 1: I look at brands like HTC, SAMSUNG, APPLE. I also look at the plans.
This is because the bills quite high and I don’t know what I am paying for. (High data usage)
Ans 2: I look at brands like APPLE and SAMSUNG. Analysis: Majority often looks at brands like APPLE and SAMSUNG because it the the most popular and common brands, taking majority of the market.
Question: What would you like for your next phone? Why is this your choice? Ans 1: I am considering to change to SAMSUNG note 5, because the brand is popular plus it has 4G+ but I am also considering to change to APPLE iPhone next generation, if by that time the new one is better than note 5.
Ans 2: I am considering the latest iPhone by the time I am going to change my phone. This is because I have always been using iPhone and have no intention to change brands.
Analysis: Majority often only consider APPLE and SAMSUNG. Some are because they are used to it and have no intention to change brands. They are often brand central.
Question: Do you think it is important to have the latest smartphone or gadgets? Ans 1: To be honest, I think it is really quite important to have the recent 2 years smart phone because of the updated technology. Such as like the camera can get better, the speed gets better. And I personally would like to get better ones.
Ans 2: Yes, hahas because if not you will be like out of trend and cannot keep up with people and use the latest technology and all.
Analysis: Majority thinks that it is important to have the latest smartphone or gadgets as one may be out of trend or be outdated due to the inability to be in sync with the world.
INTERVIEW | MARKET RESEARCH | 38
INTERVIEW Question: Why do you not purchase phones online? Is it because of inconvenience, insecure or others? Ans 1: Actually, its because I feel insecure about buying such an expensive thing online and there might be problems with it. Like you never know if the product is new or not.
Ans 2: I am concern about the process of purchasing a phone online because I am afraid that there will be some error causing me to buy the wrong things and when I receive it, there might be defect with the product. I am also afraid there will be problems with the delivery.
Analysis: Majority are concern because they have never done it before and are unsure of what might
happen. They are generally ok with purchasing online but just not with such a big ticket product.
Question: Which features of these online shopping do you care about? Can you rank it from the most important to the least important for me?
Ans 1: 1) Shipping/Delivery
2) Website/Navigation 3) Details/Information 4) Customer support
Ans 2: 1) Shipping/Delivery
2) Website/Navigation 3) Customer support 4) Details/Information
Analysis: Majority feels insecure about the shipping and delivery the most. Question: Can you tell me why do you feel that shipping and delivery is the most important for you? Ans 1: It is actually because I am always often in school or working part-time, therefore the shipping and delivery is the most important to me as I am often not at home.
Ans 2: It is because I am afraid like what if I happen to be not at home or the things delivered have
defects and there will be a lot of trouble trying to exchange for it. Or even worse still is that I cant exchange it.
Analysis: Majority are concern about the delivery timing and the quality of product that is delivered to them.
INTERVIEW | MARKET RESEARCH | 39
INTERVIEW Question: Lastly, if there is a telco website, can I know how would you want it to be? Such as what kind
services you would wish it have? e.g. step by step purchasing system, flexible delivery timing, etc.
Ans 1: I would wish that the delivery would allow my family member to help me collect if I happen to be not at home. Or I hope it would have delivery on weekends when there is a higher possibility of me being more free. With regards to the website, I would hope that the website will provide maybe a video to show and explain the phone that I am going to purchase. As I think that telco websites dont have that function. I would also wish that there will be clearer information about the price of the plan because I wants to know how much money I actually have to pay monthly.
Ans 2: I would wish that there will be really clear and assessible information with regards to delivery
and what happens if there is defects or problems with it upon receiving. I would also hope that the website is very clear and easy to navigate. Such as a very clear system to buy any phone I wish to.
Analysis: Majority are just insecure about how the product is received and the quality of the product received as it is a big ticket item. They also expect a clear and easy to navigate website.
INTERVIEW | MARKET RESEARCH | 40
USER RESEARCH
PERSONA “I love to own the latest phones when they come out. However with my busy schedule, I have no time to be queueing up or waiting when getting new phone.”
ANNE
BUSY TREND FOLLOWER
ANNE ONG
ABOUT ANNE
Anne is a year 2 student studying Communications and New Media [CNM] at National Univerisity of Singaopore [NUS]. With such a background, she believes that websites having clear interface benefits everyone. She is a heavy social media user who uses a lot of data because she is currently staying in NUS hostel that has no wifi. She is provided with an allowance of $400 monthly. Even though she receive allowance, she often work parttime to save more money such that she is able to buy the latest phone to keep up with trends. She feels that trend is what keep her in sync with the world and make her confident. Therefore, she often spend a large amount of money on gadgets such as the latest phones. With that, she spend most of her time on schooling, doing assignments and working. She rarely have time go out to shop and thus often purchase her things online. She always have to wait till she is free or when the queue is not so long before she can queue for the phone. She often complains that renewing of her phone plans are costly and her monthly bills are rather expensive. She is currently using a Singtel Plan which provides Free incoming, 200 minutes outgoing talktime, 1000 SMS/MMS and 2GB bundled mobile data which is supposed to cost $42.90 per month. However she is always paying for much more and she is unsure of what she is always paying for that are causing her expensive bills. Therefore, she often spends a large amount of her savings and allowance on new phones and phone bills and she wish that she can spend lesser on them but is too unmotivated to find out why.
“I love to own the latest phones when they come out. However with my busy schedule, I have no time to be queueing up or waiting when getting new phone.� AGE
20, YOUNG ADULT
LOCATION
SINGAPORE
MARITAL STATUS
SINGLE
LIVING
NUS HOSTEL
OCCUPATION
STUDENT
SALARY
$400 MONTHLY ALLOWANCE
EDUCATION
STUDYING UNIVERSITY YEAR 2
GOALS
- She wish she could feel secure to purchase her phones online like how she purchase other things. Such that she can get the latest phone at the fastest time possible. - She wish that she is able to complete transactions in minutes without doubts. - She hopes that the website to purchase the phone will be easy to navigate. - She wants to be kept up to date with the latest devices.
HABITS
- Very updated. She is always very aware of new softwares and keeping herself updated with them. - High data usage user. She always uses her phone data to send short videos through a social network [snapchat] and browse her social network such as [Instagram, Twitter] when travelling and during times she is doing nothing in her hostel. - Rarely uses talktime and SMS as there are social networks and applications such as Whatsapp that allows free calling and texting.
MOTIVATORS
- Being able to use the latest phones and being in sync with the world is what builds her confidence and her character. - Being able to keep up with trends is what motivates her to work hard.
THOUGHTS Renewing plan will be the easiest! I don’t know much about plans anyways. ACTIONS Scroll down slightly, spotted the number selection. + There are clearly two options available, “Choose a new number” and “Use back old number” + There is this panel at the top of the screen, adding on my choice as I move along the service.
THOUGHTS Wells, I guess a iPhone 6s that is 64GB is fine too!mv
THOUGHTS No matter what I need to buy the latest iPhone by today! ACTIONS Goes to Telco website. + A very eye-catching advertisement! + The advertisement actually changes! It shows all the latest phone nowadays.
ACTIONS Click on the telco logo followed by the advertisement. Arrive at the iPhone 6s page. + Very clear indications what to click. + Advertisement on homepage were impactful. + Layout when arrived at iPhone 6s page shows very clearly which phones are out of stock.
New Number
THOUGHTS
ACTIONS
+
Reuse Number
SCENARIO
Figure. 7d. Plan Choice
Figure. 7a. Advertisement
Renew
Choose
DIY
Figure. 7c. Plan Choice
Figure. 7b. iPhone Comparison
THOUGHTS I will probably be getting a iPhone 6s Plus, as it is the lastest phone now. ACTIONS Click on the iPhone 6s Plus advertisement. + Wow, right from the start I get to choose the color and the storage space available. - Hmm... It seems like there is no 128GB in rose gold.
Navigating the Website
THOUGHTS Now I’ve chose rose gold and 128GB, what’s next. ACTIONS Scroll down slightly, spotted the plans. Chose the “Renew Plan” immediately. + Either get to choose “Renew Plan”, “Choose Plan” or “DIY Plan”. + Easy to navigate. Just click on the things I need to design my own plan. + The price for the plan designed is indicated at the bottom.
THOUGHTS I don’t need a new nu Let’s see what is next ACTIONS Scroll down slightly, c the cart icon. + It only took me 3 step [Choose color/size, d plan, choose phone n to indicate what I am purchasing. + Clear overview of wh chosen. Allows me to check my choices.
Process of Choosing Phone
S I have checked my order already, now I need to choose how I can collect my order. S Click on “ok” button to confirm the order. Arrive at the collection page. + There are clearly two options available, “Self-collection” and “Delivery”
THOUGHTS I’m most likely only free on weekends. ACTIONS Click on “Weekends” option and it states that the delivery charge are more expensive. + At least it states clearly that they charge more. + Don’t mind paying more as it really saves the hassle.
THOUGHTS Im done with my purchase! Oh there is a pop-out that recommends me to download the telco app as it will remind me of the delivery time and even allows me to track my delivery status through it. ACTIONS Head to app store to download it. + Will not forget about delivery timing. + Reduce waiting unknowingly due to unknown status of delivery.
Figure. 7e. Checking Bar
umber. t. click on
ps design number] m
hat I’ve o double
THOUGHTS I am definitely choosing delivery, I got no time to collect myself. ACTIONS Click on delivery and arrived at the delivery option page. + First there are two options, “Weekdays” or “Weekends” + Very clear indication of choices.
THOUGHTS There are a few timeslots available. Let’s choose the one on saturday before lunch, since I only start work at 2pm that day. ACTIONS Chooses the slot 11am-12pm. + Easy to see the available slots.
THOUGHTS Done! This is good, fast and clear! ACTIONS Close the website. + Finish purchase with no queries. + Fast and easy to navigate layout.
Checkout SCENARIO | USER RESEARCH
DESIGN REQUIREMENT
DESIGN REQUIREMENT No.
Needs How it meet users/business needs
Requirement What the system needs to do/feature
Rate [0...5]
1
Delivery at their convenience
Delivery system have to be improved to cover up weekends as well.
4
Customers will be allowed to pre-reserve the time slots they want for the delivery to arrive. There will also be a application recommended to the customers to download such that they will be reminded of the delivery date and time. They will also then be able to track the near exact arrival time of the delivery. 2
Trade in services
Trade in system of setting up arrangements and appointments to do a video call with the staff to check on the quality of the trade in phone.
4
Through the video call, the staff members may ensure that the phone is still working fine such as the screen is fine, the sensitivity of the phone is still fine, it still can be use to call and the parts are all intact, etc. Through the video call, the staff members will confirm if the phone can be used to trade in and will approve the order accordingly. 3
Reduce unknown waiting time
Tracking systems for their delivery to let them know the near exact time the delivery will arrive to reduce the unknown wait at home. This is because people often have to sit around and do nothing during the period of time the items are expected to arrive. The tracking systems allows the users to know the near exact time and thus reduce the uneccessary waiting time.
3
DESIGN REQUIREMENT | 50
DESIGN REQUIREMENT No.
Needs How it meet users/business needs
Requirement What the system needs to do/feature
Rate [0...5]
4
Clearer user interface
There could be indicators for step-by-step purchase to assist the experience of the purchase such as the examples shown from Figure. 8a. to 8c. This will largely helps to ensure that navigating is easier.
5
Figure. 8a. Apple Care Indicator Bar
Figure. 8b. Apple Add to Bag Indicatcator Bar
Figure. 8c. Apple Check Out Indicatcator Bar
Apple, (2015). iPhone 6s 16GB Rose Gold (GSM). [online] Available at: http://www.apple.com/shop/buyiphone/iphone6s/4.7-inch-display-16gb-rose-gold [Accessed 8 Nov. 2015]. http://www.apple.com/shop/buy-iphone/iphone6s/4.7-inch-display-16gb-rose-gold Apple.com, (2015). Bag - Apple. [online] Available at: http://www.apple.com/shop/bag [Accessed 8 Nov. 2015].
DESIGN REQUIREMENT | 51
DESIGN REQUIREMENT No.
Needs How it meet users/business needs
Requirement What the system needs to do/feature
Rate [0...5]
5
Clear comparison method
There interface will be designed with side by side comparison table to enable user to make direct comparison for the plans or the products they take interest in. This will ensure a much easier and clearer comparison when they are choosing.
5
Figure. 8d. Singtel Choose a Plan
6
Transparency of service
Enable the customer to check and track the status of their items, being able to give them the assurance of the delivery by implementing the tracking system on the purchased item.
Purchase Received
Trade-in Approved
Item Delivered
3
Item Received
Figure. 8e. Apple Check Out Indicatcator Bar
Singtelshop.com, (2015). Apple iPhone 6s - Singtelshop.com. [online] Available at: https://www.singtelshop. com/shop/phones/phone-details.jsf?brandId=150&modelId=IPHONE_6S_16GB [Accessed 8 Nov. 2015].
DESIGN REQUIREMENT | 52
DESIGN REQUIREMENT No.
Needs How it meet users/business needs
Requirement What the system needs to do/feature
Rate [0...5]
7
Clear hierarchy of layouts
Enable the user to scan through the page in order of importance. For example using 75% of the page for an iPhone picture could let the user focus more on the iPhone advertisement and follow up browsing the site.
4
Figure. 8f. Apple Advertisement
DESIGN REQUIREMENT | 53
CARD SORTING
CARD SORTING Task: We layout the individual components that we came out with on the table, and group the items up. We gave a
header on each section and redid the whole process to get a mutual agreement of what we want the website to be and what the website should have.
CARD SORTING | 56
CARD SORTING 1st Set: We layout the headers of Home, Latest Phones, Brands, Plans and Queries. And we arranged the site according to what we perceive easiest to reach the goal of purchasing a phone.
CARD SORTING | 57
CARD SORTING 2nd Set: After testing out the structure with various testers we did some improvement of adding footers, like the Terms
and Conditions to always be on the bottom of the website wherever the user navigate. We tested the testers with a task and improved accordingly. After improvements we decided to use this draft to map out our site map.
Thoughts: The Card Sorting helped us design and evaluate the information architecture of a telco site. We tested out our
Card Sorting with people with a task, and made changes and improvements that make sense to the user. We understood how the testers would sort the cards to navigate through the website in their own way. Through card sorting, we understood the users expectation and figured out the structure and what to put on the homepage. CARD SORTING | 58
INFORMATION ARCHITECHTURE & SITEMAP
INFO ARCHITECTURE & SITEMAP Task: We came up with a wire structure that is lacking in the begining, as we started to imrpovise the paper prototype, the wire structure gets updated. The final wire stucture is then completed after testing and improvising.
HOME
BRANDS
HELP SUPPORT
DELIVERY STATUS
ADDITIONAL PURCHASES
Advertisement
All Phones
FAQ
Login
Accessories
Page of phone clicked on advertisement
Page of phone clicked on advertisement
Common delivery questions with answers
Pop up of delivery code prompt
Delivery status shown
Step 1: Choose a model Login
Register
Step 2: Plans Re-contract Pop up of current plan
New Plans
DIY DIY Plans
Add Ons Caller ID Dataroam Mobile Internet Filter
Next
Step 3: Number New Number
Step 4: Accessories Selection of accessories
Next
Step 5: Trade In Yes
No
Fill up trade in details
n
Delivery Choosing of delivery date and time Confirmation of order Checkout Fill in details
Automatic fill in Payment Transaction summary Print
Done
Pop up of Email notification Email
Thoughts: The site map helped us organise the complicated
volume of information into wireframe mockups that is flexible to edit and remove through further improvements. It is a tool that help clarify the goal and purpose of the website, to successfully navigate and purchase a phone. It is a useful tool that helped everyone to get on the same page. It is accessible to everyone working on the project to remove confusion. The site map helped us to create less unnecessary pages and eliminate things in early stages. INFORMATION ARCHITECTURE & SITEMAP | 63
PAPER PROTOTYPING
1
st
PAPER PROTOTYPE
Task: Purchase iPhone 6s, Rose Gold, 16 GB, purchase a plan, add on Caller ID. Feedback: More specific task is needed. Description 1: Home Page, clicking on the “Brands” header Image:
Description 3: Page displaying all phones, with the feature of filtering them. Image:
Feedback: Changes: Description 2: Brands Page, clicking on “All Phones” Image:
Feedback: How do I know that I click the phone and it will be added in to the comparing section?
Feedback: Changes: -
Changes: Improve by adding plus buttons for every phones under All Phones.
Description 4: Choosing phones for comparison. Image:
Feedback: If I don’t wish to compare anymore how am I suppose to remove the phone from comparison?
Changes: Improve by adding a Remove button at compare section.
Description 5: Phone chosen will be add on to the panel at the bottom. Image:
Feedback: After I choose the phones how am I suppose to compare? Changes: Improve by adding a Compare button at the compare section. PAPER PROTOTYPING | 67
1
st
PAPER PROTOTYPE
Description 6: Clicking on the “Compare� button. Image:
Description 7: Comparing page, when scrolling down to show specifications, the pictures of the phone above will remain still. Only the specifications will be moving according to the scrolling.
Image:
Feedback: Is the compare in the box a header or a button? Changes: Improve by making changes to layout all the buttons and heading accordingly. Headings should not have boxes.
Feedback: Interesting idea. Changes: -
Description 8: After comparison. Image:
Feedback: Standardise the back button or icons.
There is no buttons to indicate the purchase of the phone after comparing.
Changes: Improve by making every page that has Back button the same. By
Description 9: Buying iPhone 6s. Image:
Feedback: After pressing the phone, there is no description page of the phone.
Changes: Improve by adding a description page for iPhone 6s.
using same location and same button. Improve by adding a “Buy� button for each phone.
PAPER PROTOTYPING | 69
1
st
PAPER PROTOTYPE
Description 10: Starting the purchase of iPhone 6s. Image:
Feedback: Interesting and thoughtful idea that the out of stock is indicated on the first step of purchase.
Changes: Description 11: Brands Page, clicking on “All Phones� Image:
Feedback: What if I am having a current plan and whats to continue my plan? What if I want to choose a new plan?
Changes: Improve by reconsidering the choice of words for the header. Such as use re-contract.
Description 12: Choosing a Plan. Image:
Feedback: Why is the plans blank? Not detailed making of the plans page. Changes: Improve by adding in the plan specifications. Description 13: Choosing add ons. Image:
Feedback: Changes: -
Description 14: Reusing current number. Image:
Feedback: How does the system knows my current number? Changes: Improve by adding a step at the front part for customers to
login/register to have a record of their information before they are able to purchase a phone.
Description 15: Accesories page. Image:
Feedback: What if I do not want to purchase any? What do I click? Changes: Improve by adding a Next button or a No Thanks button.
Description 16: Option of trading in. Image:
Feedback: Changes: Description 17: Trade in details. Image:
Feedback: There is an arrow for drop down but there is no drop down? Changes: Improve by completing the drop down selection menu. PAPER PROTOTYPING | 71
1
st
PAPER PROTOTYPE
Description 18: Choosing the delivery slot. Image:
Feedback: Changes: Improvement add the reason why the time is not available at terms and condition.
Description 19: Check out. Image:
Feedback: What if I forgot which plan I selected at this stage? Changes: Might need to add the cart bar to be always at the top to refer to what is actually selected previously.
Description 20: Confirm Checkout. Image:
Feedback: Good idea to let people re-confirm their items in the cart. Changes: Improve to put this section at the top throughout the whole
process of purchasing to act as a reminder. Change to a “Confirm” button instead of “Check out” button.
Final Finish up with purchase of phone. How to make payment? Feedback: Changes: Improve by finishing up the whole process of purchase. All the way till payment and confirmation of purchase and delivery.
PAPER PROTOTYPING | 73
2
nd
PAPER PROTOTYPE Task: You are currently having iPhone 6.
Compare iPhone 6s with Xperia Z5. Trade in your current phone and purchase an iPhone 6s in Rose Gold, 16GB, reuse your number, renew your current plan to Combo 2. Add on Caller ID and select your delivery date on 1st December 9:00pm to 10:00pm
Feedback: Add the information of current phone quality, specify the items the user have for trade in section. Specify the payment method.
Description 1: Home Page, clicking on the advertisement for iPhone 6s. Image:
Description 2: Page for iPhone 6s. Image:
Feedback: Interesting to have the footer.
Interesting advertisement section for homepage but no clear indications that the advertisement can be clicked.
Changes: Improve by adding “Buy” or “Find out more” buttons.
Feedback: Button placement needs to make sense and not enough details for iPhone 6s.
Changes: Improve by putting both buttons closer together at a location.
Description 3: Choosing phones for comparison. Image:
Feedback: Good to include the + button to indicate the adding of phones to compare.
Changes: -
Description 4: Comparing chosen phones. Image:
Feedback: The compare looks like a heading in a form of button. Changes: Improve by changing and standardising all the heading and buttons.
PAPER PROTOTYPING | 75
2
nd
PAPER PROTOTYPE
Description 5: Comparing page, when scrolling down to show specifications, the pictures of the phone above will remain still. Only the specifications will be moving according to the scrolling.
Description 6: After comparing. Image:
Image:
Feedback: Can I know the price of the phone? Interesting scrolling design. Changes: Include the price and improve on other comparing factors.
Feedback: Good to have a “Buy� button under phones. Changes: -
Description 7: Starting the purchase of iPhone 6s. Image:
Feedback: Changes: -
Description 8: Prompt for login/register. Image:
Feedback: Changes: -
PAPER PROTOTYPING | 77
2
nd
PAPER PROTOTYPE
Description 9: Register Page. Image:
Feedback: Unsure of what to fill in each boxes.
Why only one of the three boxes got drop down.
Changes: Improvement to standardise everything to not drop down, include it as DD/MM/YY.
Description 10: Register Page. Image:
Feedback: After the email, what do you mean by for confirmation? Changes: Improve and name it to confirm password.
Description 11: Choosing a Plan. Image:
Feedback: The headers and buttons are confusing, what does it mean by “Choose”, under Choose a plan?
Changes: Improve by changing “Renew” to “Re-contract”, “Choose” to “New”.
Description 12: Pop up of details of current plans. Image:
Feedback: Changes: -
PAPER PROTOTYPING | 79
2
nd
PAPER PROTOTYPE
Description 13: Choose a Number. Image:
Feedback: Reuse number sounds weird under header of “Choose a number”.
Changes: Improve to “No Thanks” or “Proceed with current number”button.
Description 14: Pop up of current number. Image:
Feedback: Changes: -
Description 15: Accessories page. Image:
Feedback: Changes: Improve by including the price for the accessories.
Description 16: Option of trading in. Image:
Feedback: Changes: -
PAPER PROTOTYPING | 81
2
nd
PAPER PROTOTYPE
Description 17: Drop down of Phone Models. Image:
Feedback: Good that there is terms and conditions. Changes: -
Description 18: Trade in details. Image:
Feedback: Changes: -
Description 19: Choosing delivery slots. Image:
Feedback: There is no indications to show which dates are unavailable before they click.
Changes: Improve by changing the colour of the buttons to indicate which
Description 20: Pop up for confirmation of dates. Image:
Feedback: Changes: -
day is not available.
PAPER PROTOTYPING | 83
2
nd
PAPER PROTOTYPE
Description 21: Confirming order. Image:
Description 22: Check out details. Image:
Feedback: Changes: Improve by changing “Confirm” button to “Checkout” button.
Feedback: Changes: Improve by changing “Use My Details” button to “Use Existing Details”.
Description 23: Payment details. Image:
Feedback: May want to explain what is CVV. Changes: Improve by adding explanation for CVV through images.
Description 24: Transaction summary. Image:
Feedback: Not enough details. No total amount. Changes: Add in more details such as delivery dates and total amount the customer needs to pay.
PAPER PROTOTYPING | 85
2
nd
PAPER PROTOTYPE
Description 25: Pop up to inform about verification email. Image:
Description 26: Verification email. Image:
Feedback: Very thoughtful to send an email to refer to. Changes: Feedback: How do they know which is their item? They might use other’s account to purchase things.
Changes: Improve by craafting clearer email, might need to add the delivery tracking page and delivery tracking code.
PAPER PROTOTYPING | 87
3
rd
PAPER PROTOTYPE Task: You currently own an iPhone 6.
All your charger, phone and USB cable are in working condition. You are to compare iPhone 6s to Xperia Z5. Trade in your current phone and purchase an iPhone 6s in Rose Gold, 16GB. Reuse your number, Renew your current Youth plan to Combo 2. Add on Caller ID and select your delivery date on 21st December 9:00pm to 10:00pm. Purchase through VISA and your products will be sent to your house which is at S7111123, BLK 123, #01-111, DOVER CRESENT 123.
Feedback: Description 1: Home page with advertisement showing the various latest phone of different brands for the trend chasers.
Image:
Description 2: Page for iPhone 6s where user could choose to compare the current phone with other phones of their choice.
Image:
Key Features: Big advertisement that covers more than 50% of the home page
Key Features: The feature of showing the phone changing color accordingly to
Improvement: -
Improvement: Shows different views of the iPhone 6s.
advertising the latest phones just like a slide show.
the color choice chosen from the side panel.
Description 3: The all phones page that shows all the phones, with a auto filter that places the latest phone on the top of the list.
Image:
Description 4: The “Compare” button at the bottom right hand corner of the compare panel brings you to another page to compare the phones you have chosen to compare.
Image:
Key Features: The feature of clicking on the “Plus” symbol to add phones that you wish to compare to the bottom compare panel. Also if you don’t wish to compare that phone you can click on the minus sign to remove them from the panel.
Improvement: -
Key Features: The compare panel that is constantly at the bottom of the
page, to display the selected phones to compare as user scrolls through all the phones.
Improvement: -
PAPER PROTOTYPING | 89
3
rd
PAPER PROTOTYPE
Description 5: The specification of the phones compared in clear column and rows.
Image:
Key Features: Improvement: -
Description 6: Scrolling through the specifications of the phones. Image:
Key Features: The image of the phones remains constant throughout at the top even when user scroll through the specifications, for the ease of referring back to the phone specification is under.
Improvement: Shows different views of the iPhone 6s.
Description 7: Purchasing the phone through clicking of the “buy� button under the image of the phone.
Image:
Key Features: The buy button that exists for convenience of purchasing after the comparison.
Improvement: -
Description 8: Choosing the color and GB of phone. Image:
Key Features: The marked out buttons to indicate out of stock phones in
advance. The cart panel that is at the top will be standardised throughout the steps of purchase to let user refer back to what is selected with ease.
Improvement: -
PAPER PROTOTYPING | 91
3
rd
PAPER PROTOTYPE
Description 9: The Login page and Registration selection. Image:
Description 10: The registration process of keying in user’s details. Image:
Key Features: Improvement: -
Key Features: Improvement: -
Description 11: Re-contract of plan for the user. Image:
Description 12: A pop up to notify the users current plan, giving the choice to continue with the users current plan or upgrade.
Image:
Key Features: Improvement: Key Features: A pop up for users who clicked on “Re-contract� button to notify the users current plan, giving the choice to continue with the users current plan or upgrade.
Improvement: -
PAPER PROTOTYPING | 93
3
rd
PAPER PROTOTYPE
Description 13: The plans compared in columns, with price and package details specified.
Image:
Description 14: Add-ons for the phones made available, with the price specified under each button.
Image:
Key Features: Improvement: Key Features: Improvement: -
Description 15: The choice of choosing a new number or to proceed with current number.
Image:
Description 16: A pop up to notify the users their current phone number after choosing to proceed with current number.
Image:
Key Features: -
Key Features: -
Improvement: -
Improvement: -
PAPER PROTOTYPING | 95
3
rd
PAPER PROTOTYPE
Description 17: Additional accessories available to order for the users. Image:
Key Features: Improvement: -
Description 18: Choice to trade in the users current phone. Image:
Key Features: Improvement: -
Description 19: Filling up the trade in details. Image:
Key Features: Clicking on the arrow on the “Phone Model� will reveal a drop
down of the brands and hovering over the brands will then reveal a drop down of the types of phones available for trade in under the brands. There is also a notice at the side to advice customers to back up their decide and erase all data for privacy reason.
Description 20: Filling up the trade in details. Image:
Key Features: After the necessary details are filled up, it will proceed tothe next page.
Improvement: -
Improvement: -
PAPER PROTOTYPING | 97
3
rd
PAPER PROTOTYPE
Description 21: Choosing delivery slot. Image:
Key Features: The terms and conditions of delivery specified under the
calendar. The days that are not available or fully booked marked out to reduce the frustrations of user. After hovering onto a certain date, the available delivery timing would appear for selection.
Improvement: -
Description 22: Confirm delivery slot. Image:
Key Features: A confirmation pop up to remind and confirm the delivery date selected for the user.
Improvement: -
Description 23: Confriming order. Image:
Key Features: The step by step ordering system would collapse and the panel at the top will prompt user for confirmation of order.
Improvement: Maybe can increase the size of the cart and show more details.
Description 24: Fill up delivery details. Image:
Key Features: Users that would like to deliver to existing address filled in through the registration could choose the “Use my details� button to reduce the need of filling in again.
Improvement: -
PAPER PROTOTYPING | 99
3
rd
PAPER PROTOTYPE
Description 25: Fill up payment details. Image:
Description 26: Fill up payment details. Image:
Key Features: Improvement: -
Key Features: Hover over the “?” icon to reveal the details of CVV. Improvement: -
Description 27: Confirm payment details. Image:
Description 28: Transaction summary. Image:
Key Features: Key Features: Improvement: -
Improvement: -
PAPER PROTOTYPING | 101
3
rd
PAPER PROTOTYPE
Description 29: Pop up to inform user that a verification email is sent to the user. Image:
Key Features: Improvement: -
Description 30: Checking Email. Image:
Key Features: Clickin on the link “www.trep.com/delivery” brings the user to
the “delivery status” page whereby users can check the status of their delivery with the code provided.
Improvement: -
Description 31: Login to check the status. Image:
Key Features: Improvement: -
Description 32: Key in delivery code. Image:
Key Features: After logging in, the delivery code will prompt the user to check
the correct purchase as there may be more than one purchases made from the same account.
Improvement: -
PAPER PROTOTYPING | 103
3
rd
PAPER PROTOTYPE
Description 33: Delivery Status page. Image:
Key Features: The Trep telco van will appear on the stage where the progress of the order is at. With the different stages being Processing, Confirm Order, Dispatch and Received. This allows the user to know and guage which status the product is at.
Improvement: -
Description 34: FAQ page. Image:
Key Features: If the user have any questions related to delivery status, clicking on the “FAQ” will bring them to this page where there are common questions regarding delivery answere. Clicking on the “plus” symbol at the right side will reveal the answers to the questions.
Improvement: -
PAPER PROTOTYPING | 105
FINAL INTERFACE
FINAL INTERFACE
FINAL INTERFACE | 109
FINAL INTERFACE
FINAL INTERFACE | 111
FINAL INTERFACE
FINAL INTERFACE | 113
FINAL INTERFACE
FINAL INTERFACE | 115
FINAL INTERFACE
FINAL INTERFACE | 117
FINAL INTERFACE
FINAL INTERFACE | 119
FINAL INTERFACE
FINAL INTERFACE | 121
FINAL INTERFACE
FINAL INTERFACE | 123
FINAL INTERFACE
FINAL INTERFACE | 125
DESIGN INTERACTION 2 | USER EXPERIENCE DESIGN