September 5, 2010

I haven’t bought a new phone since my pink Razr v3 in 2007. Even then, it was a free phone from my family’s new contract with AT&T. I currently carry a Nokia E61i that I received from my internship at Nokia in 2008.

The current state of mobile devices

It’s not that I don’t care about the phone I use. In fact, most of my days are spent on Engadget waiting for the one day my dream phone will come out. I almost purchased a Pre, an Evo, an Aria, and an iPhone4… but I didn’t. Every time I am dissatisfied with some element of it:

Android?
Sloppy visual design; boring; slow response due to its nature as an open source OS.
iOS?
Tired; limited; aesthetically wonderful, but old. 
WebOS?
Aesthetically great, but dismal support; old hardware. 

I’ve put my future hopes for mobile UI in Windows Phone 7. It has garnered much anticipation, as well as hatred. “It’s ugly.” “I don’t like the type.” “It wastes so much space on the home screen on the right.” Yes, the visual design and type hierarchy could be better, but they’re trying something new. I think Metro UI has great potential, and the hardware quality is maintained by Microsoft to ensure a fast & responsive experience. Based off of the previews I’ve seen, it looks to be pretty promising.

Tablets are also quickly growing market with large potential, but so far poor execution (yes, even the iPad is just okay).


My senior project: a new device + OS

For the past few months I have been deciding what I want to do in my immediate future. I narrowed it down to two projects this past week, and finally chose to move ahead with the mobile device and OS.

Note I am not using the word ‘phone’. I believe that as technology and interactions become smaller and smaller, phone will soon become just another feature of a mobile device, like a web browser or email reader.

I am firm on remaining in both ID and UX disciplines. I believe we are coming into a time when you cannot separate the two roles. The onslaught of devices with poor integration of hardware and UI is a huge problem. There is often some brand confusion, as well. Device manufacturers and service providers all want to impose their brand onto a product. The end result is usually a horrible, ugly monster of a UI that doesn’t fit the industrial design. (The one exception to this rule is iOS and to some extent, WebOS). Even the upcoming WP7 seems to have fallen into this unfortunate mishap.

The plan

My fall semester ends in December. I will be participating in the iF concept award and will attempt to create a product (line, if possible) that will address people’s mobile needs through a brand, physical hardware, and UI interactions.

  • I will implement my knowledge of user centered research and design to find the most appropriate form and functions.
  • I will create beautiful products with my experience in aesthetics and designing consumer electronics.
  • I will utilize the principles I have learned in the HCII to design intuitive and clear interactions.
  • I will create a cohesive, compelling brand that expresses my philosphy on mobile design.

Preliminary schedule

To focus my efforts, I need to define my project through several means:

Brand philosophy: What does it feel like to use this device? What words and images can express that? I need to name this project.

Market + User research: What is out there, both realized and conceptual? Design for the user, not for myself. Find volunteers to record mobile habits.

Product specification: What components are needed to create this mobile experience, both physical and digital?

Social outreach: As this is for the Design Out Loud studio, I need to define methods to reach out to the community and engage them in the design process.

September 12, 2010

This fall, I am going to design a new mobile device and its OS/user interface. In order to design a kickass mobile device, I need some volunteers to be research subjects.

What is a mobile device? Anything from a cellphone (dumb or smart) to a PMP (iPod touch) to a tablet (iPad).

The research is relatively simple: An activity log of your interaction with your mobile device over 24 hours.

\

1. Notify me via text that you are willing to participate in this experiment ((949) 436-9874). Please include age, gender, and type of device(s) you are using.

2. For the next 24 hours, every time you interact/use/physically touch your mobile device, text me (or write down) the following:
a. ACTIVITY: What you are doing with the device (as many tasks as you want: email, alarm went off, phone call, texting, games during class, etc).
b. CONTEXT: Where you are/what you’re doing (in class, walking to work, at a party, bathroom, etc).
c. (If writing down) the time. 

3. (If you chose to write) Please type up and email me (or hand deliver) your activity log. 

Please use this template if you are documenting yourself: https://spreadsheets.google.com/ccc?key=0Am_MwW-zQt4LdHE4TG9fVkh2MHpHU0ZmVlJmcEMzS2c&hl=en

I need around 20 participants, so please volunteer! I know asking you to text every single tiny interaction (like setting an alarm, or ignoring a call) is a pain, but please bear with it, as the small things are the things that matter the most!

Questions? Email me via julius(at)tarng.com.

