Sparkl

2013.8 - Present 

Sparkl creates a real-time online space for small-sized teams to brainstorm together from anywhere in the world. It enables teams to explore, discuss, organize, share, and build on each other’s ideas. In the end of a brainstorming session, Sparkl uncovers the insights of everyone’s behavior with an interactive summary.

Official website: www.sparkl.us

 

Sparkl_Dark grey.jpg

The Vision  

Nowadays, innovative ideas and creative solutions are in huge demand in all industries. Millions of dollars have been invested in the process of pursuing innovation, such as building creativity center, hiring design consultant, and getting professional training. People need different perspectives and fresh ideas to add creative energy into their works to become more competitive. In fact, innovation is not about creating something completely new, but more about how to solve the same problem with a new approach, which is more interesting, efficient, and effective. So how can we find the new approach? The inspirations of the new approach come from the observation of daily life, the understandings from different industries, and especially the mindsets that are open to all kinds of possibilities. We try to foster that mindset, and we aim to empower creative thinking for both individuals and teams. 

Sparkl is a real-time web/mobile application that dedicates to help users collect inspirations, develop ideas with structured brainstorming sessions, and foster effective team communication and collaboration by leveraging every team member’s wisdom and experiences. Sparkl is designed with learning elements that can help users potentially develop their creativity by learning different thinking styles, such as divergent thinking, convergent thinking and reframing the problem. Meanwhile, Sparkl can facilitate teams who are collaborating across distance to achieve better brainstorming results. Sparkl is an effective tool for innovative thinkers.

 

Current Features 

Brainstorm anywhere, together

Brainstorm on Sparkl with anyone from anywhere. Just start an ideation session with a simple click. No more fear of collaborating across distance. No more limit of whiteboard. Enjoy the freedom of body and mind.

 

 

 

 

Get ideas flow

Create friendly and safe space for everyone's voice. No more dominant voice. Like, build on, and comment on each other's idea to spark group wisdom. Create interactive collaboration experience, and get ideas flow.

 

 

 

Idea kaleidoscope

Curated ideation techniques help you get "unstuck." Sharpen your mind to get ready for future challenge. Learn, practice, and apply creative approaches in your life. Enjoy the beauty of thinking out of the box.

 

Blub.png
Interaction.png
Button_Small.png

Design principle 

 

  • User-centered - user researches + literature review  
  • Simple and intuitive - make sense + match user's behaviors 
  • Creative and innovative - challenge new topics + solve real problems  

 

Design Process 

All-01.png

Needfinding - Observation + Questions + Conversations 

My observation started at the d.school. We conducted lots of brainstorming sessions for class projects here. Whiteboard, post-its, and sharpies are our tools. However, while gaining more experience, I realized that this kind of brainstorming may not be perfect as I imagined at the beginning, for example, dominant voice in a brainstorming session may shut down other people's ideas.

I started to observe all my d.school classes, design workshop at Google, and formal or informal brainstorming sessions in different formats. I also interviewed many people to ask about their feelings - I want to hear people's voices. Here are some of them: 

 

IDEATION IS TEAMWORK

"I want to feel the teamwork in ideation! I wish we can encourage each other more and have more interactive actions. We should be more process-oriented instead of result-oriented. Spending time on the process is very helpful."

 

Huimin.png
Jason.png

IT'S A SAFE ZONE

"No worry about implementation! There is the rule that you have to be open. Here comes the freedom, and the feeling of not being limited, not being embarrassed. It's a step to the safe zone."

"Post-it is useful to get the idea there, but it's distracting from thinking. I don't want to write down everything that I am thinking through. It’s not organized, and it’s hard to categorize."

GET EVERYONE'S VOICE

"Dominant people like to talk a lot, and sometimes cut others off. It will influence the whole team dynamics. If the brainstorming session is too intense, it’s impossible for everyone to express ideas." 

"Also, you need time to think through the problem by yourself. Sometimes listening to others' discussion during the ideation session is distracting, because you can't concentrate on each side." 

Jingshu.png
M.png

 

IDEATIONS CAN BRING PEOPLE CLOSER

"Interactions and communications help encourage friendship. For example, you can see people's perspective and ideas; you can also find more about other people's interests and passions. So you can see what people value in their lives. You start to appreciate other people's wisdom."

