Redesigning Weave Networking App

 

The Challenge

Brief: Redesign a part of the experience.

Duration: 2 days (March 2016).

Group size: 1 UX designer.

My role: User Research and Interaction Designer.

Tools: Adobe Experience Design.

Design Process: Created a persona, a scenario and redesigned an experience.

Summary 

Desired Outcomes:

  • Redesign an experience in the Weave App that makes it easier for people to arrange a meeting.
  • Deliver wireframes of redesigned experience.

Process:

  • Created a persona to have an idea of who this redesign is directed to.
  • Created a scenario in which this persona could see herself using the App.
  • Designed wireframes.

Insights- Decisions:

  • Wanted to create a simple way of people meeting up through invites.
  • Creating a persona helped direct the changes in the App.

Results:

  • The prototype needs user testing to see if users would discover the new feature and would use it.
  • Delivered wireframes. These wireframes don't look finished, they need more visual design.

Lesons Learned:

  • It doesn't take too long to redesign a part of an experience, but testing it is important to see if users would appreciate the redesign or if it would be useless.
  •  An engineer's opinion is always useful to know if what you are designing is possible to code.

Case Study

USER'S PROBLEM:

It is difficult to save the specific day and time using Weave App.

SOLUTION:

Add the possibility of creating and sending invites on the App.

PERSONA:

I created a persona to have someone in mind when redesigning the flow.

 
 

SCENARIO:

After creating a persona, I decided to create a possible scenario:

  1. Lucy has heard of this new networking App called Weave. She downloads it on her phone.
  2. She goes on Weave and finds Helen Marti, the CEO of a company. They arrange a meeting.
  3. Lucy and Helen meet for coffee to talk about startups.

NOW VS. REDESIGNED:

These are the wireframes for starting a conversation in the current Weave App.

These are the redesigned wireframes including the new feature of creating an invite in the menu.

DESIGN DECISIONS:

Menu: When pressing to see more options, the menu should come from above instead of bellow to avoid that the keyboard hides it. To be able to see the menu when the keyboard is hiding it, it is necessary to get out of the conversation and get back in and hit the menu button before typing.

In the current version it takes three screens with the keyboard present to be able to see the menu, with the redesign, even if the keyboard is present, it only takes one.

Incorporating new feature: Since it is a networking App, I decided to incorporate a feature of "Create Invite" to make it easier for matches to arrange a meeting.

OTHER THINGS TO IMPROVE IN THE APP:

  • Weave App has the feel of a dating App since it has incorporated the "Tinder swap". This may feel uncomfortable for people using it for the first time.
  • For a networking App it doesn't make much sense that matches expire, as people are not constantly using the App and they might forget to talk to a person that they really wanted to meet.
  • When writing phone numbers, it doesn't recognise it as a phone number thus it is difficult and time consuming to save numbers.
  • Filters are not very visible, they are hard to find.
  • There are no push notifications so it is difficult to know when someone has sent a message.

NEXT STEPS:

  • User testing:
  1. See is the "create invite" button is intuitive to find.
  2. Find out if the new feature would be useful for people.
  3. Creating a prototype to test it easily.
  • Once tested, add visual design.

 

 

 

 

Web App to Help at Risk Teenagers Coping Strategies

 

The Challenge

Startup Weekend Education began with open-mic 60-second pitches Friday night that resulted in the formation of small teams around the best, most viable concepts. Teams spent Saturday and Sunday focusing on validating their idea by talking to users, designing/building prototypes and building a business plan with the help of experienced coaches from the education market. On Sunday, teams presented and demo their education products and receive valuable feedback from a panel of expert judges. 

The chosen pitch:

-Problem: Stress and exposure to violence impact learning, decision making, and students’ emotional responses.

-Solution: Create a platform that teaches at risk teenagers coping strategies, resilience, and mindfulness, and it gives teachers critical information about how to best support their students.

Duration: 54 hours (Nov 2015)

Group size: 6 (2 developers, 2 educators, 1 business woman and 1 UX designer)

My Role: Created personas, Storyboards, and Wireframes.

Tools: Sketch

Classification: First place

Summary

Desired Outcomes:

  • Validate the idea through user research (surveys, interviews, personas and scenarios).
  • Business plan using the business canvas model.
  • Creating wireframes and a prototype based on the previous research and test them on users.

Process:

  • Created surveys and interviewed people to validate that people would benefit from the product.
  • Created personas and scenarios to have a better sense of who would benefit from this product and make it more personal.
  • Created wireframes based in design decisions taken as a group.