September 15, 2010

September 19, 2010

So far I’ve received almost 10 people’s mobile usage records. After analyzing the data, I’ve found a few interesting tidbits that provoked some thought. I’ll cover those in a future presentation on my research findings.

In other venues, I am starting conversations on Yahoo! AnswersFacebook and Core77 about people’s relationships with their devices. I plan on participating in the conversations to engage people in my research. Got something to say about your mobile devices or devices in general? Head over to any of those links and put in your two cents! 

Developing the logo
Having some problems picking the exact crazy rainbow gradient combination. All the crazy lines spell out ‘Modai’. 

September 20, 2010

Developing the logo

Having some problems picking the exact crazy rainbow gradient combination. All the crazy lines spell out ‘Modai’. 

September 25, 2010

Badasses at Stanford have been developing a paper-thin battery that doesn’t degrade even after 300 charges (that’s better than my Macbook Pro battery!).

I’m still looking into technologies that could expand the form factor of cell phones. Looks really promising and could really give space in a cell phone to other things people care about (cameras, for instance). Let me know if you see anything!

October 3, 2010

More tech that I am looking into. 

October 7, 2010

Framing the project

This week our studio made videos framing each of our projects. This is my introduction to Project Modai. 

This video marks the start of the design phase (although I have been designing since the start of the research phase), and research will continue as new technologies and concepts present themselves to me.

October 10, 2010

Logo development from the past few weeks. Ended up back where I started. Debating the gradient since it really reminds me of the Zune logo.

I bounced around a lot going from classic script logos to more aggressive, angular logos. I finally decided to go with my initial concept of the subway-esque path that has all the letters of Modai within it (see top right). It’s modern and hints at connectedness. 

I just wish it was a little more human. Maybe some textures will fix that. Or serifs.

October 12, 2010

Brainstorming session during class yesterday revealed that the scope of my project was way too broad. I won’t be able to get the depth I need to make a compelling project if I don’t narrow down.

Original list:
This is what I wanted to do before (basically what the problem framing video says)

  • Mobile device industrial design (sustainable, upgradable)
  • UI visual design
  • Navigation within mobile device interface (home screen, etc)
  • Organizer app
  • Camera app (and how that influences the industrial design)
  • Social integration
  • Integration with other devices
  • Humanizing the phone (how does it behave contextually, when you get a call, when you have notifications, when it needs to be charged)
  • Branding (timeless, human, integrated)

It’s difficult to process the fact that I simply won’t have time to do all of these things (well). Some feedback I got from my video also questioned the purpose of the project. Why am I exploring this? What’s the gaping problem in mobile devices? 

At this point I had a few things that I was interested in exploring: Humanizing technology, the organizer, sustainability, and the camera function. Social integration has been done to death and there’s no major problem with the way it exists now (nothing that would need to be in a senior thesis). Branding is inherent, as well as visual design.

===

The new focus

There is no real emotional connection past the functional (necessity of the device) or the aesthetic (the iPhone is beautiful). Mobile devices today have no personality. I want to explore how the digital and physical manifestations of the mobile device can become more human and engaging and create a timeless relationship between the user and device.

  • Industrial design (form factor that suits daily use/different contexts? sustainable, upgradable, customizable? To help facilitate the timeless relationship)
  • UI interactions (make it more human, interactive, breach the wall between digital and physical. how can the system evolve and learn as you use it? how does it act when it needs to be charged? when you have an alarm?)
  • An example of how an application would reach into this human space: organizer. (how can reminders be more physical? how can you nag without being annoying? how do you handle thing without due dates? missed events? how does it replace mom?)

I will explore these 3 things, while addressing bits of functionality here and there in order to inform my design. I’ll be looking at the contexts of use from my research, alluding to other functionality that I won’t be focusing on (docking, kickstand, camera, etc).

===

The brand

I presented the working logo to Core77 and received some informative feedback. The logo at this point is too graphical and implies other things (like a falling stock market graph). It also doesn’t really reflect my goals with this project. It looks more robotic and autonomous rather than human and emotional.

In order to address this, I will be re-looking at the visual design process to approach this from a more “human” perspective. I pulled together the following mood board of the logo and brand. I chose logos that reflected both a vintage timeless feel, as well as a more human script feel. At the same time, one or two of the logos have a touch of modern (bottom right) with the use of color and minimalist form.

===

I will be in Toronto this weekend visiting design firms and meeting up with alumni and some folks from Core. Hopefully I’ll come back refreshed and ready to tackle Modai v2.

