The goal of this project is to design an ecommerce website. This required me to:

Create wireframes
Collect User Feedback
Implement revisions
Create a final prototype

Brand and Style

Logic Board Games is a fictional business specializing in the sale of board games and gaming accessories.Based out of Southern California, the company wants to establish a larger presence with an online ecommerce site.

The branding emphasizes the color purple as it symbolizes a sense of wonder, mystery and power. This is contrasted by the color yellow which represents creativity and happiness. All of these emotions are associated with the gaming process, and the purple and yellow combination is reminiscent of the Los Angeles Lakers, tying Logic Board Games to its Los Angeles roots. More information on branding and coloring was created prior to the wireframing process.

Personas

Mark

Mark is a 34 year-old business owner. He owns a board game cafe and looks for games to bring in traffic. Of course, he is familiar with major games like Dungeons & Dragons, but he also needs new games that will attract a causal audience into his cafe.

Mark visits Logic Board Games looking for:

New and popular titles
Highly rated games
Games suitable for different audiences such as: families, groups of young adults, and novice gamers

Philip

Philip is a hardcore gamer. He is 23, has played strategy board games for the majority of his life, and enjoys the intricacies and evolution of these games. He is prone to spending an entire day playing games on the weekend.

Philip visits Logic Board Games looking for:

Uncommon items in games
Recommendations from like-minded individuals
Reviews on games and items

Heather

Heather is a 43 year-old mother of two. She seldom plays games, but her two sons enjoy playing board games with their friends. Heather’s life is busy, but she want to be able to find games related to her sons’ interests.

Heather visits Logic Board Games looking for:

A familiar shopping experience. She’s accustomed to Amazon.
Games from familiar franchises
Appropriate items for her sons ages 9 and 12

Wireframes

To begin the development of my e-commece website, wireframes were designed. These include a home page, categories page, item page, and check out screens.

Style

After the wireframes were created, a stylized prototype was created using photos of actual games and designed using Axure. Interactivity was incorporated using the software, and the style is intended to include reviews of titles and familiar interactions for an easy shopping experience. Many of the images found on this prototype were edited using Adobe Illustrator.

Prototype

After the wireframe was developed, a stylized prototype was designed. This included realistic text, images, and check out process. All pages designed as wireframes were stylized in this process and interactivity was included.

User Research

To gather information about the prototype of Logic Board Game’s ecommerce site, a survey was administered to individuals who tested the website. Customers were given one prompt, they were told to purchase the game “Blank Slate,” which was available through the prototype.

The first six questions were ranked on a likert scale with five options: Strongly agree, agree, neither agree nor disagree, disagree, and strongly disagree. The final two questions were used to collect quantitative data and were left open-ended.

Five individuals tested the website and completed the survey. The sample was a sample of convenience, meaning the individuals were selected because they were available, willing to test the prototype, and complete the survey.

The survey was administered in a controlled environment. Participants only had access to the prototype of Logic Board Games on the administrator’s MacBook Pro. All participants sat at the same desk and were not allowed to leave the test screen until completion.

Prior to taking the test, all participants were given informed consent.

Research Questions

Logic Board Game’s home page provided options to discover new products
Logic Board Game’s home page provided options to discover new products
The product page presented enough information to determine if this game would suit my needs
The check out process provided clear instructions to progress
I knew when the checkout process was complete
I knew how to return to the home page upon completion of my transaction
Where did you experience frustrations while using Logic Board Games’s website?
How would you describe Logic Board Games’s ability to discover new products?

80%

of users “strongly agreed” the initial design allowed them to discover new games. The other 20% “agreed.”

40%

of users “disagreed” that the design allowed them to filter by category, while another 40% “neither agreed nor disagreed.”

40%

of users “strongly agreed” the check out process showed progress while another 40% “agreed.” The remaining responses “neither agreed nor disagreed.”

60%

of users “disagreed” or “strongly disagreed” that they know how to return to the home page. The remaining 40% “strongly agreed” they knew how to return to the home page.

Final Revisions

After feedback from testing was collected, the finalized prototype implemented changes to interactivity and user experience.

1. A home button was added to the top of the page. Users can return to the home page by clicking this or the header logo.

2. Categories represented real filtering categories and displayed a level of customization to the filtering process.

3. The summary page removed the accordion menu, so all items in cart were displayed without clicking.

4. A suggestions menu was added on the product page for product discovery, borders around images removed.

5. Imaged can be enlarged by clicking or hovering over alternative images on the product page.

Final Design

After developing a style guide, personas, and a wireframe, research was conducted on an initial prototype. The final revision implemented changed based upon research data collected.