Insights- Decisions:

  • As we validated the idea through surveys and interviews, we decided to proceed with the original idea and not change it.
  • We decided as a team that the developers would start with the teacher's view of the product as it was very simple and didn't require many design decisions.

Results:

  • Collaboration, creativity and passion for the idea, contributed to winning the hackathon.
  • We delivered wireframes because we didn't have enough time to create a working prototype.
  • As we didn't have time for testing the wireframes, user testing along iteration and developing the platform are included in the next steps of the process.

Lessons learned:

  • Working in such a short period of time, you really need to be collaborative and flexible with the team, and rely on each others strengths.
  • Every aspect of the process is important to validate a new idea. Business plan was very important to determine the value of the idea. 
  • An idea can get very far in a short period of time with the right team.

Detailed Case Study

SURVEYS & INTERVIEWS

We created surveys and interviewed people to validate the idea that people in the education sector will benefit from this product.

We distributed two kinds of surveys. One for students and one for teachers:

-Students: We wanted to validate the hypothesis that feelings affect students' learning abilities.

-Teachers: We wanted to validate the hypothesis that if teachers had daily data about students' current emotions it would impact their teaching and the way they implement their lessons.

We surveyed 27 students and 23 teachers and both hypothesis were validated.

Students:

Teachers:

BUSINESS PLAN

We analysed if the product would be viable business wise through the business model canvas:

PERSONAS & EMPATHY MAPS

We created personas and empathy maps to get a better sense of who would benefit from this product:

 

STORY BOARD- DEFINING THE PROBLEM

We created a storyboard to show an example of a day in Darin's life and how circumstances affect his ability to concentrate in class and learn.

Screen Shot 2015-11-27 at 11.25.34.png
  1.  In the morning, Darin, walks his little sister to school. To get there they walk past the police tape of last night’s murder.
  2.  When he arrives at school, another student makes a crack about his older brother serving a 10-year sentence.
  3.  Five minutes later he walks into the classroom and the teacher is demanding 100% on task on the Biology Do Now. Of the 30 kids his head is down, he’s not working and the teacher redirects him to which he reacts “this doesn’t fucking matter.”
  4.  Detention. Through no one’s malicious intention, Darin has entered a downward spiral and is effectively checked out for the period and possibly the day. Darin is more likely to fall behind, be suspended, be one of the 19% of students who doesn’t graduate high school.

DESIGN DECISIONS

We took some of the design decisions as a group. We categorised the emotion words that the students choose into 4 main groups, which we map to best practice interventions pulled from research-backed resources and functional behaviour analyses. The list of feelings came from the survey to students.

 

WIREFRAMES

As we only had a weekend to do some user research and come up with a design solution, we designed simple wireframes that help the students concentrate with no distractions.

Darin's view:

  Home Page- Darin logs   in to the web app and gets   his lesson for the day.

Home Page- Darin logs in to the web app and gets his lesson for the day.

  He   first   gets a guided mindfulness activity that helps   him focus on the present moment and develop   coping strategies.     Mindfulness   has been shown to increase sustained attention, emotional regulation, and problem-solving skills – non-cognitive skills that are better predictors of academic success than IQ.    Mindfulness programs in schools have also improved attendance, and decreased behavioral incidents and suspension rates.

He first gets a guided mindfulness activity that helps him focus on the present moment and develop coping strategies. Mindfulness has been shown to increase sustained attention, emotional regulation, and problem-solving skills – non-cognitive skills that are better predictors of academic success than IQ.

Mindfulness programs in schools have also improved attendance, and decreased behavioral incidents and suspension rates.

Depending on the day, Darin then gets either a journaling activity, or a brief, interactive learning tidbit about the brain+body system to increase the relevance of the mindfulness strategies he’s learning.

 
  Finally, Darin ends each activity with a quick emotion check in.   We have built a prototype this weekend of this functionality.   These words come from the survey of 20   students who told us the emotions they often feel in school that they wish their teachers knew, so that they could feel better supported  .    This is not only is a part of Darin’s emotional learning, but the   teacher then also gets a real-time, at a glance view of her students’ emotional state.

Finally, Darin ends each activity with a quick emotion check in. We have built a prototype this weekend of this functionality. These words come from the survey of 20 students who told us the emotions they often feel in school that they wish their teachers knew, so that they could feel better supported.

This is not only is a part of Darin’s emotional learning, but the teacher then also gets a real-time, at a glance view of her students’ emotional state.

 

Beth's view:

Beth sees a dashboard of her students emotional response. There are 4 colours for the 4 different groups of words previously categorised. Now, Beth knows Darin is feeling unusually upset and reframes her approach to check in 1 on 1.

