Community & Commerce Prototype

Deliverable Samples

This prototype was built using HTML/CSS & Javascript/jQuery. I worked on the customization feature and the homepage drag & drop layout as well as the overall visual design. Other team members created the search results and the product details.

An html/javascript prototypeView the Prototype

A prototype for a possible future of community, commerce and content

Prototype scenarios

  • Modify homepage by adding the account widget.
  • See if other team members are online and chat with them
  • Find a Microcontroller and view product details

Project Details

My Role: Lead UX Researcher & Architect

Some time after the community was launched there was some high level discussion about how to feature community content in the transactional sites and also feature products in an appropriate way on the community. We decided it would be good to brainstorm and sketch some designs and then build a prototype which would allow us to test those ideas as well as communicate/demonstrate what a more concrete vision of the future might look like.

I was given the opportunity to assemble and lead the team to build and test the prototype. My first task was to assemble a team from internal resources that would be able to not only help come up with ideas, but would also be able to help build the prototype. At the time there was only one other UX architect on the team besides myself. Fortunately, they also knew how to do basic html coding as well. I was able to also pull in an ecommerce BA, who I knew had done web design and development on the side, as well as two of the top web designers/developers from the US and UK marketing teams.

The Team

  • 2 UX architects
  • 2 UI Designers
  • 1 BA
  • Stakeholders included: Director of UX and Global Head of eCommerce

Activities and deliverables

  • Research Review
  • Server Analytics
  • Feedback Survey
  • Ideation Workshops
  • Prototype


We initially spent several days locked in a room reviewing previous research and server analytics. We then worked on generating and sketching ideas on the white board and conference size note pads. We then moved into creating some quick mock-ups that we could use to share with stakeholders who were located around the globe. After a couple of rounds of feedback and revisions we set out to build the prototype.


There was some discussion over how to develop the prototype. At the time we had only one license to the iRise tool used by the other UXA. For this project however, we needed to have everyone able to contribute to building the prototype. So we decided to build it using html/css and leverage jquery for interactions and dynamic elements of the web site. Since this prototype was also intended to be shared with senior management we wanted to do a high-fidelity version. I created the visual design and the main template we used for the prototype. I also wrote the code for homepage module customizations and the “connect” side bar. The other team members worked on the search results and account area widgets.

Usability Testing

After we had a working prototype of the areas we wanted to test, we put together a plan to usability test the prototype in different regions around the globe. We planned to do testing in the 3 major regions that we serve; US, EU, and Asia. I once again was given the opportunity to lead the sessions that would take place in Shanghai as well as the sessions in the US. The other UXA went to Prague as we wanted to get feedback from one of our developing markets in the EU.

We included the other team members in the usability testing in the US and EU so that they could observe how users interacted with the prototype. We also invited other key stakeholders to observe. For the sessions in Shanghai, as before, I was able to find a translator and in addition, this time I had a member of the UI team from Singapore come join me to assist in the observations and moderating sessions. This was their first time to be involved in usability testing so I prepped them in the basics and provided guidance pre and post sessions.

Lessons Learned

Overall, it was a great chance to work across regions and teams. This was the first time the marketing, ecommerce BA, and UX teams worked together. It also provided us an opportunity to help the other teams learn more about UX. Among the things we learned from the testing included that people would not likely customize the homepage and that things that are hidden will not likely be discovered. People did however respond very favorably to the giant footer we had put into the prototype.

Unfortunately, there was a senior leadership change just after we completed the usability testing and most of the work was set aside as the priorities were shifted to more short term efforts. We did revisit some of the concepts a couple years later in another effort to bring community and commerce together as well we deployed a minimized version of the giant footer.One other take away I have is that for a group effort on a prototype I recommend using a central version control repository like git hub to help manage the project progress. I spent a lot of time manually merging the code from all the team members.

We use cookies to analyze our traffic. Please press the accept button to continue your visit. View more
Cookies settings
Privacy & Cookie policy
Privacy & Cookies policy
Cookie name Active
This site uses cookies to track basic interactions. No personal data is collected or saved on this site. If you submit an email to be contacted it will only be used if a response is requested.
Save settings
Cookies settings