EmotiBit.com
EmotiBit.com is an outreaching website for a wearable biometric sensor, EmotiBit, an open-source wearable biometric sensor, developed by Connected Future Labs. The website is now live with over 1000 subscribers and the EmotiBit successfully reached 750% of its fundraising goal.
Websites: emotibit.com, Kickstarter page
Roles: Lead UI/UX and Visual Design
Tools: Adobe Ae/Ai/Ps, Sketch, HTML/CSS, WordPress
Timeline: 1.5 Months
Press readings:
- Yahoo News
- TechAcute
- Hackaday
JUN.2019-OCT.2019
Overview
EmotiBit is the main platform and network for outreaching its stakeholders, i.e., donors, customers, and fundraisers of the EmotiBit, etc. It was also built to prepare for the launch EmotiBit on Kickstarter and help EmotiBit to reach its fundraising goal.
Why does it matter?
Most wearable tracking devices in the market offer only processed data, and the data provided are neither scientifically approved nor 100% user-owned. Often the time, the data are also hardly accessible to us. So the important questions are:
How do we still not own our own health data? Why are they so hard to get access even by ourselves? How do we know if the data are scientifically approved?
Research & Data
The purpose of this research is to define market positioning for EmotiBit by asking questions such as “What category does EmotiBit belong in?” “What’s the biggest value EmotiBit provides?” “Can we prove that values to the target audience?”
01. Value Proposition
We sent EmotiBit to 48 alpha users, including students, DIYers, researchers, educators, or anyone who was voluntary to have a look and asked them to describe EmotiBit. We were able to summarize the most beneficial features and values that people think of EmotiBit.
02. Competitor Analysis
We ran a competitor analysis to understand better what resources and products are currently available and how their resources are presented on the website. So, we can further narrow down the strengths of EmotiBit and what functions are necessary to the Beta phase development.
03. Defining Target Users
Combing the vision of the founder of the EmotiBit and the researching results. I summarized four main groups of target users: Researcher, Educator, Artist, DIY-ers.
Scope & Challenges
Building a mature and successful brand from the ground up could take years of effort. Due to my limited time with the project, the scope was to help EmotiBit set an adaptive brand visual system and an information website that is flexible and effectively communicates to the target users, which can work as a solid foundation continuously buildable in the future.
Content Structure
Criteria to decide the content structure: Stay curious; Increasing Clarity; Maintain Connection.
01. Distribute Content into “Cards”
I listed out 10 fundamental categories that are essential for understanding the full picture of EmotiBit, and I distributed them into cards, which we can shuffle around to see if the content flow works or not.
02. Information Hierarchy
I further categorized the cards into 3 hierarchies: Main purpose, Primary Content, Nice-to-have, which made the website's content structure clear.
02. One-Page Website with A Stackable Structure
By implementing the “cards” stacking structure, we can flexibly shuffle the content (i.e., add, remove, or hide content) without affecting the overall layout/narrative and browsing experience.
The benefits:
Simple interaction
Less interruption & distraction
A more controllable browsing experience
Full story at a glances
The challenges:
How to make sure the unified content is appealing to a diverse target audience group
Figure out a way to plug in the third-party tools without feeling off-brand.
Early Exploration
I sketched out some low-fidelity prototypes. The main purpose of this exercise was to have an initial idea of the page's overall layout and test out what works or not.
Revisit the Structure
Based on the feedback gained from scientists at NYU Neuroscience Lab and art students at Parsons School of Design, in a total of 36 people. As the most knowledgeable audience of EmotiBit, they can testify to the integrity of the information on the website and provide more detailed and concrete feedback on the contents. In contrast, art students represent the audience who does not have tech and science backgrounds.
Visual
01. Color Palette
02. Typography
03. Icons
Interactions
01. Inner-page Navigation
Straightforward navigation
Reducing distraction from the main content
02. Separators
Smart use of separators to enhance impression
Breathing between dense content
Repetition of key messages and information
03. Carousel/Slideshows
Read blogs without opening a new page
Full story at a glance
Speed reading on blog topics and summaries
Supportive information
04. Call to actions
The sign-up form stays on the page top to remind the viewer but doesn't scream for attention.
In the end, another contact form appears to suggest potential next steps (back to the main purpose).
Launched Website
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 Kickstarter.
The website is now live with a growing 1000 subscribers and receiving around 100 visits daily.
Check the live site at: www.emotibit.com
Responsiveness
To work around the limitation of WordPress and to create a Fluid Grid system for the website, I used a Plug-in called Elementor. This plug-in allows me to easily create content with a responsive grid system, and I can adjust CSS (media queries) to define each breakpoint range. Now, the website can be running on any size of browsers including Chrome, Safari, Firefox, tablets, and Mobile Device.
Other Designs for the Brand
01. Software Interface
I was challenged to re-design the interface and make the complex interface more readable but with changes of only colors, fonts, and font sizes, due to technical limitation and budget and time constraints.
Before
After
