Wireframing: Iterating on visual design and workflow

This week, I took what I learned from last week’s critique and applied the numerous suggestions to my wireframes. In last week’s blogpost, I discussed how I’ve been evolving my visual design skills. I went deeper into this aspect of my flows as I tried to also figure out how to make my workflow more efficient. I also said that I would build out more flows that a user would experience and see if there would be any new features I would want to add. I added flows but did not add in any features.

In this week’s post, I am going to discuss

  • Improving visual design
  • Revising wireframes
  • Improving workflow
  • Revised wireframes
  • Next steps

Improving visual design

As I discussed last week, I am not a trained visual designer. I am learning one significant aspect of visual design is training my eye to see details. Before entering AC4D, I rarely spent time thinking about how to evaluate graphics from the standpoint of readability and accessibility. I certainly didn’t ask myself how one document may be more attractive than another. Since practicing this kind of detailed evaluation, I have only begun to realize what I don’t know and that the most valuable way to getting better is by getting feedback from others (especially those who have more training). I am hoping that I start to develop my own aesthetic so that when I leave the program I can be more independent and assertive when it comes to my own graphic design decisions. For now, I am working at a snail’s pace trying to modify what were once ugly screens to slightly higher fidelity screens.

This week, I spent hours modifying old screens so that they are less “chunky” and “amateurish”. Below is an example of how I modified the hamburger menu so that it looks more realistic. You will notice that in the new screen the typeface is less harsh, there is more white space, and that there are clear breaks between categories represented by faint lines.

newvsold-02

You can see another example below. It is an example from the Bill Pay flow. I made all elements left aligned, the typeface smaller and as well as changed the text from a regular weight to a light weight. I am beginning to understand the subtle grace a wireframe (or document or form…) one can develop by using weight and size.

newvsold-01I also made my wireframes more consistent by making sure that all buttons looked the same, affordances were set up in the same manner from screen to screen and all hamburger menus were on the right hand side of a screen.

Revising wireframes

In addition to modifying the visual design of my screens, I revised the Alert flow based on user feedback from last week’s testing. I have been challenged by the alerts flow and seem never to get it right. I will be testing this flow during critique (again) as well as during usability testing.

Test documentation 5-01

 

Improving workflow

A huge part of my struggle this quarter has been getting better at visual design. Another is being able to work more efficiently and accurately. This week I was more intentional about trying to improve my workflow. I spent time creating groups, symbols and writing down key information that I needed to repeat across each flow. I also tried to time box more effectively. Honestly, I am not sure how much this all helped because in the end, I found out that Sketch, the application I use for wireframe design, is a little buggy and when you copy and paste symbols, it will make a new symbol instead of copying the instance. This then sent me on a rabbit hole to try to fix the work I tried at first. Though I have been told that symbols ultimately will slow down a team of designers, I want to figure out how to use them because it takes so much time to make one small change to each screen!

Revised screens

Below, you can see my revised screens as well as the new flows I have added.

Login flow
Login flow
Bill pay flow
Bill pay flow
View bill flow
View bill flow
Check balance flow
Check balance flow
Alerts flow
Alerts flow
Deposit a check flow
Deposit a check flow
Quick pay flow
Quick pay flow
Transfer flow
Transfer flow
Settings flow
Settings flow

Next steps

Next week, I plan to do usability testing with twice as many people (8-10) so that I can make up for not doing it this week. I also plan to add into in the edge cases and error screens.

 

Creating the right pilot: Trust your gut, focus on the ideal

This week I waited for my recordable greeting card to come in the mail. Anticipating that the idea was to establish a conversation with individuals, via a pen pal type situation, recording reactions and reflections that were then sent back to the first user, then to another individual to reflect or react to by recording a verbal message.  I would then use contextual inquiry to identify if this back and forth conversation (revolving around the stigma of mental illness) was helpful for the initial user in disseminating the stigma that they had to keep their condition a secret, and to be more comfortable speaking out and owning their condition, because they were at least virtually interacting with others that could identify with their emotional state on a personal level.

