Discover more
keepup

UX, UI, Interaction

Nike Brand Challenge

Branding, UI, UX

TartanHacks Chat Server

UI, NodeJS

Check Me Out

UX, UI, Interaction

Toaster UI

UI, Interaction

CacheCam

UX, Industrial Design

Nomad

Industrial Design

Social Collective

UX, Research, UI

Mitsuko

UX, Industrial Design

keepup

Designing for families.


This project involves using current mobile technology to develop a system for moms to retrieve status information about their children from social networking services and other communication channels. I am working on this project with Whitney Aronson and Samantha Klonaris.

So far, we have conducted 5 interviews and consolidated the notes into categories. Primary concerns for mothers include the physical location of their children, their social media activity, and their academic performance.

We are using this information, as well as other info from our interviews, to develop a set of personas that we envision using this product.

We started with a problem.


Mothers want to know what's going on with their kids.


It's as simple as that. Parents are sometimes left out of the loop when it comes to what is going on in their children's lives. How can we design a way to start a conversation?

The 16-20 year old demographic.


The young adults in this age group are constantly posting information about themselves on the internet. How can we use this information as a way to keep mothers informed?

Are social networks a place for Mom?


Parents are unfriended, deleted, hidden, (or worse) left in the purgatory of friend requests. What is the balance of how much children are willing share while maintaining privacy and how mothers can receive enough information to have a peace of mind?

What is the balance of how much children are willing share while maintaining privacy and how much information mothers receive in order to have peace of mind?

We interviewed 5 moms and 3 children.


Parent primary concerns

What their children and children’s friends are doing on social networks.

Children’s well-being and personal safety.

Children’s academic performance.

Where their children are.

Who their children are with.

Children primary concerns

Parents “stalk” them, their friends and what they are doing.

Parents embarassing them on social media networks.

Want to maintain their independence.

The Ideal Solution

To somehow track each other's location.

To regularly and privately communicate with each other.

To be able to see how each member uses social networks.

To be a part of each other's lives without feeling like a spy or stalker.

“In a perfect world, I would have a camera on my daughter at all times. I could pull out my phone at any time and see what she is really doing.”


This is a stand-out quote from one of our interviews. How do you design for that? How do you make this mother feel like she's getting enough? What we didn't want our app to be was something that restricts or monitors children. We wanted to strengthen relationships, not create tension.

We consolidated the notes from all of our interviews to figure out the most crucial points we should focus on.

Our app should...

Create a new, central space for families to share and communicate with each other.

Help families find time to spend with each other through their busy schedules.

Allow family members to be involved in each other’s lives, even at a distance.

Tap into the a family’s individual culture so that it feels personalized to them.

Personas - The Beckers

Jenny


Jenny works full time and feels that her family is starting to grow apart. Jenny's main goal is to support her children and be involved in their lives without feeling like she's invading their privacy. She uses Facebook, Instagram, and Twitter, but she doesn't check them very often. She loves cooking and sharing photos of family events.

Tori


Tori has been away at college for about two years now, but she comes home to visit for holidays. She is very busy with classes and volleyball. She doesn't want to receive calls from her family when she is in class and finds it difficult to keep in touch with them from a distance. She also posts pictures when she goes to parties with her friends and worries that her parents will her question her for it.

Brad


Brad is a junior in high school. He just joined social networks and feels embarrassed when his mom comments on his Facebook content. He sometimes has to delete her when he posts pictures of things he doesn't necessarily want her to see.

Robert


Robert travels for work during the week and doesn't find much time to spend with his family. He isn't interested in using social networks, but wants to know what is going on in his family members' lives.

Sketching out potential features together


Narrowing the features down.


Calendar

This feature would pull in member's calendars from other services.



Timeline

Timeline would store data that your family shares and display it in a reflective format.



Newsfeed

This would summarize data from social networks and pull it all into one space for the family to see.



Messaging

Family member's could send private or group messages to each other to facilitate communication and trust. The "send for 5 seconds" feature is inspired by Snapchat. Messages would self-destruct if the users didn't want them to exist after they were read.

