Peek Weather and News Updates

iPhone with a Mockup of the Peek Website

Peek Weather and News Updates

Weather and news updates for long distance remote team members

Client: Peek

Roles: UX Design, Branding, Research, Testing

Tools: Figma, Adobe Illustrator, Maze, Github

Problem Statement

Working from home has been increasingly popularin the last few years. This gives people fewer chances to bond with their team members, causing decreased team morale and team productivity. Peek wants to provide users with easy-to-glance weather and news updates for their long-distance coworkers. The information is general enough to be accommodating to workers without being invasive. Peek can assist in building an empathetic approach to team communication toimprove productivity and collaboration.

Overview

Have users quickly glance or look into weather and news for long distance coworkers. Research and testing was done to understand issues remote workers face and how that impacts productivity. Branding and logo design was created to demonstrate being able to take a quick peek into the outside conditions team member are dealing with.

Research

Research Goals

What are the problems remote workers face with connecting with coworkers
How do weather and news apps present the most relavent informaiton in an easy and fast way

Objectives

How do companies compensate for team bonding when working remote
Learn which weather and news apps have the most dowloads and postive reviews

Direct Competitors

AccuWeather abc7

Weather Bug

Clime: NOAA Weather

The display of temp and forecast is clever/interesting but took too much time to understand and was not consistent with expectations of forecast information

Negative space is a better information divider than the boxed info as I scrolled

Having well-defined sections are going to help the user understand what the site has to offer.

Indirect Competitors

The Weather Channel

Apple Weather

Important to inform the user of credentials and other areas of qualifications.

Having any image or animation should be inspired for not being distracting, messy looking and consistent with the information provided

Google news

Having bolded headlines and correct icons for news will help the user quickly scan and still understand

Summary

Blue was a common color I saw in theweather apps themes. Negative space will need to be used to help separate the text that needs to be displayed for weather and news info. How the information is presented to the user will need to be in a familiar layout; Two of the apps that were researched fordirect competitors had interesting and unique ways of displaying forecast. however it took too much time and some thought to understand the layout and we need the information presented to be recognized almost immediately.

User Interviews

Research Goals

Better understand how our user expects weather information to be displayed and located
How would having this informaiton influence behavior with coworkers
Understand what the user considers important information

Objectives

Learn which weather and news users typically use and why
Learning a time when this information could have been helpful
Understand the personal issues with working with remote team members

What was learned

Most conversations are happening at thebeginning or end of a meeting; special meetings are being planned for non-work related conversations and random workplace small talk is not as casual and happening as often. This can make it hard to feel bonded with co-workers and this feeling could impact cooperation, conflict resolution, and collaboration with and within teams.

Most participants found that having this information would be convenient and beneficial to have for remote workers and would also encourage conversations. Question 4 demonstrates the impact that an app like this could have during unpredicted occurrences and how this can bridge needs and accommodations of workers and company.

User Persona

Emily Thompson

Emily Thompson

Age29

OccupationProject managerGenderMaleLocationNew Haven, Connecticut

StatusMarried, 1 kidsArchetypeAnxious Caregiver

Enthusiastic
Curious
Determined
Thoughtful

Brands

Bio

Since she has been back to the office she has noticed some disconnect with the relationships she has with her co-workers who work in other states remotely. This disconnect even caused some errors and problems in work flow and progress with projects. She knows these are simple and easily fixable problems with better communication and trust between team members. Like many other managers this is the first time she needs to accommodate remote workers from extreme distances along with office workers. She wishes there was a little tool that could help bridge the gap between these two groups of co-workers, help the remote workers feel more connected socially, and have a way to know if any emergencies happen that could greatly effect mental health so work accomidations can be made without the remote worker feeling more stress.

Goals

Stay connected with the new members on her team that are remote
Ease some of the anxieties that come with working from home for her remote employees
Get to know her team members more personally and build a solid base of trust and security

Frustrations

Awkward starts to meetings with new team members from out of state or country
Missing out on little chances here and there that the office provides for workers to chat and bond
Having miscommunication due to outside circumstances ie extreme weather and local tragies

User Flow

The user wants to sign up for a new app that will help connect them to their remote team members. Sign up and add two team members and click into one of the team member modules.

Key

Site Map

Sketching

Thought process of sketching

Quick sketches of the basic layout of Peek and how we could demonstrate a familiar visual for weather and news informaiton.

Low Fidelity Wire Frames

High Fidelity Wire Frames

User Testing

Participants

4-6 Participants between the age of 23-69

Participants were male and female

Goals

Does the user find the information presented is relevant, easy to glance at, and helpful
Learn which features are confusing, unnecessary, or cause hesitation
Observe how the users navigates adding and editing cards, as well as looking into alerted notifications and filter section

Objectives

Observe which path the user takes to create a profile and add users.
How would this information influence users behaviors with coworkers

Prototype

Task

You need to sign up for peek and add team members from the company Crafty, then expand the alerted card

Figma Prototype

Affinity Map

What was learned

Screen 7 had the longest time spent on the page, and 100% of the testers miss-clicked
Changes can be made to suggest the user to the LinkedIn path instead of the zip search box.

User Testing Summary

What was Learned

Screen 7 had the longest time spent on the page, and 100% of the testers miss-clicked
Changes can be made to suggest the user to the LinkedIn path instead of the zip search box.

Initial thoughts of the site were positive; Changes can be made to the start button to direct the user more to sign up. The alert notification caused confusion and needs iterations on UI elements and placement to be more intuitive to users. Having the entire card be clickable and changing how the alert is presented will be areas to work on for a better user experience.

Testers also thought that the information presented was personal enough to be beneficial and not invasive. The alert icon distracted the users from clicking into the filter to view only the alerting cards. The placement of the chevron icon can be moved to the middle to be more noticeable to users.

Iterations

The button was expanded and color changed to match the new colors of the logo. The colors where changed to a deep blue with a raindrop in the P. The picture was simplified to only one with larger text.

Linkdin was add to the find a person page and the inputs were redesign to be consistent length.

The iteration to the card design was made to contain more stories and a forecast instead of just the daily weather. The card was also made to collapse in case you the user wants to see many cards at a time.

A filter option was added to see make it easier to find any alerted cards or locations. Tapping on the alert sign now gives a message to the user about what action they would like to take.

Conclusion

Peek is a company that wants to help coworkers be more connected especially now that working from home is becoming more common. Doing competitive research I found that in Gensler's U.S. Workplace Survey 2020, more than half of the 2,300 workers surveyed have a preference for hybrid working and that 98% of post covid meetings were expected to have at least one remote employee. User research also found that coworkers did have a harder time feeling connected with their remote coworkers. Peek wants to help bridge this gap with providing local news and weather updates for remote workers.

For branding we wanted to give off a friendly and natural theme so I used designstripe illustrations to give more general positive feelings with pastel colors with a primary color of mauve blue. This was to help the natural feel and association with weather. Usability testing found that users felt like the information given about coworkers was just enough to be informative and help start conversations and not invasive or too personal. The overall feedback for peek was positive and users could see using this app in their everyday work routine.

Next Steps

Iterations to the will be made to the problem areas and tested again. More features will be added accomidate feedback