Feedforward
Feedforward is one of the most exciting things that I’ve learned in HCI. I plan to utilize it heavily in Modai to express the state of it visually, aurally, and hapticly (not even a word).
This is Vol., a speaker by Carson Leong, whose website makes me want to rip someones head off. #damnunusableflashwebsites. It uses the physical state of the skin vents to express how high the volume is. Nice, but the form isn’t exactly intuitively associated with volume. I guess the more exposed/open the flaps are, the more sound can get through.

October 17, 2010

Feedforward

Feedforward is one of the most exciting things that I’ve learned in HCI. I plan to utilize it heavily in Modai to express the state of it visually, aurally, and hapticly (not even a word).

This is Vol., a speaker by Carson Leong, whose website makes me want to rip someones head off. #damnunusableflashwebsites. It uses the physical state of the skin vents to express how high the volume is. Nice, but the form isn’t exactly intuitively associated with volume. I guess the more exposed/open the flaps are, the more sound can get through.

October 19, 2010

As I said previously, Project Modai now has a new, narrower focus. It is an exploration of the connection between a user and his device (or making mobile devices more human). I will do so via exploring status (anthropomorphism, feedforward/back, alerts, notifications), a growing/learning UI, and a sustainable/upgradable/customizable device. I may also explore the element of fun (thanks to this article by Method exploring what video games teach us about motivating people).

In this post I will go through my persona and the processes I used to find the UI paradigm mentioned in the title. 

Persona

A persona is useful for me to keep in mind the aspirations, personality, and habits of my target user while I’m designing. I chose more of an extreme user, so that my designs will be able to accomodate a wide range of people.


Hunter Lee
18 year old
Incoming college freshman - Architecture

Aspires to be a world famous architect
Living on own, wants to be in control of managing finances, work, social
Lots of student loans (not trying to spend money buying a new phone every year) 

Socially active, pursuing girl (constant social media)
Lots of group work, activities, meetings 


Brainstorming

I started with a mindmap. This mindmap was a free-for-all of ideas and connections. As I drew out bubbles and connected them to each other, I realized that everything goes back to the aspect of humanizing. 

I was also able to drill down into specific categories:

1. Humanizing the expression of status.

Humanizing status expressions requires an in-depth look at feedforward and feedback. There are two categories:

Active
Notifications (alarms, organizer reminders, to-do)
Calls, texts 
Lockdown mode (more on this later) 

Passive
Battery low
Task list/time (how well you’re managing) 
Volume
Signals (WiFi, data) 

2. Learning and growing device

Learning your habits
What you use throughout the day/in different locations/what is important (changing the homescreen UI to show what you really need)

Are you always late to meetings? Modai will remind you earlier next time (geolocation tracking if you’re at your meeting spot)

Awesome idea: Switching paradigms
As I was thinking about learning and growing, I came up with an idea of switching paradigms. A student needs to balance his social and work life. The UI is split into two facades, and relevant items would only appear on the respective one.

Paradigms

I really liked the concept of switching paradigms, so I had brainstorm of what each facade would have.

Fun facade

The fun facade holds all the information and applications that Hunter needs when he’s in his social mode. Common items would be:

Social media
Texts and calls from known friends
Social photos (to FB, Twitter)
Entertainment (blogs/rss, music, movies, games)
Organizer (social tasks) 

Professional facade

This facade holds information relevant to Hunter’s work, such as:

Organizer (see urgent/upcoming, quick add)
Time management (if you’re currently doing a task, how much time you have)
Document work (photograph, voice record, notes)
Communication (work related phone calls, emails, group members) 
Share (projecting presentations) 

Both

Time
Weather
Status information (battery, signals) 

Interaction between the two

This is where things get fun. I’m not entirely sure how you would switch between the two paradigms (flipping the phone, a switch, context-aware), but I thought of this neat concept:

In a normal Fun view, you don’t see any of the Professional facade. However, if you have a to-do that’s due soon, the Professional UI would start to creep into the Fun view, hinting at you to shift your paradigm to the Professional. 

What’s next

I really want to know how people would like their Fun and Professional views organized. I will be conducting some velcro modeling with some classmates to get some different opinions. I will also be brainstorming ways you can switch between the two views.

One thing that I didn’t really think much about this time was the sustainable ID. I had a small idea where the physical buttons (vol, lock) would be movable to accomodate right and left handed users, and adds a level of personalization.

