A FIVE-CHAPTER DRAMA
Table Of Contents
Prologue - Project Background
Act 1 - Industry Research
Act 2 - Project Planning
Act 3 - Prototype Development
Epilogue - Upcoming Features
As an UX Designer contract assignment, I proposed a revision of New England Comics' currently existing website for heuristic improvements.
ABOUT NEW ENGLAND COMICS
New England Comics is a comic book retail chain based in New England that has been in business for over 30 years. New England Comics relies on used and rare comic book sales for their business. NEC has also published the Tick comic book since the late 1980s.
THE PROBLEM STATEMENT
The comic book industry originated in the 1830s and has now become a multi-billion dollar industry. Public Interest is sky-high, with blockbuster movies breaking critical and sales records on a frequent basis. However, comic book sales have gone down over the past several years. Much of this is due to the changes in fans' reading habits, as many of them now prefer to read online.
Unfortunately, many comic book-based websites are not interested in supplying digital services for their readers, primarily because of concerns online reading will negatively impact comic book sales. With this in mind, I devised the following problem statement:
The New England Comics website has no functionality to help users purchase their products or services.
My first task was visiting the Malden New England Comic store to interview store customers about their comic book shopping habits and thoughts the about comic book industry. I also interviewed the NEC store staff for their opinions on the customers' use of the website.
My interviews revealed customers are dismissive about the New England Comics website, as it has no interactivity. A few of the interviewees are long-time comic fans that review comprehensive information about a comic book before they purchase it.
These interviewees stated that if they seek information from or about NEC's products, they will either call or visit the store instead of visiting the website.
The staff interviewees stated that the site's unresponsiveness is intentional. The website's design is only meant to resemble a newsletter for announcing advertisements and promotional material, not to interact with customers. However, the staff mentioned they do desire an interactive website to help introduce potential new comic buyers to the store's products.
IN-DEPTH FEATURE ANALYSIS
I reviewed The New England Comics website in deep detail to analyze its user experience design. From my analysis, I created a card sorting structure to understand the site's information architecture.
The interview answers and card sort revealed the website's UX issues. In particular,
- The NEC website has no interactive functionality or awareness of the user's presence.
- The NEC website has no consistency in it's design or layout.
- The NEC website does not provide any indication or direction to guide the user.
COMPARATIVE HEURISTICS ANALYSIS
I also reviewed three alternative comic book websites and took the following notes about their heuristic design.
Very archaic design. Offers information about product and services, but IA is unintuitive.
Crisp and clear design. A bit noisy, but ascetically pleasing with good standardized functionality.
Very noisy layout. Good functionality, but confusing feedback system and restrictive user control.
"The New England Comics website has no functionality to help users purchase their products or services. "
I devised Affinity Maps from the interview and screener answers I received, as well as the notes from the comparative analysis. The Maps identified the common issues and desires of the New England Comics website.
- NEC website is only for product announcements, no interactivity.
- Customers find the website confusing and not useful for information about the store
- Customers would like to read more comics online similar to Kindle
- NEC publishes the Tick comics directly, and wants that aspect publicized.
- Most 3rd party comic book sites are outdated and archaic
With the results of the Affinity Map, i began planning the New England Comic website re-design.
With the research complete, I determined that the New England Comic website should have a streamlined purchase system to accommodate new customers. The site should also have comprehensive information comic book for veteran fans. This in mind, I drafted my solution statement for the design project:
“The redesigned New England Comics website will improve the user experience of their customers' digital purchases.”
I used the information from the Affinity Map to devise three user profiles.
-Comic book collector. Not tech-savvy, but knows the comics industry. always looking for a good deal.
-Millennial fan. Tech savvy, hates sites with bad UX. Just learned about a comic character he likes and want to read a good story or two.
-Soccer Mom. The E-Commerce shopper looking for a quick present for someone.
With these three profiles in mind, I planned out the features I intended to develop.
Primarily, I wanted robust searching options to accommodate the searching habits of the three unique users. I also wanted comment functionality so users can build community by reviewing and commenting on NEC products.
Secondly, I wanted a "gamification system" that incentivizes frequent visits. I also planned functionality for different mail shipping options.
If time is still available, I would implement smart "product finder" tools to ease new customers' frustration of searching a comic book inventory. I would also research what non-transaction related online activities site visitors would like added to future versions of the site.
I listed out the planned features in categories of critical, desirable and optional importance. They are listed as follows:
- Filters to search for different types of comics
- New and popular comics should be searchable
- Allow customers to browse related products
- Allow customers to comment on products
- Reward loyalty for repeat customers
- Allow for different shipping options
- Offer advanced wizard-like 'product finder' tools
- Offer online activities unrelated to purchasing products
I created a site-map of New England Comics website to verify the information architecture of the new site.
I added a "Comics" tab to house all comic book products and a "Collectibles" tabs to house all non-comic products. Both of these tabs have Search and Filter functionality to customize search results
I also created different tabs for NEC-hosted events & info about NEC themselves,
I also added a tab for a user's account activity, summarized by a "Point System" that can be utilized to offer rewards to frequent visitors.
Lastly I added separate buttons for checkout and account settings.
"The redesigned New England Comics website will improve the user experience of their customers' digital purchases."
I designed a user flow map to indicate the two methods to purchase a product on the NEC website. Both of these paths have three segments: account login, product purchase, and checkout.
The first segment of both paths begins with a choice to either sign in with a personal account, guest account or not at all. Both paths diverge in different directions for the second segment.
The second segment of the first path illustrates different ways to browse the NEC online inventory to select products to purchase.
The second segment of the second path illustrates selecting a product to purchase directly from a saved list in a user account.
Both paths converge in the third segment, which prompts the user to confirm their checkout method.
I sketched website's five primary screens to conceptualize the new layout.
The global navigation houses tabs for Comics, Collectibles, Events, Account & About pages. It also contains links to the Check Out and Accounts Settings pages.
The first screen is the home page, designed to display products and company announcements. A user can select comics for purchase from this page.
The second screen shows the layout for product browsing page, which supports either a "Detailed" or "Thumbnail" view.
The third screen is the item detail page displays the description, condition and purchase options for an individual item.
The fourth screen is the sign in page, which prompts the user to log into either the personal or guest account.
The fifth screen is the checkout page that prompts for payment and shipping information.
Once i was satisfied with the preparatory plans, i began prototype development.
I designed the low-fidelity prototype with Azure, referencing my paper sketches for the appropriate proportions and composition of the assets. I kept the prototype low-fidelity to disregard high-level concepts such as the color theory.
However, the art displayed on a comic book website is a primary draw for the potential consumers. Therefore, I used black and white comic book covers as placeholders to acknowledge the target audience's sensibilities for art, while also seamlessly blending in with the prototype's aesthetics.
I tested the prototype with several participants to evaluate the website's layout design, information architecture, and responsiveness to user input. My findings revealed there were several flaws in the initial design. The flaws, and my revisions to these issues, are listed as follows:
Home page screen
- View Cart & Cart items are in a confusing location. Consider moving them
- I initially had the View Cart CTA at the left side of the global nav, near the NEC logo. I moved it to the rightmost portion of the nav.
- Home icon screen should link to Home page when clicked
- I added that functionality in.
- Allow guest account to save items in the cart
- My initial website design only guest the option to purchase a product, it did not give them the ability to save for a later time. I added functionality to allow guests to save products in the cart, similar to Amazon's guest accounts.
- Add a filter button for filter results
- My initial version of the the prototype have no filter options. This suggestion inspired me to add a additional filter column to filter search results under various conditions
Item Detail screen
- Make it easier for the user to know they can order more than one quantity of a item.
- Although my initial website version provided options to purchase multiple quantities of an item, users did not know how to change the amount. I added arrows next to the quantity field as a visual cue the field can accept input
- Move the “Condition” section over
- I placed the "Condition" field of the comics on right-hand of the screen, i moved it to the left side of the screen to ensure layout consistency of the "Info Bar" in the Item Detail screen.
Check Out screen
- Emphasize that “All Sales are Final”
- I added a notification message indicating purchases cannot be refunded. The message is located at the top screen, so users can read it before they make a purchase
- “Continue shopping” instead of “Cancel”
- "Cancel" has negative connotations, so i changed it to "Continue Shopping" to maintain a pleasant experience.
- “All fields must be filled
- i added"alert" exclamation marks to appear next to Payment fields that are empty when the "Save and Continue" button is clicked
- use “mm” & “yyyy” for format
- i left the date and year field blank. i added gray "mm" and "yyyy" prompts for users to input values in the correct format
- 2 lines for “Address”
- added an additional field for address entries.
- Include “Tax” Subtotal
- Inform user the amount of tax to be paid on the item selected for purchase.
WEBSITE RE-DESIGN 2.0
Overall, I am pleased with the result of the low fidelity prototype, as I was able to include all the critical and desirable functionality into the first version of the website. In the near future, I would like to add the following features.
1) Non-Transaction Related Online Activities
I would like to add an on-line forum system to facilitate general discussions about comic-book/pop-culture related topics.
2) Smart "Product Finder" Tools
Possibly wouldn't be implemented till version 4.0, but i am interested in predictive behavioral analytics tools that will help consumers discover new products in an interactive and engaging experience.