Digital wireframes made in InDesign.


Focusing on calendar.

How would family members compare schedules?


Color scheme interation.


As a group, we really liked this color. I made this mockup and thought, "this is it, this is our design language." But then I thought about how we could use color more effectively...

What happens when we bring in more neutral and contrasting colors?

What if we used color to highlight certain elements?

Or highlight other ones? But the gray feels very cold, this is supposed to be an app for families.


Let's bring in some warmer neutral tones.

Red seems a little too striking.

Maybe we can bring back that color that we liked so much in the beginning. Let's try using color as way of identifying people more clearly.

Learning through prototyping.


This iteration was solved the problem of the side slide-out drawer covering up menu buttons at the bottom of the screen. My issue with this interaction is that the sliding of the drawer looks and feels very similar to the sliding the of calendar.

Instead of sliding, I tried having the icons fly out from the top menu. The problem is that clicking on the top menu for this animation to occur is a hidden feature. The location of the icons cover up a lot of information, especially on the screens for the other features.

The family icons don't need to be accessed from all screens. I decided to add a button separate button to trigger this animation to allow for consistency. This button could be hidden on other screens. The placement of these icons also saves a lot of screen space while still conveying the same idea.

Having the menu on the bottom of the screen is conventional, but covers up 10% of the screen space (on the iPhone 4).

Triggering the reveal of the menu with a button is also conventional and saves screen space. When the user begins interacting with the content next to the menu, the content slides back over the menu. In the real product, this menu could also be hidden and revealed by a left or right swipe interaction.

Learning through prototyping.


Saving screen space

Original versions of the calendar display it with three rows of weeks. As seen in some of my earlier sketches, I was deciding whether or not to display the calendar in month or week view. This solution is a compromise of both. Interacting with the calendar dynmically increases its height to display more information. Interacting with the schedule slides the height back to its original position.

Improvements to be made

There's a lot of missing information in the calendar. How does the user know what "today" is? What about the month? This animation shows the idea behind the interaction, but doesn't communicate the final design. A lot of information needs to be crammed into a calendar, but it's important that this information is clear.

Comparing schedules

Family members' schedules can be toggled and compared with your own by tapping on the icons hidden within the family button in the bottom right corner. Keepup highlights the times in which you are all free so that events and traditions can be easily scheduled. Comparing one member's schedule to your own displays more information, such as event titles and times.

User feedback

One user noted that she expected to see a line in the schedule that shows the current time. This is a Google Calendar convention. Right now, when the user opens the Keepup app, the window scrolls to the current time. Her feedback showed that this is not clear information.

When the new event window popped up, two users didn't know how to exit the pop-up. I assumed that users would know that tapping outside of the pop-up area would close it, but that's a hidden interaction. “I don’t know how to get out of this window. I can create and edit the event, but how do I cancel? There should be an X or something." -Participant

Navigation

There are four main features within Keepup. Earlier iterations show the menu options at the bottom of the screen, but pushing the main content over to reveal the menu saves screen space. In the prototype to the left, it is shown that the "list" button toggles the reveal of the menu. Interacting with the main content also closes the menu. Ideally, the user would be able to swipe to the left or right to close and open the menu respectively.

User feedback

When one user first opened the menu and tapped on the newsfeed icon, she appeared confused about the changes that occurred on the screen. She then expressed that she didn't know how to get back to the calendar screen. Transitions will be important here. Sudden jumps from one screen to the next may not be clear for a first time user. This will be something that I consider for future tests.

Quickly chat and share information

Many of our interview participants used text messaging as a primary mode of communication with each other. The family chat feature is the family's own space to share information instantly without the distractions of other conversations. Users can receive push notifications, and they messages can be sent as texts if they are urgent.

Next Steps

It's important that this feature is more meaningful than text messaging. As of now, the prototype shows that users can send photos and text, but I would really love to incorporate more than that. I hope to gain some insight as to what family members hope to share with some user testing.

