Project Modai: Process thread [FIN.]

CG, a fan of the sartorialist I see? I use his images with client PDS sessions to help guide what the personality of the product should be. The images he captures are just great.

Sartorialist is a great one along with these other two…

http://jakandjil.com/blog/

and

www.jjjjound.com

jjjjound is one of my favorite blogs and has great shots for inspiration boards.

Hello,
Finally had a chance to go through the recent work.
I like the colours you’ve used on the UI, I think the soft pastels work well with the hard illustration. I love clouds too, bonus.
I was hoping you’d be developing the avatar quite a lot more than you have so far, he currently looks pretty much like your sketches which I’d assumed were more like placeholders.

He’s way too close to the REVIVE monsters too don’t you think?

I think it’s worth making the avatar your own.

The shhhh! silencing/mouth idea is a cool one, maybe the sleep/lock interaction is intergrated with eyelids?
I love the tickle unlock interactions, very nice & probably my favourite thing so far.

Also, you could consider using audio/SFX as another method of expressing emotion within the device.

looking forward to the next lot of development!


Duncan Shotton

http://twitter.com/_dshott

Hey Duncan,

I really liked the revive monsters, so I took heavy inspiration from them. I did try to design other things but kept gravitating back (I have a page of sketches somewhere of different versions). In the end, though, the functionality of our avatars are a little different. In my defense, the form developed from this (really early) sketch:

Where the original purpose was just a battery/signal indicator.

Also this:

I would love to explore sound, but I don’t have time for that at the moment. There’s tons of things I would like to do, but because the project is due in a month, I can’t.

===

cg: Yes, I’m planning on selecting the few concepts that spoke more to the aesthetic of the UI and refining that further. I guess there’s just something inside everyone that wants to design future sleek sexy stuff.

I’ve never gotten into the habit of doing lifestyle image boards… I should probably look into that.

There’s a big update coming up soon… I’m getting close with finalizing the UI.

A little taste of what’s to come.

I decided to try my hand at animating the UI for kicks. It actually turned out pretty good! Thanks, Keynote! You’re amazing.

Unfortunately, Vimeo and Youtube butchered the quality. I also forgot to scale the UI. Halfway through animating I realized this but it was too late to start over.

[vimeo]http://www.vimeo.com/16809565[/vimeo]
Project Modai: Setting an Alarm on Vimeo

a little animation goes a long way.

Hi, I am student starting out in Interaction design and was curious on your animation. I have figured out how to create a prototype interface in keynote, bu what do you use to simulate the finger actions? Also, which program do you to capture your the animations… ei to put onto youtube etc.

Thanks!

I just animated a transparent circle using the Move build. Keynote can also export .mov, which is accepted by YT and Vimeo.

Had a midterm-ish (3 weeks left) presentation today. Pecha Kucha style. You can see it on Vimeo:
[vimeo]http://www.vimeo.com/16874332[/vimeo]
Project Modai Pecha Kucha Midterm on Vimeo
11-14pechakucha-101115222924-phpapp01&stripped_title=11-14-pecha-kucha&userName=tarngerine
Project Modai Pecha Kucha presentation by Julius Tarng - Issuu

I’m currently working on the ID… having some problems with Balsa2.


Gonna do some refinement/color variation. Then move on to Banana / Watermelon… I still kind of like Panda Rams.

very nice!

blogified:

Whoa! Thanks for the front pager, Michael! Made my day.

Hopefully it’ll help me get some more feedback! (If anyone missed my presentation I just posted because of the page break, it’s here: Design Magazines)

Just a quick shot at what I’m sketching up right now. Detailing some camera button. Really liking the “pimple” hill on the bottom right.

go to sleep kid, it is past 1am East Coast time! More to do tomorrow! :wink:

Great work with some very nice ideas and execution! My only advice would be to try to clarify and simplify the overall concept. If it’s about ‘humanizing’, what does that really mean? I like the little character that charges up when cord is attached, or the speaker level changing by ‘opening/closing’ character’s mouth. It’s ‘cute’ and has personality… But are those really what strengthens your concept of ‘humanizing.’? How is shown in the industrial design/form/materials/details?