Iteration - Ideas + Conversation + Research 

After collecting lots of data, I started to analyze and categorize it. I identified the pros and cons about in-person brainstorming. I also identified the pain point that many people suffered. I put all the ideas, problems, and potential design ideas together to try to figure out this design challenge.

To understand the problem better, I talked with Stanford professors, brainstorming experts, d.school students, people who have no idea about brainstorming, people who do virtual brainstorming, and industry people. Since I wanted to have a deeper understanding about the topic, I also went to Stanford library and checked out many theoretical books about brainstorming/ideation/creativity. I spent time by myself and with my teammate thinking through the problem, and there are some of my sketches:

Screen Shot 2013-10-04 at 8.21.36 PM.png
Screen Shot 2013-10-03 at 11.14.53 PM.png
5.25 .JPG
Screen Shot 2013-10-03 at 11.15.47 PM.png
 "One thread" vs. "Multiple thread" discussion

 "One thread" vs. "Multiple thread" discussion

Meanwhile, I researched about the existing products out in the market, analyzed every single product's core function, and distinguished them from what I want to do. I learned a lot by just doing the comparison study: what problems they are tackling? In what kind of situation do users want to use their products? Why are they different from others? I questioned myself a lot when I was thinking through other products.

Market research

Market research

Design - Prototype + Test

I decided to make a single page web application. I started to list all the functions that I want to incorporate in the design, and I also sketched out some User Interface, very low-res. I made paper prototype, and low-res digital version to first test out on myself. I paid special attention to the FLOW, if I couldn't feel the working flow while using my prototype, there must be something can be further improved. I also carefully analyzed each part to figure out if that makes sense to users. Besides myself, I also showed the prototype to other people, and asked them to try out. Without showing them how to use it, I just observed and took notes of their interaction with the prototype. The prototype changed so differently every time, which actually was a good thing to me. =) I didn't stop reading research papers about brainstorming, nor stopped collecting information from real situations.  Here are some User Interface design drafts: 

3.png
Screen Shot 2013-10-03 at 11.10.44 PM.png
Screen Shot 2013-10-03 at 11.10.54 PM.png
Screen Shot 2013-10-03 at 11.11.29 PM.png
777.png
22222.png
33333.png
666.png
555.png
6.23-Default-Full Screen.png
6.23-Default-Morning-Clipper.png
Sparkl-01.png
44~L{H}43AXH[GMIN~UZNUA.jpg
+Button.jpg

Each iteration of UI design is based on user testing and the design principle of simplicity. The last one is not the latest update, because www.sparkl.us will be online soon! Right now I am working hard to construct a complete flow from the very beginning to the end of a brainstorming session. More features will be added into this web application, for example, kaleidoscope function will be smarter with artificial intelligence. 

My goal is to help people think freely and be more creative. Meanwhile, as a designer, I hope Sparkl can bring users a sense of flow and delight. 

Result

2013 LDT Expo

I presented Sparkl at my program's Expo on 8.2.2013. Local elementary teacher told me that Sparkl could be used for classroom discussion; Coursera people told me that Sparkl might be used in their online forum; startup people told me that Sparkl could be great for their team remote collaboration. The results are promising. 

Many people told me that they love the UI - it's very simple, very interactive, and very engaging

For example, I designed some small details to make the page feel "live" : avatar can jump, each post can wiggle, etc.  

Special design details 

Special design details 

I explained Sparkl to people.

Some people contacted me after the Expo to ask for demos! I was very happy about the feedback. Meanwhile, I clearly understand that there is still a long way to go to make the product much better. If you would like to try out the beta version, you can leave your email at www.sparkl.us. 

Others

KALEIDOSCOPE ICON DESIGN

Sketch version

Sketch version

Illustration version 

Illustration version 

LOGO DESIGN

The key inspiration is from FedEx logo, the visual trick - the invisible arrow. Meanwhile, I want the logo to be super intuitive that users can form connection with the name "Sparkl" immediately. 

fedex.jpg
Logo inspiration draft 

Logo inspiration draft 

Sparkl_logo_1-01.png
Sparkl_logo_2-01.png
Sparkl_logo_4-01.png
sparkl_logo_3-01.png
Logo+Title.fw.png

LEARNING CARD DESIGN