The whole solution enables teachers to integrate mindfulness and social-emotional development into their classroom with no additional prep time, and without school’s requiring external mindfulness instructors.

CONCLUSION

As my first and only experience in a hackathon it was very intense, but enriching. We had a very balanced group and worked very well together. There was not much time to make decisions so we all rely on each others abilities. We sometimes worked together and sometimes individually. Being able to develop the idea as a group was what helped us succeed and win 1st place.

The next steps that we are working on are:

  1. Get funding
  2. User testing on wireframes and final prototype
  3. Iterate on previous design
  4. Develop the platform and test it in schools
 
 

Prototyping Travel Web App Based on Geocaching

The Challenge

Brief: Rand McNally wants to explore geocaching as a possible new digital industry

Duration: 2 weeks (Oct 2015)

Group size: 3 UX designers

My role: User Research, Contextual Inquiry, and User Testing (+ Visual Design).

Tools: Sketch and Invision.

Design Process: Double Diamond

Summary 

Desired Outcomes:

  • Discover how Rand McNally can utilise their wealth of maps and atlases with a game App. 
  • Research and analyse if Geocaching is the best way to utilise that data. 
  • Deliver a working Prototype.

Process:

  • We surveyed travellers to learn more about how they travel (alone/someone else), and to see where they get the information about their destination.
  • We did contextual inquiry. This helped understanding what Geocaching was and how the user felt. My role during this activity was to be the user, while my group members took notes of how I felt during the process.
  • Created a User Journey map to highlight the opportunities that we could later include in our design.
  • Designed wireframes and prototype after doing design studio and user testing.

Insights- Decisions:

  • Geocaching has a very small market and most of the users are travellers.
  • Dismiss the idea of of creating a Geocaching App, but incorporate some of the elements of Geocaching in the App.
  • Since Rand McNally is an Atlas company, create an App for travellers that uses their health of data. 

Results:

  • We did a lot of user research to understand the problem and come up with a creative solution. 
  • We delivered a working prototype. This prototype needs more iteration on the menu and some of the screens.
  • Users were very satisfied with the idea of a travel App that creates an itinerary based on the user's interest.

Lesons Learned:

  • Going Geocaching helped us understand the user's motivations and goals. Contextual inquiry is very important when you want to fully understand the experience.
  •  Since we took the decision to not go with Geocaching as the solution, creativity was key to achieving our goal.

Detailed Case Study

Discover

WHAT IS GEOCACHING?

Location based real life treasure hunt. User goes on the website or mobile App, gets the GPS coordinates of the desired cache, and goes on to find the cache. Once the user arrives, he/she logs virtually, manually or both. The user is able to accumulate logs.

EMPATHY MAP

We created a presumed persona in order to develop an empathy map. This persona is a young traveler who likes to travel on her own. The purpose of this empathy map was to continue our research to discover more about people who like to travel.

SURVEY (65 RESPONSES)

To get answers to our questions about travellers we developed a survey. The main goal of the survey was to find out how people travel (alone, with children, etc.), if they use travel guides and why do the use them.

Here are they key insights:

 Most people travel with other people.

Most people travel with other people.

 Most people use a travel guide when they travel.

Most people use a travel guide when they travel.

Main reasons why people use travel guides:

  1. Activity Recommendations
  2. Food and Drink
  3. Historical Information
  4. Itinerary Recommendations

CONTEXTUAL INQUIRY

We went Geocaching using the App "Geocaching" to understand what it was all about:

 
 

INTERVIEWS

We interviewed 7 different people to see how they felt about Geocaching. We got different opinions such as:

“I always use the compass feature on my phone to find north before I start trying to walk somewhere.”

“People ask if this is where they can find the geocache all the time, but it’s not in here. I hope they find it.”

“My favourite part is the hunting part, following the GPS, and looking around carefully like a detective looking for clues.”

AFFINITY MAP

After interviewing people and doing contextual enquiry we wrote down in post-its what we have heard and experienced about geocaching. We created an affinity map to identify the different patterns.

 
 

Key Insights:

· Disruptive to businesses

· Navigation is confusing

· Disappointing experience

· Activity for travellers

· Good feedback along the way

Conclusion: The hook for geocaching is the searching to find something. For our design solution, we can include elements of geocaching and leave some behind.

 

Define

RAND MCNALLY'S PROBLEM

Increase digital product presence while making the most of their existing data.

USER'S PROBLEM

Wants an easy, and fun way to discover, and explore a travel destination.

SOLUTION

A travel app that creates an itinerary in quest format, which utilises Rand McNally’s wealth of data.