Unfortunately, the card did not come in, but during this time of waiting for the card to come in the mail, I was challenged with the opportunity to take a step back and ask if this was really the correct way to pilot my ideal final product. Which is a 2 week trial pack of a mood disorder medication, which included recorded stories of others who have similar conditions and how they deal with emotion, medicaiton, and manage self care. As of now I can only equate my final ideal product to the idea to those voice recorded Hallmark story books, where a child can be told a bedtime story by a loved one who may live across the country.

Yet as I was waiting for my order to come in, to pilot my idea, I had in the back of my mind that this is not the correct pilot, I just felt it in my gut. My ideal end product is actually not necessarily a back and forth conversation as the initial pilot would suggest, but a book of real people with real stories about how they felt and dealt with issues surrounding their life before a diagnosis. Then how they felt and managed getting a diagnosis, being prescribed medication, and how they felt with the idea that they may have to maintain a medication regimen perhaps for the rest of their life.

I did not believe in my first pilot idea, so I went with my gut and started gathering stories, from real people in their own words. That is what I wanted in the first place and admittedly should have spent the past week gathering these stories.

The past being the past it, was time to get to work. I created a script of questions and recruited 2 individuals to interview and record in order to deliver these stories to someone who may be hesitant to seek help, whether by stigma or general fear of a diagnosis that required them to potentially take a medication that helped them reach self-care in the long term, possibly for the rest of their lives.

This is what I did today. Surprisingly people who suffer from a mood disorder (bipolar spectrum or depression) understand what the condition is like and are more than willing to share their own stories if it has the potential to help release the stigma of being the odd man out, or the damaged ones, as well as put them at ease about the idea of having to be medicated in the long term in order to reach the goal in life they seek.

I also learned the importance of getting this information out of the computer and on to the “wall”. The wall being a place where you can visualize your journey and ideas, inspirations and wishes that you can physically look at and see on a daily basis. This allows you to be able to see where you have been, where you are going, and where you want to be. To iterate, and I acknowledge I should have done this sooner. I should have trusted my gut.

Out of respect of the two individuals I will not post the recordings until next week when I am able to edit down to the core ideals I am initially going to pilot, to a new “patient” with the same hope that it will aid in creating a virtual bond with my recorded individuals and their experiences in hopes that the stigma of being judged as the damaged one, as well as the realization that it is ok, and rather normal, often rather necessary, to seek aid of a medication regimen is not weird, or uncommon.

My pilot has changed. I now have the necessary stories/tools to relay to someone who may be feeling like they are “not normal”, but being not normal is actually ok with the appropriate treatment. Some of the greatest minds of our time have been “not normal”, and have gone on to make a true effect on changing the world.

I truly was fascinated and inspired by hearing others give their trust and conviction in helping others by revealing their personal information on tape. I appreciate the community that is willing to speak out about 1 in 4 people you may walk past on the streets where you live each day that manage and thrive some sort of mood disorder, but still having a program to not only reflect on their own actions themselves, but also be the crafters of some of the most insightful realizations about the world we live in at the same time.

Financing Longer Life Expectancies in an Aging Population

“In 1940, the typical American who reached age 65 would ultimately spend about 17 percent of his or her life retired. Now the figure is 22 percent, and still rising.”[1]

As life expectancy in America has increased (about 3 months each year since 1840)[1], so has the length in retirement, and attendant worries about financing life in old age. By 2025, 25% of the U.S. population will be over 60, compared with 16.5% in 2000 [2]. The repercussions are often difficult for retired individuals and their families, but they are also far-reaching in society, affecting wide-ranging fields including politics, healthcare, and finance.

Here at the Austin Center for Design, we’re interested in researching how people finance or plan to finance this long period of retirement, and coming up with design ideas to address this multi-faceted problem. Our team [Lindsay Josal, Maryanne Lee, and Laura Galos] will focus our next 3 quarters on financing the longer life expectancy of an aging population, particularly for members of the working class.

