Process

Develop & Design Process

Prototypes

Hand-drawn wireframing

After doing some informal street interview and survey in campus, we found that the main reason college students enjoy exchange things on Facebook: (1) Save money and (2) Exchange at campus save time. The latter reason indicates the preference is strongly related to "location."

Therefore, we decided to use Google Map as our website's main body, we put more effort into using Google Map API and improving the design of location pinning.

Figure 1: Pin feature prototype

Take Figure 1 as an example, I tried to change the pin color according to its time while prototyping. If this exchange is time-limited, such as the owner will leave that location later, then the pin of this exchange would be red, symbolizing time-sensitive.

Our main feature is post/seek feature, which means users can post the objects/skills they want to exchange, also they can search to seek for an object/skill be posted. (Figure 2(a))

For another purpose to facilitate social interaction, we created profile function for listing the history of what they exchanged, followers and seekers. (Figure 2(b))

‍

Figure 2: (a) Posting interface sketch; (b) Profile interface mockup

‍

‍

‍

‍

‍

Our main feature is post/seek feature, which means users can post the objects/skills they want to exchange, also they can search to seek for an object/skill be posted. (Figure 2(a))

For another purpose to facilitate social interaction, we created profile function for listing the history of what they exchanged, followers and seekers. (Figure 2(b))

In addition, we also developed another function in the very last stage before release: the message features. We faced some technical issues to make the private message operating in real time, and we failed. Eventually, we still keep the "non-real time" mail features, but add an external link to Facebook to make student can contact each others via Facebook Messenger.

‍

‍

‍

‍

During the developing project, we spent some time to address how to embed Google API, and with my teammates technical support, they try to read some fake datasets to test how the algorithm and make sure it can recommend the objects with best distance and categories fit.

‍

Takeaway

Honestly, I know there is still way more space to improve. But as my first project and the reason I meet UI/UX, I learned a lot from this project and my teammates.

UI/Visual Design

  • Color Change can catch users eye and highlight the emergency efficiently
  • Don't use too many high-saturation color, this may confuse users and make them lose directions
  • Use drop shadow properly can increase the layers of the website

UX Design / Research

  • While designing survey questionnaire, it is better to provide options to narrow down the question and easier to find the insight we want.
  • Trying to go deep when conducting user interview. Avoid asking facial question or interrupt users when they willing to share related experience and thoughts.
  • The mouse hover on the website is also a factor to consider, since we designed two-column interface, and it is important to guide user where they are and what they can do now.
  • Wanted objects (Wishlist) should also be collected into a page.
  • Clickable button should provide animation or effect to let user click.
  • While communicating with developers, it is important to think from each perspectives. Developers focus on making algorithm better, and this may sometimes sacrifice the user experience.
  • Try to learn some technical skills and understand technical language can better improve the gap between designers and developers.