REDIFINE PERSONA

 
 

USER JOURNEY MAP

After defining our main persona we did a user journey map to see the opportunities of features to include in the App:

edwinaUJ.png

 

Design

COMPARATIVE RESEARCH

We did comparative analysis to get some ideas for what the design would look like. We incorporated features from these 3 Apps (Spyglass, Tinder and Two dots).

SCENARIOS

We also considered the scenarios in which Edwina and Edgar could find themselves in to have a better understanding of the possible uses for the App. 

IMG_3647.PNG

1. Edwina has arrived to SF with her boyfriend Edgar and they want to explore the city together.

2. Edwina captures memories while she is exploring San Francisco.

3. Edwina wants to relive her journey of San Francisco when she is back in Australia.

SKETCHES

After we finished doing comparative research, setting the different possible scenarios and taking into consideration the opportunities of the user journey map, we did a couple of rounds of design studio and completed the first sketches.

WIREFRAMES & VISUAL DESIGN

We used Sketch to digitalise the wireframes that we had previously designed. We took some design decisions based on the User Research previously done. Here are our most important interaction screens.

STYLE GUIDE

USER TESTING

After having the first prototype ready we did some user testing with 6 different people to get an idea of wether or not the App was intuitive and easy to use. Some of the feedback we got was:

- Include progressive feedback every time an action is done

- Show where you are in the map.

- Confusing.

- Users had problems using Hours/Places/Days.

- Have the option of “save for later” referring to the destinations.

- Get some kind of rewards along the way- gamifying the experience.

 

Deliver

FINAL PROTOTYPE

For our final Prototype we used Invision to show how the App works.

Task: Edwina visits San Francisco and wants to create a quest based on her interests.

 

NEXT STEPS

We thought about the next steps in order to make Travel Quest a better experience for the different users.

  1. Create another persona (family).
  2. Incorporate augmented reality in the App.
  3. Translate to different languages
  4. Have the option of sharing data through bumping the phone. 
  5. Add different rewards along the way so the user feels more engaged.
  6. Being able to share the experience in social media.
  7. Iterating previous designs.

CONCLUSION

The challenge of this project was that the brief was very broad and we had no restrictions for the solution. Having so many options give us the opportunity to explore different solutions through creativity. Our group went from not knowing what geocaching was to creating a design solution for travellers which included elements of geocaching. 

 

Web App Prototype for Making Social Dining Easy

 

The Challenge

Problem: Planning social dining is difficult for groups of people because some people have dietary restrictions including food allergies (wheat, seafood, etc.) and special diets (vegetarian, vegan, etc.)

Duration: 2 and a half weeks (Nov 2015)

Group size: 3 UX designers

My role: Participated in user research, created the first iteration of hi-fi wireframes using Sketch and created the final prototype using Invision.

Tools: Sketch and Invision

Design Process: Double Diamond

Summary

Desired Outcomes:

  • The validated target users- which would be the primary people who would experience this product.
  • User journey maps - To show Nibble’s opportunities to resolve each persona’s pain points in their experience in planning social dining events.
  • Interactive prototype- to visually showcase each persona’s activity with Nibble.

Process

  • Evaluate and decide on small casual dining groups vs. large corporate social dining groups.

  • Validate the hypothesis, narrow down the scope.

  • A lot of iteration on the paper prototype after doing user testing.

Insights- Decisions

  • The results from the survey revealed that people with dietary restrictions care more about their food choices, but people with no restrictions also care. 
  • We redefined the problem to narrow down the scope of the target audience.
  • We did a lot of iterations on the on boarding experience to make it as easy as possible.

Results

  • We achieved all the desired outcomes (Validate target users, User journey maps and an interactive prototype) and the client was satisfied.
  •  We ended up considering the large dining groups as a secondary user for the same App.

Lessons Learned

  • Always try to narrow the scope as much as possible; the more specific the product is, the better the target audience is defined, the clearer the user goals are.
  • Working collaboratively during the several rounds of design studio, helped us incorporate every element that was necessary to the final design.

Detailed Case Study

discover

OUR APPROACH

We started by Narrowing our scope. We understood that we needed to have a focused starting point. We chose to begin in San Francisco because of proximity (we are able to talk to people in person), and also because San Franciscans are known to be early adopters.

The second step to our narrowed scope was choosing a setting for Nibble: casual vs. corporate. We chose the casual social dining route because of frequent usage. We then were able to conduct more focused research in order to test our hypothesis and  set our design direction.

HYPOTHESIS

People with dietary restrictions care more about their food choices than people who don't have dietary restrictions.

