Define Project Objectives

Onboarding:

• Account for all states with 1:1 aspect ratio and create design mockups that have a vertical video aspect ratio.

Matches / Home Feed:

• Matches in the feed should have vertical video aspect ratio.
• Don't degrade video content of existing videos cropped in a 1:1 aspect ratio
• Remove "2 out of 8 Matches" - replace it with a visual indicator or change copy.
• Allow users to scroll vertically through an individual profile's pieces of content and scroll horizontally between different profiles.
• Making navigating between both profiles and individual profile content clear / intuitive for new users
• De-emphasize the pass button because it is confusing and creates a "negative atmosphere" because of prominence

Match and Self Profile:

• Vertical aspect ratio full screen videos vs 1:1 aspect ratio videos for profiles.
• Refresh the Self Profile UI to match new interface.

Lively Competitive Research

One of the first I did when trying to solve the design problems for this project was to look at how other applications similar to Lively solved similar problems. Some of the apps I tried were Snapchat and Instagram, specifically the Instagram Stories feature.

Instagram Stories Notes:

• Horizontal bar on the top of the profile "story" that indicate how many "moments" in a story. The bar also animates based on the length of each "moment"
• Auto scrolling to the next profile "story" after the previous profile "story" is completed.
• Horizontal scrolling list on top of home feed to indicate how many stories there are to watch

Snapchat:

• Circular pie timer to indicate how moments there are in a person's "story"
• Recently removed auto playing next profile "story" after the previous profile "story" is completed.

Lively Design Iterations

After doing some research I spent some time creating some design interations of the home screen. I wanted to expermiment with different layouts that mainly focused on addressing navigating between profiles and content inside each profile.

Iterations - left to right:

• This mockup has thumbnails on the left side of the screen to indicate the moments in the current profile being viewed.
• This mockup is an immersive full screen with a vertical scrollbar that animates based on the which moment in the story is being viewed. The pass button on this mockup is also suppressed
• This mockup is somewhat of a combination between the first and second mockup. It is full screen but also has thumbnails on the let side of the screen to indicate the number of moments in the current profile being viewed. The pass button has been removed from this mockup.
• The mockup is a carousel type layout where there is a peeking card for the next profile. There are also thumbnails on the left to indicate the moments in the profile story and the pass button has been removed.

Lively Prototypes

After creating the iterations and presenting them to my stakeholders I narrowed down my designs to 2 main layouts. One layout is carousel type layout where each profile is a card and on the homescreen it is clear that there is another profile card peeking to the right of the screen. On the left hand side of this design there is are thumbnails of the "moments" in the profile's story. The second layout is focused on being a full screen and immersive experience. I built these prototypes using Framer and they took about 2 days to complete.

User Interviews / Research

After prototyping the designs, my stakeholders and I decided to run a very ad-hoc and informal user study. Since Lively is only available for users in the Bay Area we emailed some of our users and had 15 people come into the office to try out some prototypes, answer some questions and tell us how they think the app could be improved. During the studies we focused on asking people about navigating between profiles and content in the app, the pass button and some more experimental features that the stakeholders are thinking of adding to Lively.

Handoff Designs

After the user study it was clear that users wanted the pass button to be on the left side of the screen but they didn't want it to be very prominent because it created a "negative atmosphere" within the app. Users also preferred the full screen experience vs the carousel like layout. An insight gained from the user study was that a lot of the people we talked to wanted profile pictures to be the indicator for the amount of matches are in the "queue" for the day. Users were able to understand that they could scroll up and down between the moments in a story. Navigating between profiles wasn't an issue because when a user presses on the like or pass button the screen automatically navigates.