Coffee Exchange
about

Coffee Exchange is a startup that allows coffee producers and cooperatives to skip all intermediaries and transact directly with coffee roasters through innovative technology.

my role

As the UXUI Intern and the main visual designer in the team, I am in charge of redesigning the company’s WeChat MiniProgram application, US landing page and producer platform (the company’s website used to be designed via templates and Wordpress). I'm currently in charge leading the website implementation by directly communicating with developers to make the US landing page multi-device ready and on-page SEO optimized. Designing US mobile app and roaster platform. 

Process

CEx's vision: To showcase transparency - roasters/store owners get to see who they are buying from and establish a relationship with the farmers. 

 

The main problem: The original website elaborated on what the company does, but doesn't give detailed information after the surface explanation of "what do we do?"

Regarding WeChat MiniPrograms: I was asked to also design a platform in China's WeChat MiniProgram. So along with the US Website, I was able to survey and interview current customers for feedback on what they wish to see changed in their original app. 

Feedback: Better filters, search options, and an easier way to navigate through products. 

Some proposals based on feedback and research:

  1. Holding a finger onto a product during list/grid view can open up a pop up of more information/image, depending on what type of view users are using. Releasing the finger will cause the popup to shrink & disappear. 

  2. When opening the app for the first time, maybe include a brief introduction to who Coffee Exchange is (1-2 welcome screens are enough), and goals/why it’s different from other competitors? This creates a reliable and transparent first impression. 

  3. Support image zooming on products being sold, if possible. 

  4. Descriptive, well label-ed forms at checkout. Helps complete transactions easily. Using "steppers" (e.g. + - buttons) instead of drop downs. Makes the screen easier to interact with on mobile. 

  5. Use microinteractions: details in a product's UI to accomplish one task, e.g. starring/saving a product by tapping and untapping one button, swiping down to refresh, etc.  

  6. Talk about how long it will take for the product to be shipped and arrived. Explain the process. This can be explained at the bottom of a product description.  

some of my presented research findings
FInal Designs
PHone - wechat Miniprogram

Developed in Figma, here is the video of the final prototype in motion.

What is was before, if you're interested:

 

Designs, illustrations, and animations © Roseanne Chao