Case Studies USER EXPERIENCE DESIGN TEAM

Transcription

1 Case Studies USER EXPERIENCE DESIGN TEAM

2 CPICE-Commerce WebsiteUX UX Optimization Optimization E-commerce Website

3 BACKGROUND Nowadays, user experience is becoming a key to business success. Pactera UX team was invited to help client CPIC build a user-friendly e-commerce website. The website is required to: Provide diversified categories of products, each category has a unique page that offers the best value products to customaers. Different campaign pages such as group buying and time-limited buying are designed in order to attract more customers. For the need of gift redeem, they would like to have a troublefree process for gift redeem, so users won t give up due to the complicated process. A responsive design to make sure users have best experience. They also would like to have a dedicated mobile version. So even in a small mobile device, users could complete complicated tasks.

4 Competitive Analysis Understand Cmpetitors, Understand Customer It is important to know how your competitors do, and learn from their strength. We analyzed more than 20 e-commerce website including foreign Personas & Scenario Background Alan is an a CPIC insurance insurance holder holder who who just received just received a voucher. a voucher from CPIC. He is notified to login to Taishenghuo website to redeem the product. Objective Redeem the gift product by inputting the code he received on the website. USER JOURNEY Characteristics Age: 35 Gender: Male Occupation: Project Manager Online Shopping Experience: Sometimes websites, famous domestic websites and direct competitors. However, it is not enough to know your competitors, but also important to know yourself, know whom we are designing for. We created personas and scenarios to help us get an insight of our users. Insert the Code Users need to know where to redeem once entered the site. Users may give up if the first step can't lead them to what they want. Register & Login Register & Login is a required step from the client but an annoying thing to the user. Users should feel that register is to help them complete gift redeem instead of preventing them from it. Select Product Provide imortant information to users to help them select. Users should be able to filter the products. Finish Shopping Process Provide consistent experience as normal purchase. Provide an exclusive place for users to track redeemed products.

5 Wireframe: Home Page Rapid Protyping Wireframe of Sign up during Gift Redeem Wireframes helps us quickly show our conceptual ideas and present to the client. We are able to quickly receive feedbacks and optimize. At the end, we provided a HTML file generated by Axure that shows the layout, feedback of the system and interaction descriptions. This was delivered to the development team and visual designers later.

6 Travelling Product Page Group Buying Page Product Detail Page Pixel Perfect Design Once the conceptual interaction design was confirmed with client, we started creating conceptual visual design and got it confirmed. Visual design production starts when each part of interaction was finished, so it was overlapping with interaction design. The deliverables of this stage was psd files, red-line PNG.

7 Mobile Website Design Pixel Perfect Design Once the conceptual interaction design was confirmed with client, we started creating conceptual visual design and got it confirmed. Visual design production starts when each part of interaction was finished, so it was overlapping with interaction design. The deliverables of this stage was psd files, red-line PNG.

8 Front-end Development Front-end Development Our designers were working closely with developers to make sure the actual product looks the same as we designed. The front-end developers work was to code the actual website using HTML, CSS, Java Script and JQuery and cooperate with designers and Back-end Developers.