I’d try to dig deeper into who this is for…Maybe it’s targeted toward a certain type of consumer? Or certain types of consumer behavior? (ie sleeping with their phone on their bed, playing with phone antenna…etc)

A simple concept with a clear point-of-view can go a long way over another concept with too many ideas stuck together without a clear cohesive vision. When I was a student, I used to do projects like the latter; and realized that I don’t have to use up all those great little ideas on this project I’m working on now. It’ll come back to you later.

Hope that helps :slight_smile:

Hey junetic! Thanks for the feedback. Not sure if you watched the Pecha Kucha presentation I posted a few posts ago (Design Magazines) but I actually do cover all of those things:

What is humanizing
Creating trust, knowledge, and empathy between a user and Modai. Modai knows what you feel, and you know what it feels. And all of that is based on context (time, location…)

Who my user is
Students/young professionals balancing their work/social life (hence the social vs work paradigms)

But yes, I am working hard on keeping it from being a feature list. My final deliverable will have a video scenario of a Day with Modai to really tell a convincing story.

I’ve been trying to follow, but it’s a lot to keep up with which bodes well for you.

You’ve got a lot of great ideas and having just finished watching the pecha kucha presentation I can appreciate Junetic’s points about there being a lot of ideas in this project that can be hard to digest all at once, but I think you are getting there, just keep refining your message as you progress and then after the project is over, give some time and distance and come back with some fresh eyes as I’m sure this may help you craft the story.

It is often seen as a bit of a cop out when students design things for “a student or young professional,” and while I don’t have an issue with it, I would like to see a little more thought and exploration on Prodai or maybe even just a little more facetime in the presentation. The presentation as given just left me feeling Modai was little more Fundai than Prodai, maybe another persona would help this. Maybe Hunter wants to wake up to Fundai, but “Sophia” is a little more type A and spends more time in Prodai?? Just some thoughts.

In terms of the physical artifact, I like a lot of the ideas of physical gestures or shape changes to communicate information or state, but I haven’t seen a lot in terms of the execution that is really selling me. The Peelstand for one sounds like a great idea, but I’m wondering how to execute it differently as the proposed solution for standing up, just doesn’t seem to fit for some reason, maybe too mechanical, not sure I like the idea of this thin sliver, but this may be a personal bias. One idea for a small piece popping up to communicate might be like a jar lid that pops up when opened?

I also love the way you are sharing your process with the blog, videos, slideshare, etc. It’s really great that you are not only able to show the process, but that you are really using so much of the technology available to do so in an orderly and organized manner.

Goodai
r

Hi IDiot

Thanks for our feedback.

Regarding “copping out”: I actually feel the same way. However, I usually don’t choose to design for students/young professionals (save for my Chef’s Portmanteau, which is a really specific audience). A lot of my projects range from kids to geriatrics to baby boomers… I believe I have that breadth of empathy for users who aren’t like me.

Lack of Prodai: I have lots of things in the work for Prodai, but it wasn’t done by the time of this presentation. I briefly mentioned that it is still in the works. I’ve got that covered.

===

In other news:

I’m trying to get some sheets of Santoprene to experiment for Project Modai. I’m looking at something around a 60-70A durometer, and something like .08 thickness… I’ve been looking online and all of the resellers’ websites look really sketchy and untrustworthy. Does anyone have experience with purchasing sheets of Santoprene?

I also noticed that most are just black… but I have seen samples in many different and bright colors (yellow, green, red…).

Any help would be REALLY appreciated!

Thanks

not sure about buying sheets of santoprene, but I know several companies sell silicone baking mats,
although I kind of doubt they’re going to be the durometer you’re looking for, might be worth swinging
by the housewares/baking section of your favorite local place to get that stuff…? Could be fast and cheap
way to dabble if it’s anywhere close to what you’re looking for.

A question: Do you think that demographics for technology can still be defined by age?