Locating family members

From our research, we found that across the board, mothers are concerned about their childrens' locations. The map is a quick way to directly call, message, or get directions to another family member.

User feedback

I had one user interact with the map feature. I told her, "Now that you know where your family members are, what would you want to do next?" She told me that she would like to directly be able to call, text, and get directions to that location. If something terrible were to happen to her children and they weren't able to give directions, she would be able to quickly receive that information with one interaction. The directions button was helpful feedback because it caters to moms that are more concerned about their children's wellbeing and safety from a distance.

Play with the HTML prototype

User Testing

[Coming very soon]


Documentation from Instagram.

@russellandrews #designingformoms

Nike Digital Campus Challenge

Designing a new marketing campaign for the 2014 World Cup


How do we unify the world?

Create a global community through social media and the #offthepitchWC Web Portal.

Allows users to view goals set by players around the world.

The Global Leaderboard inspires friendly competition among countries by promoting people to achieve their personal goals while earning points for their country.

How do we inspire?

Users can tell stories based on their success and view the stories of others.

Users are motivated with the prospect of being a featured player on Web Portal to invoke inspiration.

Support each other to reach athletic potentials through various communication platforms.

How do we drive sales?

Track goals scored by Nike boots and purchase directly from the mobile app.

Users have the opportunity to post videos and pictures from their childhood displaying loyalty to their teams as well as receiving and using new Nike gear.

Earn more points for their country by purchasing products with the knowledge that a portion of the sale will go back to the Brazilian community.

See the live site - click on the image below



UI Elements

Slide-out jQuery side menu for quick navigation




Next section button for dynamic page change



Chat server for TartanHacks mentors

Providing easy access to help during school-wide hackathons


I'm part of an organization on campus named ScottyLabs. During my first meeting, a computer science major named Sam Gruber approached and asked if I wanted to learn how to make a chat server.


After some trial and error, it was finally working, and it looked like this.



We figured out how to add in a sign-in dialog box with jQuery UI. Upon entering the site, this dialog box fades in. If the name text field is blank, the box shakes and will not let the user move on. Checking the "I am a mentor" checkbox will sign the user as a mentor. Pressing the send button will fade-out the dialog box, and fade-in the chat content.



This is what we have so far, but it is still a work in progress. The next TartanHacks event will be in the fall of 2013.


The Toaster Heat Dial UI


Rotating this dial sets the output color of toast and determines the length of time that the bread is heated. Users cannot accurately predict the effects of their actions, and this will most likely cause the toast to burn. First time users must then result to trial and error in order to get a desired outcome.

issues2

Key Issues


Conceptual Mapping

The arbitrary numerical scale of 1-9 is not a natural mapping of a toast’s shade. A setting of 5 might not always toast the bread to 50% depending on a number of factors, such as bread type.



Visibility and Unity of Time

To know if the toaster is working properly, users must wait for the heaters to glow after pulling the lever down. There is no immediate feedback. Users are likely to pull the lever down without realizing that the toaster is unplugged



Feedback and Feedforward

Users are unaware of how much their bread has been toasted until after toasting is complete. This results in over- and under-toasting. Users must result to trial and error in order to find the magic setting.

big dial
gray dial

Shade and Time Correlation

The new scale uses a gradient to naturally map the desired toast color. It also connects the toast shade with the heat time by displaying the amount of minutes. Users are able to more easily predict the outcome the toast.

lights

Light to Indicate "working"

When the user pulls down the lever, the light on the dial immediately illuminates to show that the system is on and working.

color control

Progress Meter

After the lever is pulled down, a colored layer moves across the meter to show the current status of the toasting process until it reaches the desired setting indicated by the dial position.

Prototype using CSS3 animations

When I first used this toaster, I almost set off the smoke alarm. It’s a simple dial, so why would this error occur?

The key issues that arise while using this toaster are:


• the arbitrary number scale used to represent toast shade,
• the lack of system process feedback as the bread is toasting,
• and the delayed feedback associated with turning the toaster on.