Paradigm make tool
Today, I used this make tool in a brainstorming session with some other design students to generate ideas of what each paradigm (fun and professional) would contain, as well as the interactions within. A lot of good ideas surfaced, and over the next day I’ll be compiling the ideas we generated into a blog post. 
Insights
Context-aware switch (geolocation and time) with a manual option for the other occasionsMetaphor gestures. We thought of a Clark Kent -> Superman shift of taking off your work clothes to go into your fun mode:
Frame widgets. Current iOS home screens are just full of app icons. Android widgets give much more information, but are pretty static. Remember iframes? Those, but on mobile home screens that let you scroll through your emails or updates without losing sight of your other frames. Example:Relevant surfacing. Based on your widgets/frame content/what’s new, relevant apps would surface to the top. In the above case, your to-do list frame surfaces the apps that Modai thinks you need to complete the tasks.
Next time
There were a whole lot more, but that’s for next time. I’ll have a few wireframes (done in keynote, animated) to show.
I’ve also decided to use less wordy posts, with more visuals. It’ll take more work, but I think will be awesome. Look forward to it!

October 21, 2010

Paradigm make tool

Today, I used this make tool in a brainstorming session with some other design students to generate ideas of what each paradigm (fun and professional) would contain, as well as the interactions within. A lot of good ideas surfaced, and over the next day I’ll be compiling the ideas we generated into a blog post. 

Insights

Context-aware switch (geolocation and time) with a manual option for the other occasions
Metaphor gestures. We thought of a Clark Kent -> Superman shift of taking off your work clothes to go into your fun mode:

Frame widgets. Current iOS home screens are just full of app icons. Android widgets give much more information, but are pretty static. Remember iframes? Those, but on mobile home screens that let you scroll through your emails or updates without losing sight of your other frames. Example:

Relevant surfacing. Based on your widgets/frame content/what’s new, relevant apps would surface to the top. In the above case, your to-do list frame surfaces the apps that Modai thinks you need to complete the tasks.

Next time

There were a whole lot more, but that’s for next time. I’ll have a few wireframes (done in keynote, animated) to show.

I’ve also decided to use less wordy posts, with more visuals. It’ll take more work, but I think will be awesome. Look forward to it!

October 24, 2010

I’ve been having a hard time wireframing the UI because a mobile device UI has so many potential uses that it’s mind boggling to wireframe all its potential uses on my own.

Then I remembered that the whole point of Modai is to explore the future of mobile devices through a scenario based on the user Hunter Lee (read more about him here). Here is a rough outline of the scenario, titled A Day with Modai:

A Day with Modai

8:10 AM: Hunter’s alarm goes off. Modai tries to get him up with a different alarm than yesterday (to prevent him getting used to it). Hunter shakes Modai to snooze.

8:15 AM: Modai tries again to wake Hunter, this time with a louder, and more upbeat song. It also decides to throw in some vibration. Hunter shakes Modai harder to snooze.

8:20 AM: Modai has finally had it. It pulls out the big guns, and turns the volume and vibration to 11, and also turns on Hunter’s laptop and speakers. Hunter finally groggily wakes up and starts to interact with Modai to show it he’s awake (no turning off and falling back asleep here!)

8:21 AM: Hunter checks his email first, hopeful to see if his classes were canceled (although it never is). He switches Modai to Professional paradigm [Prodai] to see his work-related mails and updates. He quickly scrolls through the headlines/previews in the Mail frame, and to his dismay, there are no emails about class. He checks the weather so he knows what to wear. It’s sunny. He goes to get ready for class.

8:29 AM: Hunter is running late for class. While standing at the bus station, he pulls out Modai to check the time (without pressing anything). He unlocks the phone. Modai knows he’s at the bus stop via geolocation, so Modai Googles the bus schedule. It’s coming in 3 minutes. Hunter takes a seat and checks his Fun paradigm [Fundai] He then updates/tweets a status that he’s waiting for the bus.

8:36 AM: Hunter gets into morning studio. The professor is walking around. He places Modai on the desk. Modai knows his schedule and that he’s in class right now, it silences itself and turns off 3G and Wifi to save battery (metaphor: old antennas).

9:10 AM: The professor introduces a new group project. Hunter meets with his new group, and asks Modai to start a new project in the organizer. He enters in the group members and deadlines.