What is it that defines people’s choice in the type of mobile that they buy now? For example, my best friend - a twenty-five year old graphic designer - owns an iPhone, but so does my Mum - a fifty-eight year old retired woman. Similarly my partner - a twenty five year old toy designer - owns an HTC Desire - and so does my sixty year old recent retiree / part-time professional father. What is it that drives these people, who if you consider traditional demographics come from very different consumer groups, to buy identical products?

Maybe you have gone into this in more depth already, but I would encourage you to consider how consumer groups may have changed, especially in consumer electronics (does the ‘young professional’ still exist?). Are our technology choices more lifestyle led, or about what we aspire to, the image we want to project, or simply finding ways of overcoming the increasing pressures in our lives?

I think that this project is great, and that actually you have already come up with some great solutions to issues that you may uncover if you look at your consumer this way, but having this type of solid background understanding will really help to support the work that you are doing, and your outcomes.

Firenzee: that is a great question. I have indeed given that a lot of thought. I did not want to choose a persona or user group in the beginning because mobile devices should be for everyone. However, that is the case for a multi-person, lengthy project. I would be unable to cater to all needs within a 3 month design project. On the other hand, I AM able to find a specific age range with specific needs (young adult balancing work/social) to really design something that answers their problems.

===

Huge update: because I haven’t recorded my progress in a week and it’s crunch time so I’ve been making a lot.

UI recap
View this post on the blog here: http://blog.tarng.com/post/1607877840/ui-recap-part-1

It’s been a hectic few weeks. Each day feels like a week balancing between Modai, my Basic Interaction group project, and classes.

I’ve been meaning to write about my work on the UI since I finished the video animation last week. I’ve also been doing some ID work here and there (just made some more foam mockups today). I’m also finalizing what exactly my deliverables are. Really learning to make trade-offs because of time.

UI
Let’s start off with some User Interface process. Since my last post on UI, I’ve made a lot of progress. I’ve fleshed out Fundai (the social paradigm), and the main screen for Prodai (work paradigm), although I’m still working on the specific project layers.

I’m going to go from top down for Fundai, then Prodai.

Fundai overall
Here’s the overall anatomy of Fundai:

The Concierge is the main content area. It is where Modai delivers information it deems is relevant to your current context/situation based on its knowledge of your habits.

Since the last post, I’ve vertically shrunk the UI because during testing, it was too tall to comfortably access the top and bottom portions of the UI with one hand.

I also changed the color to a darker blue for a sunny day to give better contrast to the white type and Prodai zip.

Background
As predicted by many before, the background does indeed change with the weather. Here’s a shot of what it looks like at night, as well as what content is down below when you scroll. In addition to the end of the Things to do list, there is also the Relevant Applications to your current context, time, and to-dos (all learnt based on your habits or extrapolated from the to-do description). Below that is the Repository, where you can access applications that Modai did not deem as appropriate for the situation (based on its current knowledge). By using these applications more and more, Modai will learn to put your frequent ones into the Relevant Applications area.

If you notice, this nighttime screen doesn’t have the weather widget. That is because Modai has learned that you don’t need the weather application at night (because the day’s weather has already passed). The Concierge only delivers contextually relevant content.

Avatar
The avatar was a result of a long line of thinking. It started with the original ID sketch that started the whole project, where I wanted a section of the screen to be devoted to phone connectivity and carrier branding. The shape evolved as I explored more (and got inspired from things like Revive and Pokemon). The real resolution came about during the logo design process: http://blog.tarng.com/post/1484722388/back-to-the-drawing-board-and-new-logo.

The Avatar expresses the battery status, paradigm (work or social), as well as volume (shown later). It also expresses other statuses like “on a call” with a headset or “taking a picture” with its back turned.

Volume
The volume bar took a lot of thought. My primary goal was to create feedforward with the placement of the volume control over the speaker/earpiece where the sound is actually produced. I had thought of many physical interactions before (to cover/uncover the speaker holes), but decided to stick with an irregular shaped LCD (with a strip milled out for the speaker).