This redesign provides a natural mapping of the toast shade by using a gradient. Bread does not toast in increments; it is a continuous, gradual process. This new meter also overlays time with shade so that the user can more easily map the two concepts together.

The meter displays the progress of the toast in order to communicate the status of the system.

A light on the dial illuminates to indicate that the system is on and working.

I kept the control as a dial (rather than a slider or an array of buttons) because it affords rotation and has a connotation for setting time. Many toasters that I researched have display screens and multiple buttons for bread types, but I felt the interaction issues could be solved without adding more controls.

Setting Stages


dials

CheckMeOut


This project was completed for a User Experience class along with Kelsey Humphries and Nesra Yannier.

The project began as solving a simple problem: finding what you need in a grocery store. It evolved into changing the experience of grocery shopping. We decided to look at the entire journey of grocery shopping. We, as a group, used a number of research methods to determine where grocery shoppers had the most trouble and how we could fix them. Read more about the process below!

Survey


Concerns when grocery shopping.

piechart

Synthesized information.


I don't want to spend too much money.
I always forget something.
I can't find what I'm looking for.
I feel overwhelmed when choosing between items.
I dislike the store environment and having to spend time there.
I don't know which store has the best prices/selection.
The store does not have what I want.
I want an ethically responsible product
I want more information about the food I'm buying.
I want to buy healthy items without spending too much.
I find it difficult to come up with new recipes.
The price comes out too high at the checkout and feel bad taking out items.

Make Tool


Make Tool

Store layout think aloud exercise.


We gave participants a layout of a grocery store and a Sharpie. We asked them to draw the typical route they take in the grocery store and think aloud as they navigate.

Synthesis


planandgrab

Participants were grouped into two categories: Grabbers and Planners.


Grabbers

Stick to the outside of the store.
Do not come with a list.
Grab the same 'staple' items.
Want to spend as little time in store as possible.

Planners

Come prepared with a list.
Organize the list based on location and menu.
Travel down most of the center aisles.
Prefer to use self checkout.
Like to feel in control of their experience.

Conceptual Model


Concept Model

Current Shopping Experience

A great amount of load is placed on the user.

What the new system should do

The goal is to minimize the load on the user to create a better experience.

Sketching out the features and experiences.


drawings
scanner

Instagram Feed of the process

@russellandrews #myprojects

header

CacheCam


This device is a designed as part of a system which aims to help facilitate physical activity among family members.

The problem


