6pm Tablet and Mobile Design DESIGNED, RESEARCHED, AND REPORTED BY XINNI WU FALL 2016
6pm Mobile Design Smart Goal -TO IMPROVE 6PM MOBILE DESIGN LAYOUT -TO AT TRACT 25% OF 18 TO 30 YEAR-OLD USERS WITHIN 25 WEEKS IN 6PM’S APP
Information Architecture Design FEATURE PRIORITIZATION MAP, USER-FLOW CHART, MIND MAP, CARD SORTS
Feature Prioritization Map
User-Flow Chart
Mind Map
Card Sorts
Card Sorts
Press Release 6pm always offers shoes, clothing, accessories and more on sale! This is for online shoppers who are between 20 to 55 and always looking for discounted prices. 6pm is an online retail store that sells shoes, handbags, eyewear, accessories, and clothing from different brands. They always offer discounted prices in luxurious fashion goods. 6pm offers discounted prices for different brands. 6pm wants consumers to speed less money and buy more items in their purchase for better deals. People are always looking for a cheaper price in items such as shoes, clothing, bags, accessories, and more. People want affordable high-quality products. They want a place to shop with confidence and easily to find a reasonable price rather than looking for different websites. 6pm offers lower prices, but they do not accept exchanges. 6pm has limited quantities, styles, and sizes and exchange for product for a different color, size, or same item is hard to do. That’s the reason 6pm has discounted prices for different brands. Moreover, they are always in sale with different deals every day. People can shop without fear of the high price in luxurious goods.
“Feed your need for brand names at great prices with the convenience of online shopping. Stimulate your wardrobe with fresh, new styles, and proudly exhibit your astounding designer fashion, top-notch performance gear and casual/contemporary fashion style for all to see.” 6pm.com You can simply use the navigation on the home page to help you get started on shoes, clothing, accessories, and bags, or you can look up for different brands to see what 6pm got for you! “When stuff is on clearance and with extra discounts things end up cheaper that crappy Walmart brands, and we are talking high quality, designer items that will last a while.” Yulia Morozova – 6pm consumer. Now, you can narrow down your choices under different navigation pages to help you find your affordable product!
Hand Sketches MOBILE AND TABLET
Wireframes MOBILE AND TABLET
UI PATTERNS
UI PATTERNS
UI PATTERNS
UI PATTERNS
Mobile HOME PAGE, COUPONS, MY ACCOUNT, SEARCH PAGE, SIDE MENU, PRODUCT PAGE, CHECKOUT
Tablets HOME PAGE, SEARCH PAGE, PRODUCT PAGE
Mobile Low-Fidelity Prototype HTTPS://MARVELAPP.COM/1324AFD
User Testing U S E R S ’ B A C K G R O U N D I N F O R M AT I O N
T O TA L : 2 2 PA R T I C I PA N T S 1 7 F E M A L E S O U T O F 2 2 PA R T I C I PA N T S A N D 5 M A L E S O U T O F 2 2 PA R T I C I PA N T S 1 7 PA R T I C I PA N T S A R E B E T W E E N 1 9 T O 2 4 Y E A R - O L D ; 3 PA R T I C I PA N T S A R E 2 5 T O 3 0 Y E A R - O L D ; 2 PA R T I C I PA N T S A R E 1 8 Y E A R - O L D O R Y O U N G E R .
Search Page How many columns of images do you like to see in a search page?
9 out of 22 participants like to use 3 columns of images to find products. 8 out of 22 participants like to use 2 columns of images in a search page. Only 4 out of 22 participants like to use 1 column of images or see very big image in a small device. Overall, 40.9 % of people like to see more images at the same time even images are so small.
Main Navigation What do you think should appear on the main navigation section?
18 out of 22 people believe a simple home or shop page is necessary for an app. The second element that should be appear on the main navigation is my account or my profile page. 15 out of 22 people believe my account/my profile is important to them. The third element that people believe should be one of the main navigation is the shopping bag. 13 out of 22 people wants to see their shopping bag all the time. A search section is also important for users because they want to search for anything at any time in the app. 12 out of 22 people believe search button is necessary for them in the main navigation to make search easier. Last, the fifth navigation option that people believe should be appear on it is the deals and sales because it allows consumers to see discounted prices all the time during their shopping at 6pm. This is 11 out of 22 people, and there are 10 people believe coupons option is useful for them too. Overall, the five navigation options that participants believe is necessary are home/shop, my account/ my profile, bag, search, and deals and sales.
The Necessity of Search Button 19 out of 22 people believe search button should be appearing every page on the app, but there are still 3 people believe it should only appear on home page or it feels distracted.
Menu 20 out of 22 people believe a menu button should appear consistently on the same area so it guides people during their visit. However, there are still 2 people believe it is unnecessary to appear on every page. One person mentioned combine both menu and bottom navigation might be useful.
My Account/My Profile What do you like to ADD under my account section?
People suggested by moving “setting” section to my account page makes more sense because only 8 out of 22 people believe setting should be appearing on the main navigation. Last, my account page should have a button to edit “my account” such as name changes and upload a new profile image.
Filter Position Where do you think the filter should appear on the app?
14 out of 22 people believe the filter should appear on the left side, which is 63% of people. 3 people believe it should be on the top; 2 people believe it should appear on the right;
Like and Dislike Please describe what do you like or dislike about the app?
Like: Some people like the organization and layout of the app, and it seems logical for them. Dislike: the app is not simple enough to use because some people believe the app has too much information or it is cluttered. One person believe it should be more colorful.
Live Chat Will you use live chat in an app?
8 out of 22 people said they would not use the live chat on an app. 7 out of 22 people said they will use the live chat. 6 out of 22 people said they might use or not use the live chat to ask questions. Overall, there are 27.3% of maybe and 31.8% of yes, so there still more users that will use the live chat.
Overall Experience Average: 73.18% based on 22 participants
User Testing Result Summary (9/22) 40.9 % of people like to see 3 columns of images at the same time even images are so small. (8/22) 36.4% of people like to see 2 columns of images at the same time. Five navigation: home/shop, my account/my profile, bag, search, and deals and sales. 19 out of 22 people believe search button should appear on every page. 20 out of 22 people believe a menu button should appear consistently. 14 out of 22 people believe the filter should appear on the left side (63%)
Project Retrospective I think it is difficult to create an app by sketch and think about what types of buttons should appear on an app for users. I think I am enjoying the most in tablet design because the tablet is similar to the desktop design but still relate to mobile. I think by designing for desktop, there can be many information to fit into a big screen. I can have different buttons added if I have one. Desktop design do not need to fit one type of structure. However, there is a limited navigation and information in a mobile app. If an app has too much information, it will become distracted and confused. If an app is too simple, it seems users cannot find any information on the app. Designing for desktop and for mobile are similar because they have the same elements such as navigation, products types, and colors. They are different in structure and layout. The way how people tap on the mobile screen is different than click on a desktop screen. The new challenges that happened when prototyping and testing the mobile product are people could not find certain buttons that I told them to do. It seems the screen is so small, and the text is small too that made them lost during the testing. Because not every button works which made online testers frustrated. I think the only way to make this work is to have more pages inked to make it easier for testers.
Designing for desktop and mobile are two different methods, but I feel mobile is a good way to learn. Because I am more comfortable with designing desktop, I will still prefer desktop design. I think I can learn from other similar apps to help me to juggle those responsibilities. It is a nice way to help me learn and also support the concept, functionality, and aesthetic. I think by keeping the same aesthetic as the original product but still make it look different is my strength. I think I need to improve on functionality, I will use user testing to help me improve the function of an app. This gives me a better understanding of how a button should work.