I studied many ways sound is represented in a 2 dimensional context. I also looked at how the Avatar could interact with the volume. The speech bubble concept made sense, but visually was overwhelming and did not allow me to use speech bubbles for other content I had planned for the Concierge area. I decided to use a simple triangle to denote the strength of the volume. I did not use bars within the triangle (like iOS does) because real-world sound does not change in steps: it has an infinite amount of steps within any range.

I decided to correlate the loudness of the volume with the size of the Avatar’s mouth. This was subtle but visually intuitive. It also provided the cleanest header.

Clock
The clock shows time in digital and analog form, and also hints at the sun/moon’s status. Visually simple but full of information. Tapping it opens the alarms menu. I need to resolve the alarm setting screen (I wanted it to be very informative in terms of sleep cycles you need to be energetic the next day…).

Concierge
The Concierge took a lot of refining to design, mainly because it needed to be able to handle dynamic content: widgets for weather, messages/notifications, to-dos, relevant applications, repository, contextual suggestions, and even more on Prodai. I eventually resolved the design digitally, but here’s the process from the very start.

Weather
The weather widget took a bit of refinement. Here’s the original sketch page:

Messages
The messages go into the message stream in the Concierge. You can scroll right to access all your messages from Mail, Facebook, Texts, RSS… You can add more, too. To search, just scroll to the left (similar to the iOS search screen).

Despite what it may seem, the sketch note says “flick up”. You flick up to see options for the message. They vary depending on the type of message. The options shown here are for Mail.

Forgotten ideas
I realized that I’ve had so many ideas and thoughts through the whole project that many have been lost. I was reminded of an idea about tracking your application use in Modai when someone emailed me about it today. The idea is that you would be able to see how much time you spend on what applications so you would be conscious of your Facebook addiction or texting frenzy. This realization would allow someone to begin to make changes in their usage habits. I wonder if I can still work that into the UI somehow… maybe broader as how much time you spend on Fundai vs Prodai. Perhaps if I decide to take this project further… I’m running out of time.

To do list
The to do list is an area that I’ve only loosely defined. There are many possibilities for the items, from due dates to sub-tasks… I decided to only explore the very basic task + date + relevant application for the scope of this project. I had several ideas about how to mark something as done, but decided on the “crossing out” physical metaphor. I had an idea that you could input what percentage you were done with a task by how far you cross the item out. However, it’s hard and sometimes useless to quantify your progress on tasks.

I also thought about how you could time manage your tasks by dragging items into the clock to be timed. Again, for the sake of this project I have not included that in the “final” design.

Relevant applications / Repository
Relevant applications are frequently used items/apps that Modai has deemed relevant to your context/time.

Even though the Concierge delivers relevant information based on habits and context, I still needed a fallback just in case Modai hadn’t learned something or you are doing something new. Scrolling all the way down would allow you access to the Repository. My previous ideas had you dragging the Avatar down to reveal applications, but that was ergonomically uncomfortable and added too much functionality to one item.

Paradigm Zip
The core component of Modai is the two paradigms you can switch between. I had many ideas before of how to switch paradigms, from physical actions to UI.

I even had the idea of using a physical zipper (back when I was thinking of using felt for the form).

Eventually I settled on an abstracted “zipper” that indicated the direction you should pull and what the result would be (glasses onto the Avatar). When you pull up, the animation would be very much like a jacket being zipped up (even with the zipper track shown below).