I read in a survey recently that:


  • 48% of parents say that they don't spend enough quality time with their children.
  • 63% of parents claim that they would spend more on technology if it brought their family together.
  • 78% of parents consider watching television to be spending quality time together.
  • 65% of parents consider playing videos to be spending quality time together.

    • Sedentary lifestyles have become a problem in American culture. Children with inactive parents are more likely to become inactive adults, and the cycle will continue. It's time to break the cycle and get families to spend time together in a more active way.

    Have you heard of "geocaching"?


    This video was taken from the official Geocaching website.

    As an activity, geocaching really inspired me as a solution to the problem of inactivity within the family. With further research, I found that current GPS devices are expensive and not designed appropriately for children. I saw an opportunity to improve the device used for geocaching.

    Find and drop caches at any time and place.

    Caches can be both virtual and physical. One of the downfalls of the current geocaching experience is that caches must be approved in order to be found by others. CacheCam allows users to instantly add caches to their local system, and share the location with others.

    Built in GPS and compass to allow for easy navigation.

    An internal compass and the maps API allow for a birds-eye view way of navigating through an environment.

    See a heads-up display of cache locations using the camera.

    Current GPS devices design for children don’t have built-in compass, which is very a simple and common technology used to today. Built-in accelerometers allow users to view the locations of caches right in front of them as a layer on the camera display.

    Share and reflect on memories as a family.

    The camera also acts a way to take and share photos among parents and children, syncing them with other devices. The experience can be recorded and viewed later. Families can print albums of trips that they take. Communities can also hold contests for best photography.

    Press the play button to see how it works.


    Live Instagram Feed. @russellandrews #myprojects

    header

    Nomad


    I worked with Josh Newby and Angela Runge on this project. We wanted to explore the areas of leisure and nature in order see if there is a need for a product that would encourage a transition from the common static lifestyle to a nomadic one. The result is an ultra portable and lightweight shelter that is easy to use and interact with.

    Research


    Inspiration


    At their most primitive levels, travel and exploration can be studied from the nomadic perspective. It was when humans began to settle that the population grew and the disconnection with the natural cycles of the environment began. We began to consider the possibility of being able to sleep anywhere.


    Initial Drawings


    We began the process by sketching out the first things that came to mind. At first, we wanted to incorporate the idea of exploration with bicyclists.


    Maslow's Hierarchy of Needs


    We brainstormed what excuses people have to not want to get out and explore their surroundings. What would prevent a person from camping for a night? We thought about Maslow's hierarchy of needs and determined that the environment threatens humans' physiological needs - the bottom section of the triangle. Once those needs are met, we are able to self- actualize. We focused on a tent in order to satisfy a physiological human need: shelter.

    Visiting REI


    We visited REI to analyze existing products that promote outdoor activity and exploration. We set up a one-person tent, looked closely at backpack details, and learned about the various materials needed in order to make a home-made tent.

    Drawing Iteration


    Prototyping Iteration - paper, cloth, and full scale models


    Live Instagram Feed

    @russellandrews #russellandrewsproject002

    Sales Dashboard

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mattis rhoncus tortor, sit amet tempus orci ornare et. Nullam augue nulla, eleifend in iaculis quis, vulputate in tortor. Mauris vel auctor diam. Sed non leo sed neque molestie commodo. Proin eget nisl eget eros sollicitudin rutrum. Integer tempus massa vitae felis sodales gravida. Nullam convallis eleifend nisi, non porta felis adipiscing sed. Nulla enim turpis, lobortis in aliquet vitae, ornare in tortor.
    Aenean sit amet gravida tellus. In scelerisque ornare ante, quis semper tellus pulvinar id. Nam non elit in magna luctus faucibus et quis arcu. Aliquam porttitor, risus in sodales commodo, velit nunc tristique tellus, vitae convallis est sem sit amet sapien. Proin at volutpat lacus. Aenean erat leo, accumsan id fringilla vitae, auctor vitae purus. Sed in mauris massa. Duis sit amet ligula vel arcu tempor consectetur at at nisl. Suspendisse tristique erat libero, eu tincidunt est. Quisque quis nibh orci, id malesuada lorem.

    header

    Social Collective


    I worked on this project with Shirley Wang and Sun Park. We examined the effects of shopping in store and online. We wanted to understand how each experience affects the value and meaning that the shopper has for the purchased item. Social Collective is a website that is a result of our research. It combines the positive aspects of both shopping experiences together.

    Research


    artifacts

    Artifact Analysis

    After setting up a research protocol, we interviewed research participants, asking them to show us various items that were bought both online and in store. The participants mostly chose items that were connected to memories they had with other people. For example, one participant valued a certain item because he remembers buying it with his mother.



    Walk a mile

    We went to Target, Best Buy, and The Loft and observed shoppers from a first hand point of view. We noticed that most people tended to shop in the clearance sections. We overheard conversations about certain items not being in stock.



    Survey

    We conducted a survey for shopping behaviors. The results showed that even though most people don't consider themselves online shoppers, they tend to value their items purchased online more than in store.

    Analysis


    There are certainly problems with shopping experiences. When shopping in a store, they might not have the item in stock. When shopping online, the biggest problems were not being able to know how a product will fit, not knowing how the material will feel, and paying for shipping costs.

    We concluded that shopping online gives a person a larger variety of options to choose from. To pick one item from a large range means that it would be particularly special to that person, and therefore carry more meaning and value to the shopper.

    We thought the best way to address the above issues would be create an interface that would take the positive aspects of shopping in a store and combine them with the positive aspects of shopping online. We chose to make a website because our research shows that shoppers feel more attached to the items that purchase online.

    Final Design




    Plan shopping trips and events.

    Social Collective allows users to keep a calendar in order to coordinate schedules. Sarah can create a shopping event ahead of time, and invite her mother to shop with her so that they can find the perfect gift for Sarah's father. This is able to be done even though Sarah is 100 miles away from home.

    See what your friends are doing.

    On a user's homepage, a newsfeed shows all of friends' purchases. One of Sarah's father's coworkers sees the newly received blazer and decides to purchase one for himself.




    Connect with friends while shopping

    Social Collective would allow users to chat about their shopping their experiences. A user would be able to see who is online and join them in the same store they are shopping. Once Sarah's shopping event arrives, she and her mother log on to Social Collective and begin chatting. Within the website, they can browse items and decide that a brand new blazer is just what Sarah's father needs.




    Virtual Fitting Room

    The virtual fitting room is a feature of the website that allows you to virtually try on clothing. Through the use of Kinect technology, a user would be able to scan his or her body, allowing body measurements to be recorded in his or her profile. These measurements could then be compared to the real item. Sarah visits her father's profile and compares the blazer to his measurements. She and her mother are able to choose just the right size that would fit him best.

    Materials, ratings, and reviews

    Within the virtual fitting room, users can choose a piece of clothing and view a close up image of the material. Once an item is received, users can rate the item and comment on the quality of the materials. Sarah and her mother are disappointed to find that the blazer does not receive the best reviews. Apparently the color is not true to the image, and the buttons tend to fall off. Sarah and her mother continue shopping at another store, and find a similar blazer that has better reviews.




    Free Shipping

    One of the main incentives shopping online is the amount of deals and coupons that are offered. In order to keep the incentive to use Social Collective, users would not have to pay shipping costs if they shop with other users. Once in the checkout, Sarah and her mother deduct shipping costs and easily purchase the blazer for Sarah's father. Upon receiving his new blazer, Sarah's father reviews the item on Social Collective and uploads a picture of himself modeling it.

    header

    Mitsuko


    Light provides opportunity to improve sleep quality. How can the benefits of a night light be combined with the benefits of a sun alarm into a single form that is appropriate for a child's bedroom? Mitsu ('light') - ko ('child').

    The opportunity


    Circadian rhythms

    The human body has a natural clock that knows when it is time to fall asleep and when it is time to wake up. Sun alarm clocks can help with insomnia, depression, and may even prevent cancer. Researchers have found that different amounts of light produce hormones.


    Natural and healthy

    The sound of an abrupt noise can cause long term heart conditions. Waking up at a certain time by light programs the brain to wake up again at the same time the next day. Increasing light triggers the retina to release of serotonin.


    Just enough light

    A night light provides enough light for a parent to check on a child or retrieve something from the bedroom. An overhead light would disturb a child’s sleep.


    Fights off the monsters!

    Although infants haven’t developed the imagination to be afraid of the dark, there is an age at which a nightlight will put a child’s mind at ease. It’s very important that a child feels safe so that he or she will fall asleep more quickly and sleep for a longer period of time.

    The solution


    Full cycle lighting...

    This is a lighting product that benefits a child’s sleep patterns. The nightlight feature helps the child fall asleep, while the sun alarm helps the child wake up in a natural and healthy way. Existing sun alarms don’t provide the opportunity to help its users fall asleep, and existing night lights do not.


    …for a younger audience.

    In the market right now, there are not sun alarm clocks that are designed for children. Existing sun alarms have very complicated settings and unfriendly designs and interfaces. There is an opportunity to create a healthy lighting product that benefits a child’s ability to wake up that also combines simple interactions with a simple form.

    Storyboard


    Materials


    low medium high highest
    form

    I'm currently in Pittsburgh, PA.

    Contact me

    - russell@russellandrews.net

    Download my resume here