Cycle City E-commerce Website Client: Cycle City for Eastpark Industry: Retail Duration: 1.5 Weeks Project Circumstance: Student project at General Assembly Project Skills: Contextual Inquiry, Heuristic Evaluation, User Flows, Card sorting, Sitemap, Sketching, Wireframes, Prototyping, Usability Testing, UI Design Cycle City Eastpark had noticed that their Cycle City e-commerce site was out of date, clunky and not resonating with their customers. As a project at General Assembly, I worked to craft a clear and easy to navigate new e-commerce experience by understanding both the business goals and key personas needs. The result was a prototype walkthrough in Axure allowing the personas to complete their key tasks whilst also address the business goals of Eastpark. Final Prototype Client: Cycle City for Eastpark Industry: Retail Duration: 1.5 Weeks Project Circumstance: Student project at General Assembly Project Skills: Contextual Inquiry, Heuristic Evaluation, User Flows, Card sorting, Sitemap, Sketching, Wireframes, Prototyping, Usability Testing, UI Design Project Brief To begin the project, I was supplied with a document of pre-completed research from the client which outlined the key personas, their pain points, needs and scenarios and also the business mission, values and brand personality. This gave me insights into the users I was creating the experience for and helped create a starting point for design decisions and further research that I needed to complete. I also created a user flow of the process these users take to purchase an item. I combined each of the personas actions into the one flow. Discovery & Research Eastpark had provided me with a list of Cycle City’s products, however, these were not yet categorised. The next step was to place products in categories that made sense to its users. This involved a range of techniques including desk, field and user research. Contextual Inquiry To begin, I visited a bicycle store to get a better understanding of the product range. Through seeing the products placed around the store, I could better understand how information could clearly be arranged on the site. As part of my visit, I spoke with a SME working in the store who provided some key insights. 50% of people look for brand first, 50% of people look for product first Helmets cannot be ‘accessories’ as they are compulsory in NSW Competitive Analysis I looked at the key competitors of Eastparks, concentrating on their information architecture and navigation structure. I used this to compare primary and secondary navigation items to further inform category names to use and test. A key insight was alphabetising content for clearer scanning. Card sort After this, I did an open manual card sort allowing me to place products into categories that seemed the most logical. I also had 2 other users perform this exercise to help draw initial conclusions. The bulk of products fit into clear categories however a selection of products could be categorised in various ways. I then chose to do a hybrid card sort using Optimal Sort ( This allows users to put products into pre-defined categories, or create their own category) to get a larger user base to complete the task. 31 participants completed the task which helped define the most common categories. Through user testing of the navigation, I made slight tweaks to the name of the drop down as users felt the word ‘bike’ was repetitive. The final categories were: Bikes, Helmets, Bike parts, Accessories and Cycling Apparel. The Design Phase Through delving into the results from optimal sort, competitive research and insights from the SME, I put each of the products into a category and sub-category to form a sitemap for Cycle City. Some key decisions were placing the kids bikes in age groupings and creating a top navigation item for ‘Top brands’. This would help users find the products they were looking for as Mrs Cheng was looking for a bike for a 9 year old and Harry was looking for a brand specific wheel. Wireframes I stared with some rough sketches to get a good idea of how I would structure the information on the site. I looked at UI layouts of key pages (Home, Product, Product Detail & Checkout) to understand existing UI patterns and feature structures. These were my initial wireframes: Homepage Product Listing Product Detail Checkout Usability Testing I created a prototype of the design in Axure with the key user scenarios as walkthrough demonstrations. I had 6 users test the prototype using a usability guide. Through this exercise, I found there were some recurring problems with my design and areas that confused users. I then mapped these responses in order to group common paint points by severity and frequency so I could resolve the most prominent problems first. These were some of the issues users were experiencing: Iterations Users felt they had no choice but to add the selected options and wanted to be able to browse more products. I decided to remove this feature and simply add in ‘complete the look’ to the product detail page. The checkout process, although allowing for the user to ‘calculate’ delivery, did not give an option to enter details. I added in a section to the process which allowed the user to select ‘delivery’ or ‘pickup’ options and fill in their details. There was no option for the user to check the pick-up availability on product detail page. I added in a pick-up section as well as delivery. Final Prototype After multiple design iterations, I worked on creating the hi-fidelity screens within Axure. The final prototype allows a walkthrough of the persona scenarios supplied. “Harry needs to replace his front wheel with a Shimano MT, preferably in white to match the rest of his bike and gear. He want’s to pick it up on the way home from work, once he knows it has come in.” Final Prototype Next Steps Make a mobile responsive site. Further develop ways to make improve the experience for users when the item they want is not in stock. Add auto-fill functionality for existing customers in the checkout with their billing details etc. Project Skills Contextual Inquiry User Flows Card sorting Sitemap Sketching Wireframes Prototyping Usability Testing Heuristic Evaluation Project Tools Axure Optimal Sort Photoshop Illustrator InDesign