SURVEYS AND INTERVIEWS

To validate our hypothesis we created surveys and interviewed 6 different people. Here are the key insights:

Our hypothesis was validated.

define

REDIFINE PROBLEM

Many San Francisco locals have dietary restrictions and find difficulty in planning and participation in social dining events.

SOLUTION

Design platform to make group dining easier and more accommodating for everyone's dietary restrictions and preferences. 

PERSONAS & USER JOURNEY MAPS

We created personas to have a better perspective on our design decisions. We created journey maps to show how Nibble improves the process of planning social dinning:

Brenda

 

Lily

 

design

DESIGN STUDIO & PAPER PROTOTYPE

We did design studio to get sketch our ideas. After several rounds, we combined the best ideas to create a paper prototype. 

 Design studio

Design studio

 Paper prototype

Paper prototype

USER TESTING

We tested the paper prototype in 6 different people. We used the feedback to create an easier and better experience.

WIREFRAMES

Once we had tested the lower fidelity wireframes, we created higher fidelity wireframes using Sketch.

Brenda's Wireframes

  INVITATION CREATION    Brenda can easily invite her friends’ who aren’t current Nibble users, to her event through different platform.    Planning is one of Nibble’s Key opportunity areas.    - It's difficult to figure out where to go because everyone has different preferences and restrictions.    Nibble provides a GROUP TASTE PROFILE so planners can make informed decision.       -It shows the group’s varying levels of preferences, restrictions, and allergies    PLANNING    Since Brenda’s group members haven’t fully filled out their Nibble preferences, her profile isnt complete.    -She still has trouble figuring out where the best place for her group would be.    -To help her out, she is able to send out a cuisine or restaurant poll to better fill out the group profile.    CONFIRMATION    The poll results help to better fill out the group’s profile; n  ow seeing this she can make a more informed decision.    Based on the poll results Nibble gives Brenda the option to view a curated list of restaurants based on her updated Group’s profile.      ATTENDING     She can go through the list of relevantly recommended restaurants. She can   pick one that best accommodates her group and send them an invite.    

INVITATION CREATION

Brenda can easily invite her friends’ who aren’t current Nibble users, to her event through different platform.

Planning is one of Nibble’s Key opportunity areas.

- It's difficult to figure out where to go because everyone has different preferences and restrictions.

Nibble provides a GROUP TASTE PROFILE so planners can make informed decision.

 -It shows the group’s varying levels of preferences, restrictions, and allergies

PLANNING

Since Brenda’s group members haven’t fully filled out their Nibble preferences, her profile isnt complete.

-She still has trouble figuring out where the best place for her group would be.

-To help her out, she is able to send out a cuisine or restaurant poll to better fill out the group profile.

CONFIRMATION

The poll results help to better fill out the group’s profile; now seeing this she can make a more informed decision.

Based on the poll results Nibble gives Brenda the option to view a curated list of restaurants based on her updated Group’s profile.

ATTENDING

She can go through the list of relevantly recommended restaurants. She can pick one that best accommodates her group and send them an invite.

 

Lily's Wireframes

  INVITATION CREATION    Being invited to the new platform is easy and engaging.          -  Lily receives text from her friend Brenda, which gives it a personal touch.     PLANNING     Lily feels involved   in the planning process;   Nibble allows her to input her preferences and restrictions.      CONFIRMATION     She sees that her preference were considered;   Nibble now makes her feel like her input was valued.    ATTENDING    Now that she is a Nibble User, she has a better way of looking for restaurants and planning events taking into consideration her dietary preferences and restrictions.

INVITATION CREATION

Being invited to the new platform is easy and engaging.

    -Lily receives text from her friend Brenda, which gives it a personal touch.

PLANNING

Lily feels involved in the planning process; Nibble allows her to input her preferences and restrictions. 

CONFIRMATION

She sees that her preference were considered; Nibble now makes her feel like her input was valued.

ATTENDING

Now that she is a Nibble User, she has a better way of looking for restaurants and planning events taking into consideration her dietary preferences and restrictions.

Deliver

FINAL PROTOTYPE

We used Invision to walk our client through the final prototype. 

The task: Brenda invites Lily to a dinner event, she creates a poll to have a better understanding of the group profile// Lily receives an invitation from Brenda, she accepts and creates her own profile. 

 

CONCLUSION

All of our goals as a group were met. Our client was satisfied with the final product, understanding that the next step will be developing the Web App. More user testing once the App is built will be necessary to keep improving the experience of, not only small group dining, but also larger groups (weddings, conferences, etc.).