UX Portfolio

UXD Content: ‘Netweaver’

The Brief

The UxD(Content) module emphasises methods for qualitative design research, and the creation of innovative design concepts. Key user activities are deciding what to do next (being persuaded) and communication.

The project blog can be viewed here: http://crystalhinam.co.uk/uxd-content/


  • To explore and develop a creative, reflexive approach to the design of engaging digital content that is embedded in, and shaped by, the context of use, and realised using personal, ubiquitous, multimedia, multimodal and embedded technology. One might call this “UX as Design”.
  • To critically and reflectively apply this approach to innovative and/or industry facing design projects using contemporary tools and technologies. The best grades are reserved for students who push back the boundaries of contemporary practice to create breakthroughs in experience design.

I designed a prototype to improve a persons experience when business networking. I explored the problems ‘networkers’ encounter, which were primarily meeting the wrong people and not getting value for their money and time. My app ‘Netweaver’ enabled users to search for relevant events and connect with target clients/outsource partners.

High fidelity prototype: I created a working prototype in Axure. It can be viewed online: http://crystalhinam.co.uk/netweaver/iphone.html

And on an iPhone (preferably iPhone 4/4S): http://crystalhinam.co.uk/netweaver/netweaver.html In order to view the prototype in it’s best form, save the website location to your iPhone home screen, then reopen the page.

High fidelity prototype designed and created using ‘Adobe Illustrator’ and ‘Axure':

(Apologies there are no ‘click’ visuals due to the demonstration being shown on a mobile devise.)

Low fidelity prototype: I created low fidelity visuals using Balsamiq, then imported the visuals in to POP (Prototype on Paper) in order to test functionality, the low fidelity prototype can be viewed here: http://crystalhinam.co.uk/uxd-content/pop-prototype/

Low fidelity prototype designed and created using ‘Balsamiq’ and ‘POP – Prototyping On Paper':

(Apologies there are no ‘click’ visuals due to the demonstration being shown on a mobile devise.)

Introduction and Background

Business networking is a socioeconomic business activity by which groups of like-minded businesspeople recognise, create, or act upon business opportunities. (Wikipedia, 2001).

Business Networking is a global activity, it has steadily been gaining in popularity since the 1980s (Upland, CA. 2007), as of December 31, 2006, BNI had generated 4.9 million business referrals, totaling 1.9 billion (U.S. Dollars) worth of business for its members. BNI is the world’s largest business networking organization, with more than 4,600 chapters in 36 countries worldwide.

These statistics are impressive, but business networking is also a real world problem, many people attend business networking groups taking time and money out of their working day and leave without gaining any valuable contacts, referrals or prospect of making the cost back.

Qualitative and quantitative research

introQualitative and quantitative data was gathered in order to gain insight in to the reason business networking isn’t successful for many people:

  • Networking meetings were attended in order to speak to target users on a one-to-one basis to discuss their successes and failures with the activity.
  • An online survey with both closed multiple choice questions and open questions was sent to various networking groups and circulated via email and social media to businesspeople who network regularly.

Most interesting and useful survey results revealed:

  • 41% of people find out about networking events via word of mouth, only 2% use a mobile application.
  • The highest percentage of networkers find they don’t meet the right people for their business needs, they meet the same people everytime and don’t get value for money out of the experience.



Using research collected I developed 3 personas as my target users:

Persona 1



Persona 2


Persona 3


Site Maps

I designed a basic sitemap based on my user needs:



Next I developed an iteration of the basic sitemap which includes the content source for each step in the user journey:


 User Journeys

Visuals showcasing touchpoints throughout ‘persona 1’s’ journey with and without the Netweaver app:




 Using ‘Netweaver’

An optimal path for showcasing the app is demonstrated here:


Descriptions of each screen: