UX DESIGN FINAL PROJECT

Transcription

1 UX DESIGN FINAL PROJECT WEBSITE redesign www. sewsimplymonkey.com By Carolyne C. Hao

2 I m choosing to redesign because unfortunately, it was one of the worst websites chosen from So here s a list of questions and answers during my usability test. 1. What strikes you first when you look at this site? It s got a lot of text, a lot of BOLD letter words. It almost defeats the purpose of bolding, as if everything and nothing is important. 2. Does it seem interesting for you to browse? No 3. Why not? It has way too much information. It lacks any structure or organization, a user would get annoyed with the long text very easily and quickly. 4. How do you like the color used on the site? I don t like the choice of color used here at all. It s a very pale yellow against big black bold out words. It s just visually unappealing. 5. How do you like the graphics and photos on this site? I don t like any of the graphics because one they are too small and insignificant, and they are too simple and just too elementary level. As far as the photos, they all are poorly representations of the product this site is trying to sell. The site is not selling monkeys, yet they have pictures of monkeys, instead of emphasizing on the clothes for monkeys. Besides, all of the photos are not aligned or of same size, so again visually very distracting. 6. Is it easy to navigate through the site? No, because its just got too much information and all are on one long page instead of categories or folders. There s so much information that you lose focus and lose any patience to read through all the words. WEBSITES THAT NEEDS HELP Two websites that have very poor design are html and Both are extremely unappealing with no consistent navigation areas, poor use of color and contrast.. has a pastel purple color background with very light texts and boring fonts with very minimal information about the site, no clear indication of what the page is about. As for it has an over abundant amount of information crowding the entire page. All you see are paragraphs in BOLD. Both website lacks in any sort of organization, styling or visual excitement. Both lack any types of header/logo, no consistency in navigation area, poor proximity and alignment. Color and graphics are distractive rather than enhancing. For I would first change the overall color and contrast of the site to something more universal and appealing to the general public. Then I would create a header/logo with a menu bar directly under and take out the flashy QuickTime plug-ins. I would organize the content in a more consistent manner and take out the click here for hyperlinks. For I would create a company logo and make the menu bar horizontal instead of vertical. I would use short paragraphs and bullet points in a consistent matter for fonts and sizes of all meaningful and useful content. The color will be revised to neutral and dark earth tone contrast. Only purposeful graphics will be used to enhance the appearance. 7. What would you change to make it a better site? - create a logo or banner for the company - change the color scheme that would be either soothing or more attention grabbing - reduce the long text and use bullet points - make photos more aligned and uniform sizes - it needs better organization, use grouping or categories - it needs a check out shopping cart - design better graphics - overall use less text on one page

3 This week, we are tasked to do research on some well-designed websites and learn what makes them great. Two of my personal favorite sites to visit are and So I invited my friends as my interviewees as their personas fit within the retailed minded, dedicate certain amount of time browsing and researching on the web, on the look out for new, innovative ideas or products scope of what I am researching on for my redesign project. Even though my friends and I are not likely to be the targeted customers for my redesign website of but we are together all on-line retail shoppers, thus it makes sense to look at other websites that does online retail in a brilliant way. Below you will find a summary of the feedbacks we encountered as we browsed Mini Cooper and Tiffany s online sites. COLOR SCHEME DESIGN & INFO For Tiffany s, we immediately loved the clean and elegant look of the layout and the color scheme. The home page and all the associated links had the white background with the signature Tiffany blue surround and all of the dropdown menus have the same color as you hover over them without clicking. The photography of the products is just gorgeous! Every page had a different kind of layout, but there s just enough information to fill the page without crowding it with text and pictures. We all loved that the site fills up the entire screen without scrolling downwards, instead it has a bar to navigate left to right so it maximize the product shots, very well done. On top of retail product descriptions of text and photo and pricing, the site also has a more corporate side to it. We love the information of Tiffany s history, corporate culture and pop culture etc. It showed us stories and definitely captivated our interest and imagination. Overall, Tiffany.com is inviting, informative, user friendly and interactive. We really enjoyed our browsing experience. I used Color Scheme Designer to help in selecting an accented analogic color scheme of orange, beige, pink and complementary of blue. Primary Color: FF7800 BF7330 A64E00 FF9A40 FFB573 Secondary Color A: FFAD00 BF9130 A67000 FFC140 FFD273 Secondary Color B: FF0D00 BF3730 A60800 FF4940 FF7A73 Complementary Color: 028E9B 1E6D74 015C65 35C0CD 5EC4CD For Mini Cooper, we also really loved their color scheme and layout. Although it s completely opposite of the white and tiffany blue, instead its black and grey with white text. It focuses all the color on the actual cars. The visual impact is interesting in a dark and mysterious way that made us very curious. The menu bars were very interactive that the user doesn t necessarily have to click on it before it shows a dropdown of what s behind the tabs. The best thing about the Mini Cooper site was how incredibly engaging and interactive it is with the user. When you want to build a customized Mini, the site gives you all the possibilities with real color, parts, specs and pictures and it updates once you make a selection. It is very easy and friendly but at the same time, captures interest and made us want to see more and more. This ultimately is a very successful design that it makes the visitors want to explore and maybe end up making a purchase. Again, we loved this site and wished there are more websites like this.

4 WIRE FRAMES COLOR WEB COMP

5 PERSONA RESEARCH Name: Mary-Jo Shaffer Gender: Female Age: 57 Marital status: Divorced Lives: Lincoln Nebraska Income: $-$$ Occupation: school cafeteria lunch lady CELLPHONE & ICON DESIGN Mary-Jo is a twice-divorced lunch lady currently living in Lincoln, Nebraska. Her education is high school and she is working at the same school where she graduated. Mary-Jo takes a lot of pride in her independence. She loves craft and small furry animals. She often shops at weekend farmer s market and county fairs; she s also a frequent Wal-Mart shopper. With very limited experience on the internet, Mary-Jo has never done any online shopping. Key goals & behaviors: The website must be easy to navigate Online shopping be very simple Availability on stock Fast delivery Possible FREE shipping Customer service line open 24/7 Attitude to Technology Very little experience Afraid of computer breaking down Online shopping NOT reliable Key Drivers Going out to family reunion or interest groups Key Goals and Needs I need to know they have free shipping or return just in case the cloth don t work out I need to have someone to answer my questions right away when I place my order Pain Points Anxiety level would rise when customers like Mary-Jo experience any issues during and after her online shopping. It is crucial that premium customer service is provided when these occasion arise. SewSimply MONKEY