EmotiBit.com



Roles: Front-end, UI/UX, Full-stack, Visual & Brand Identity, Market Research
Development Tools: HTML/CSS, Wordpress, AdobeXD, After Effects, Illustrator, Photoshop
Timeline: 1.5 Months | Jun-Jul, 2019

Deliverables: Information Website



Design an information & outreach website for a wearable bio-sensor module, EmotiBit, developed by Connected Future Labs to help EmotiBit reach its stakeholders before its launching on the Kickstarter. The website is now live with growing over 200 subscribers and receiving 40-60 visits on the daily basis.






Check the live site at: http://emotibit.com 







1. Design Goals
  • Fast, low-cost, yet effective
  • Be informative
  • Easy to navigate
  • Build empathy 
  • Unleash users’ imagination & desire
2. Business Goals
  • Outreach
  • Introduce EmotiBit using right information 
  • Maintain connection
  • Maintain search traffics
3. Challenges

  • Individual project
  • Balance content among niche & broad types of audience
  • Complex & multi-functional product
  • Avoid boredom & frustration
  • No previous assets & documentation






Overview



Connected Future Labs (CFL) used this website as an informative PR page and a base to introduce EmotiBit to their clients, donors, and potential customers before they launch this product on the kickstarter campaign. I did this project when I worked as a Design Intern at CFL. I designed and developed the entire site (using Wordpress) including all visual assets and imagery with advice and technical support recieved from the founder of CFL.





*Part documentation process might be omitted for confidential purposes







Ideation


Having considering the requests from the founder that the website should be easily navigate, progressively informative, and after discussion, the founder and I decided to make an one-page scroll PR website.

The benefits are:  


  • Single interaction: keep scrolling

  • More controllable browsing experience

  • Browsing without interruption and distraction e.g., jumping to other pages.

  • Full story at a glances







Contact Structure



So, based on the research and user behavior analysis, I made this content hierarchy chart to differentiate the level of the importance of the information. The factors of importance are: Stay curious; Increase Clearity; Maintain Connection.













Competitive Analysis & Moodboard














Wireframe & Interviews


So, based on the information architecture, I sketched out some first-version low-fidelity prototypes. The main purpose of this exercise is to decide the basic information flow on the final webpage and have an initial idea of the overall layout of the page. After conducting interviews with scientists at NYU Neuroscience Lab, I made below chart to summarize their feedback to the website.






                   * We added operational guide and project demo page later in the process.










Visual Identity & Assets Creation



Keywords:  unlocked, revealing, empowered, eye-opening, informative, freedom, plug & play




1. Color Guide

2. Typography 


3. Iconography & Infographics



So, based on the features of EmotiBit, I created these icons to visualize the ideas.


    
Flexible Connection

Open-source

Raw Data 

Plug & Play

User-owned
Wearable (anywhere on the body)



I drew illustrations to demonstrate the 3 easy steps of using EmotiBit.









4. Assets Creation



These are some examples of product pictures & videos that I took for the website.


* All image rights reserved by Connected Future Labs











Interactions




01. Inner-page Jumps/Navigation

- Simple and convenient navgation

- Avoiding viewers from jumping to other pages then getting distracted away from the main page 

    






02. Sticky “Sign-up Form” & Navigation Bar

- Sign up at any time, no need to finish the reading

- Let viewers have the option skipping to the most important sections based on their preferences






03. Blog Post Carousel

- Read blogs without opening a new page.

- Full story at a glance

- Speed reading on blog topics and summaries






04. “Hint” Separators between sections

- Re-emphasize strengths and key sentences

- Use separators as a “hint”

- Give audience an idea of how they can achieve with EmotiBit







Responsiveness & Fluid Grid

To work around with the limitation and to create a Fluid Grid system for the wbesite, I used a Wordpress Plug-in, called Elementor. This plug-ins allows me to easily create content using a responsive grid system, and also I can manipulate the CSS (media queries) to define each breakpoint range. Now, the website can be running on any sizes of browsers including Chrome, Safari, Firefox, tablets, and Mobile Device.







Launch Version





Mark
YUJIE, Parsons School of Design. New York, NY.
All rights reserved by Yujie Jiang