10:20 AM: Group meeting time. Hunter saw some architecture that was inspiring during the weekend that he took pictures of. He takes Modai and bumps it with his groupmate’s mobiles (also Modai?) to sync his photos. 

11:15 AM: The group sets up an out of class meeting time. Hunter pulls out Modai and adds a new meeting in his organizer and syncs with his groupmates. They also assign tasks, so Hunter also enters a new task to do by tonight.

11:34 AM: Hunter is hungry. Modai’s learnt that he usually gets hungry on Thursdays around this time, so it surfaces the school’s dining Twitter when he pulls out his phone so he knows what’s on the menu. (or a menu app?) 

11:47 AM: Hunter got his food and is eating in the cafeteria. He is by himself so he pulls out Modai and sets it up to read some RSS. He is happy and enjoying solitude.

11:49 AM: Hunter’s friends find him and join him to eat. Modai senses the other people and goes into its shy mode to not intrude on human interaction. (or maybe his friends come and Hunter wants to continue his solitude so Modai ambiently shows his desire to be alone)

12:52 PM: Hunter goes to studio and procrastinates by checking Facebook on his phone.

1:00 PM: Hunter has homework due at 1:30PM, and it’s still on his to-do list. Modai notices this and starts to warn Hunter (who’s still on [Fundai]) of the impending deadline. He immediately starts to work.

1:15 PM: Modai’s warning gets more intense. 

1:25 PM: Hunter finally finishes and turns in the homework. He proceeds to mark the task as done, feeling great. Modai congratulates Hunter on a job well done.

1:27 PM: Hunter decides to start working on his group project. He checks the to-do list to see what he needs to do. He needs to so some sketches based off of his group’s research. Modai surfaces the email (or Gdoc) that has the group research. He starts working.

1:41 PM: Hunter gets a text from this girl he likes, Haley, while he’s working. Modai signals this physically without turning on the UI. Hunter notices and checks the text and responds to it. He wants to show his studio space so he takes a picture and sends it off.

2:11 PM: Modai’s running low on batteries. It signals Hunter that it needs juice. Hunter plugs him in.

2:10 PM: Modai alerts Hunter that he has a meeting at 2:30 PM. It’s learnt that Hunter takes 10 minutes to pack up at studio, so it warns him 20 minutes in advance for the 10 minute trip to the meeting.

2:31 PM: Hunter arrives at the meeting, Modai surfaces notes to take notes.

2:36 PM: Hunter receives a call during the meeting. Modai signals quietly that Hunter should pick up his phone, but it is not an urgent call. Hunter ignores the call.

4:30 PM: Hunter walks to the bus stop. He puts on his favorite music while he looks through Twitter.

4:50 PM: Hunter arrives at home. Modai turns on his lights. He goes to his fridge and uses Modai to check if anything needs to be replenished. Modai notices he’s low on eggs. He adds eggs to his shopping list.

5:10 PM: The mailman comes. It’s Hunter’s new hardware for Modai! Installs it, and mails the old parts back.

6:20 PM: Hunter gets an email from his groupmate. Since Modai knows Hunter is in a group, it notifies about the email even though it doesn’t with others. Hunter checks the email which asks Hunter to send them his sketches. Hunter photographs them as a part of the project, and Modai automagically sends them off.

8:10 PM: Hunter goes grocery shopping. Modai detects he’s in a store and shows his financial info. He’s close to his monthly limit. Hunter pays for the eggs he needs to buy with Modai.

8:30 PM: Hunter gets back and starts working. He knows it’ll be a long night, so he wants to manage his time better, so he asks Modai [Prodai] to manage what he’s spending his time on.

10:00 PM: Hunter’s been working for a while. Modai suggests a break. 

1:30 AM: Hunter wraps up his work for the night. He reviews his time usage while working today. He sees that he’s spent at least 25% of his time tonight on Facebook and Twitter. Now he’s aware of this and vows to cut down.

1:45AM: Modai hints at Hunter to turn in for the night. If Hunter sleeps in 5 minutes he’ll be refreshed when he wakes at 7:50AM (sleeping cycles) for his 8:30 class (Modai increases the estimated time he’ll take to get to class based on earlier today). Modai knows Hunter won’t wake up if he stays up later. Hunter accepts the alarm set by Modai, and goes to sleep. 

What’s next?

I will take this outline and start to storyboard it, deciding what screens of the UI need to be shown at what stage as well as the physical interactions. This is in place of an insanely complex wireframe. I’ll be checking back on this constantly to revise the scenario as I develop Modai.