In conducting our research, we will primarily employ Contextual Inquiry to gain understanding and empathy with people in retirement or planning for retirement by observing and learning from them in a “master-apprentice”-style relationship. Specifically, we plan to learn from retired individuals, working-class individuals in their 30’s, 40’s, 50’s, and 60’s (to gain a sense of perceptions at each age plateau), financial experts, and caregivers of retired individuals.

Our full research plan can be found here.

We believe that addressing the new financial concerns that arise with increased longevity can alleviate some of the financial, health-related, and emotional issues facing both seniors and their circle of caregivers.

Interested in learning more or participating in our research? Do you know someone who would be open to speaking with us about financing retirement? We would love to hear from you! You can contact us at:

lindsay.josal@ac4d.com

maryanne.lee@ac4d.com

laura.galos@ac4d.com

 

References:

[1] Easterbrook, Gregg. “What Happens When We All Live to 100?” The Atlantic Monthly, Oct. 2014. Online. Accessed 11/5/14. http://www.theatlantic.com/features/archive/2014/09/what-happens-when-we-all-live-to-100/379338/

[2] Disruptive Demographics. MIT AgeLab. Online. Accessed 11/5/14. http://agelab.mit.edu/disruptive-demographics

Studio: I've Made a huge mistake….

The days are long, the nights are sometimes longer. And just when you think you can get a quick second to do a little reflection to some Peter Bjorn & John on the old headphones….

Introducing, the Opa house guitar….

hugemistake

Before and After: Honeywell Prestige 2.0 Thermostat Final Re-design + Design Process Overview

 

The Before and After: Honeywell Prestige 2.0 Thermostat Final Re-design + Design Process Overview 

Last week we presented our final design of a programable thermostat for Rapid Ideation and Creative Problem Solving. Our problem for 8-weeks was to re-design the existing Honeywell Prestige 2.0 thermostat system using a collaborative and user-centered iterative design process.  For the final annotated wireframe iteration click here.

Understanding Complexities

As part of design research, we engage in a space to help us understand the complexities of a problem.  And we create artifacts such as a Concept Model of an existing system.

The Features List

The system re-design includes the features below:

  • Adjust temperature to warmer / cooler
  • Switch between heating & cooling
  • Turn the system on and off
  • Turn the fan on and off
  • Set / edit a 7 day schedule
  • Interrupt the schedule to adjust the temperature

 

 

 

Creating an Ideal System

By zooming in and out of the system details – I was able to conceptualize an Ideal System that rid unnecessarily complicated features and provoked ideas around energy consumption and efficiency, air quality and color as a visual language for temperature control.

Design Heuristics

1. 1950s Honeywell Thermostat by Henry Dreyfuss

Simple and ease of use

2. Nest

Motion sensor technology inspired me to move away from tediously programming the system for while you are away

3. Less but better… Dieter Rams.  

The lens used when designing solutions from user testing feedback

Design Process Diagram Overview

In Reflection

When we started this project 8-weeks ago, I thought the design process was to refine our initial wireframes by testing with people AND doing this over and over till I came up with a good design solution.

What I actually learned through the user-centered and iterative process was that it was less about me coming up with the right solve and more about the collaborative nature of the entire design process.

Good design happens in collaboration with people and makes sense to the people you are designing for.

For any questions/feedback please leave me a comment or you can reach me at  bhavini.patel@austincenterfordesign.com

Wireframe Iteration Archives

Iteration 6

Iteration 5

Iteration 4

Iteration 3

Iteration 2

Iteration 1

All Best,

Bhavini

A Point of Reflection

Jacob and I just completed our application to compete in the 2014 IxDA Student Challenge.  Applying is always an interesting mix of reflection and projection: articulating your past in the hopes of experiencing something new.  In preparing for the competition in Amsterdam, we were inspired and humbled by how much our perspectives have changed in such a brief amount of time.