I also looked at what the zip would become when you are zipped up. I decided to use negative space as the pointer this time rather than the various other zippers that I sketched, because of its visual simplicity (and relevance to an actual jacket/hoodie being almost zipped up all the way with a tiny ‘V’ at the top.

Prodai
Prodai also has a Concierge (like Fundai does), but all the information is work-relevant. All the to-dos are work related, as are all the messages (even the ones on Facebook are from your colleagues).

Prodai also has project widgets to show all your current projects. This took a bit of work to determine exactly what I could show: progress on project, date due, to-dos, communications (pulled from all your mail, Facebook, etc based on your group mates/message content).

The project widgets take you to the specific project layer where there is the relevant info about the project (including meeting dates/times, deadlines, tasks, and communication). That will be developed soon.

Contextual Suggestions
Modai can also give you suggestions based on your location/context/the time. For example, if you are at a bus stop, it may give you a shortcut to the bus schedule. If you were walking by the dining hall around lunchtime, it would pull up the dining menu for you. Modai cares and will try to give you all the information you want as easily as possible.

Brand
I also put together this lifestyle/brand collage to express the feeling of the target user.

ID
I’ve made some headway in the ID, too. Here’s a quick recap of the favorites from the last session. I really wanted to create a simple form that would complement the simplicity of the UI and brand.

I also decided to use Santoprene as the Peelstand material. It’s embedded with muscle wire so it can move on its own.

I did some refined sketches of the top left and bottom right. I’m really liking Banana (yellow one).

I modeled a few as well to figure out which one felt right in my hand.

Banana models: I’m really excited about banana because of the offset Peelstand that allows sideways “kick”standing. The knocked off corners also provide greater reach to the UI with your thumb during one-handed use. However, the one feedback I got was that it was a little too small (although they really meant it was too narrow for a comfortable wedge into your palm).

Balsa2 and Watermelon: Balsa’s form was too complex and ungeometric: it didn’t fit with the visual design. Watermelon is fine, but also boring.

Banana
I decided to push forward with Banana with some renshape and painted models. I also received my Santoprene today. The durometer was a little lower than I expected, but it’ll have to do (budget-wise). It’s really hard to cut rounded corners, so one of my shop professors sanded a brass tube to make a hand-die cutter. It’s really rough, so I’ll probably have to remake it into a nicer one.

I made two models. Black one: slightly thicker but with a taper at the bottom. Silver/black: showing how thin the ID can look when theres a stark white/black contrast in material. No taper.

The two holes at the top are: (longer) charger port, (shorter) headphone jack. Side groove is camera button placement (it will poke out).

The next few images show the Peelstand in action. The first image shows facedown (silenced) notification with the Peelstand. The edge that’s exposed would be colored for visual attraction. The following shots show Modai in a vertical stand.

The next few images show the offset Peelstand enabling sideways kickstanding. There is also an image showing the Peelstand fully peeled back to access the internal componentry when upgrading. The last image is the state of the Peelstand when Modai is slightly up (for a call or notification).

The position of the camera button is for ergonomic sideways and vertical shooting.

What I learned from these models
The models I made are still too narrow. The still feel a bit cramped (especially for those who are used to iPhone sizes). I need to make wider models. However, the overall feel is pretty good and ergonomic reach is good. I need to do some more refined sketching based off the models to detail out the componentry (speakers, camera, mic, affordances for peeling, the sliding charger port, and if there’s some material on the edges of Modai to prevent slipping in a vertical/horizontal state)

Because the Santoprene is hard to cut (well) without having crappy edges, I may use acrylic and bend it to show 3-4 stages of peeling rather than have a working Santoprene Peelstand.

What’s next?
I really need to finalize the ID and make a near-finished prototype before I start CAD. I would rapid prototype but 3d printing is too expensive here.

I also need to finalize the video storyboard. I’ve decided to use still images/drawings coupled with the UI animations rather than live video (due to time constraints). An example of the still drawings in an video can be seen in this IDEO video. However, because the UI animations would be in a higher fidelity than a sketch of the physical device, there may be some discomfort for the viewer. The challenge with still images is that my model needs to look really good and be able to handle different states of peeling (which I guess is what the bent acrylic would be useful for). Either way, I need to record the audio narration first to pace the video.

===

Whew! That was a long one… Took over 4 hours to document.

Now I’m going to take a break from Modai and create slides for the Student Lecture Series tomorrow that AIGA/IDSA @ CMU is hosting.

Read about it here: http://idsa.cmustudents.org/tagged/student_speaker_series/chrono