The Austin Center for Design challenges its students to push past their own perceived limits: of how much they can accomplish, of how who they can affect, of what questions they can ask, and certainly of what they should demand of themselves.  I think I speak for every student at ac4d when I say I’ve never worked this hard at anything in my life.

Looking back at the work we have done in just a few short months put the value of this program into stark relief.   We’ve gone from grasping for well-defined design methods to having the confidence and autonomy to define our own methods to suit our purposes.   Jacob and I articulated the process that our design team has absorbed and come to value in this brief video for the application:

www.vimeo.com/81353861

We also summarized the design work we completed in the first quarter in these two design documents: Food & Identity and Firestarting

Looking back on that work made me extremely grateful to be working with Jacob and Bhavini and excited about the work we are currently doing with Medical Records and Health-Related Experiences.  We’re in the middle of making sense of an overload of data.

I feel lucky to be working with two people who have perspectives that complement my own.  I know that my team’s trust in method combined with our driven approach is going to lead to great ideas.

The Crimson Project: Update #4 and Beyond!

As always, Matt and I have been busy. This time in the update, I have photos of the initial prototype and a few takeaways we have gleaned from this project. These are most certainly not exhaustive, but they might give you an idea into what we’ve been learning over the past three weeks.

Over the weekend, Matt learned how to 3D print, and he has been extraordinarily helpful in pushing forward the movement on the prototype.

3D Printing the bicep for crimsonSTEAM.

The scaffolding on the side of the model prevents it from tipping over during printing. The 3D printer takes filament from the top of the printer and threads it through a heat element to fuse it together into a 3D object.

When we finished printing the parts, we sanded them down using fine grit sandpaper and an X-Acto knife to make this:

We’re going to take these photos to the Indiegogo campaign and update our contributors on the 3D prototype. I’m hoping to work through a few more of these prototypes to make sure that we have a solid product to cast. Also, we have a few kinks to work out with the pose-ability of the arm, which will be done in subsequent iterations.

We’ve also learned a lot with this project. I’m going to give you two takeaways—one from myself and one from Matt so far.

Chelsea’s Takeaway
Don’t assume that you will always be pitching to an agreeable audience. Always make sure that you have evidence of your craft.

My past experience in getting work and donations has always been through family and friends, which are, by default, an agreeable audience. I have already built a rapport through them, and they are aware of my skill because I talk to them about it or show them on a consistent basis.
In this same way, I think I assumed that because we had a good product and some great high-fidelity sketches, we were golden as far as preorders were concerned. This was an incorrect assumption, and I think it made us out to be less honest than we were aspiring to be. In the end, the problem was solved with a detailed FAQ and some shots of the 3D printing in progress, but I could have skipped that embarrassment by asking myself more skeptical questions about the preorder, such as:

  • Why do I want to buy this?
  • What is the proof that this is legitimate?
  • How will you be spending my money?
  • What will happen to my money if you don’t get funded?

Now that I know about this, I’ll be making a list of talking points to the product and making sure that I’m addressing concerns about the project before they happen. I want to make sure that people who preorder our arm are excited and happy about our product, not anxious and afraid.

Matt’s Takeaway
Take how much time it takes to 3D print. Then times it by three.
Matt and I were continually amazed how much time it took to set up the 3D printer, set up the model, and then the subsequent re-prints if the models accidentally snapped in two. The filaments are pretty finicky, so if we have any problems with the filaments catching on the equipment, we’ve got a broken model. We’ve gotten a lot of use out of the 3D printer, and have gotten better each time, so overall using the 3D printer has been a great benefit to us.

That’s the update on our progress so far, and then a small taste of the lessons that we’ve learned. I’m looking forward to Saturday when we give our full presentation, and as the project continues, I’ll be updating you all on everything!

Signing out (for now),
Chelsea + Matt