Fireside
Bringing friends closer together through curiosity
RESPONSIVE WEB • DESIGN FOR SOCIAL
OVERVIEW
Good questions bring people closer
Fireside is an early-stage, private social platform set out to help people deepen existing relationships of all varieties with a series of thoughtfully curated questions. At the duration of this project, Fireside was an email product in Alpha trial with a batch of 35 users. Each user belongs to one circle, and each circle is served one question to answer each week, and responses are shared once everyone has provided an answer.
CHALLENGE
How might we create a scalable and inviting space from scratch for users to revisit their thoughts and engage in conversations?
ROLE
Design Lead on a team of UX and visual designers. I also focused on designing an immersive homepage that highlights key interactions.
SCOPE
Research, site architecture,
UX design, feature prioritization, visual design, branding, prototyping, testing
PROJECT GOALS
Create Fireside Beta—a scalable, engaging and interactive MVP.
Design for asynchronous communicators who converses at their own pace.
A new private social network that encourages retention and sign-ups.
RESEARCH
People reply on several mediums to keep in touch
As Fireside is a zero-to-one product, we set out to understand the intents and features of other products in the market—6 competitors and 38 comparative apps in 7 different verticals—to identify common patterns and best practices for usability.
In addition, we interviewed 5 Fireside users and 7 other people to discover their insights on their preferences and habits in keeping in touch with friends, romantic partners, and family near and far, as well as their perspective on using digital tools for communication.
Our market and user research helped propel us into the ideation process through the discovery of the following:
Common and necessary features for the platform were determined.
Prioritized features based on overall research and product roadmap.
High-level user goals and behaviors were surfaced through user interviews.
INGREDIENTS OF A SOCIAL APP
Users need clear access to their circles for recurring engagement.
Statuses of answers give users an idea of progress and shared interactivity.
Users depend on notifications so they won’t miss new activity from friends.
JOB STORIES
Maintaining relationships takes thoughtful action
Results from our user discovery interviews were split into two groups—people who prefer synchronous communication and people who prefer asynchronous communication when having a deep conversation.
Since the value proposition of Fireside in bringing people closer through guided conversation is more beneficial to someone who prefers asynchronous communication, we focused on this persona and their key job stories below in our design process.
IDEATE
Designing a space for conversations and reflection
We plotted the common features revealed in our market research with existing and potential users insights on a 2x2 grid, and prioritized them based on what is most important to users and what features are relevant to Fireside Beta.
With a list of features in hand, we started the ideation process by mapping the key screens that are needed before sketching. Knowing that Fireside could potentially be information heavy in nature, we also explored different densities in layout that is needed on each page, to avoid information overload.
UI Sketches from less dense on left to most dense on right.
BUILD
Making My Circles fit for different social capacities
One of the most important pages in our design is the My Circles page, as it is also the homepage. We worked through 3 major renditions in lo-fi stage in order to satisfy visual, scale, and usability constraints:
1. Circles within circles may be problematic
The founders of Fireside really liked the sense of depth in my design. However, the look of having circle avatars within a main circle drew up other imagery, and the overall design could be better structured.
2. A carousel could be confusing to user
As we got further into designing the My Circles page, questions came up on how the carousel flows, and how it would work in edge cases. We continued to discuss and work through this issue with the founders.
3. Good for scale but client liked the former
As a last option, I also designed a grid version of this page that highlights one top task. Even though this is easier to manage, especially for power users, having only one spot to call out top action was too little.
Ultimately, the founders of Fireside saw the value of the carousel as it would also allow them to push new actions to the front for users to engage in down the road. The second iteration was advanced to hi-fi. In the final design, functions of the carousel and grid views are separate: the carousel only shows circles with action needed, and grid view shows all of users’ circles in the order of latest activity.
OUTCOMES
Eight iterations, a new way to connect with friends
As our design is a platform from scratch, made sure layouts of all pages were nailed down in lo-fi, and all copy was refined before working in hi-fi. Here’s how each of the top user needs were incorporated into the final deliverables.
Social App Ingredient 1
Users need clear access to their circles for recurring engagement.
Objective: How might we design the platform so users can easily access all the circles they belong to, and be able to pick up on conversations where they left off?
Solution: A homepage with top actions to take, grid layout of all circles for the power user, access to their circles from all parts of the site. For mobile, we opted for a simpler carousel, instead of overlapping circles, as swiping on web apps are not as fluid.
Social App Ingredient 2
Statuses of answers give users an idea of progress and shared interactivity.
Objective: How might we reinforce the idea that answering Fireside prompts is a shared activity, so users get an update and have a sense of progress while waiting?
Solution: Clear indication of which circle users are sharing their responses with, progress update by member of a circle with personal language. This progress box also worked as a basic circle management feature that helped eliminate a separate member management page, which is not a necessity for the MVP, and can be built later.
Social App Ingredient 3
Users depend on notifications so they won’t miss new activity from friends.
Objective: How might we design notifications so it doesn’t become an annoyance and they end up being not useful?
Solution: Notification ring in Fireside orange to show new activity in circles, accessible notification menu that highlights key activities such as new questions or new responses, user controls of notifications in My Account.
VALIDATE
People warmed up to Fireside
We went out to the field one more time and tested our mobile prototype with 11 new people to gauge their comprehension of what Fireside is. The results were favorable, 8 out of 11 participants understood what Fireside is for without onboarding.
Validation test results
Also from validation testing, we found that there were a couple of features that did not appear to be clickable to users, so we refined the look of the sort filter in the Threads page, and made a button for seeing your circle’s progress on a question. These were good findings because not fixing these issues would result in missed opportunities for engagement.
REFLECTIONS
Fireside wanted a dashboard, but a site is what was needed
There are many opportunities for creativity when designing a zero-to-one product. However, the same reason also presents challenges, such as a lack of baseline user behavior data to guide design. Fortunately, our research on comparative products (e.g. mindfulness, journaling, workplace feedback, dating, other social sites etc.) served as a solid foundation for designing a familiar interface that people already know to use.
At handoff, there were eight features in the Beta design that have yet to be implemented. We prioritized these features for the client, based on discoveries from user interviews, usability and validation testing, so their engineering team can build most valuable parts first. In hindsight, as lead, I could improve the situation by having one more detailed walk through with the clients on the features, so everyone is aware of this sooner to lessen the engineering backlog.
Next time, evolve design with more data
As Fireside is in its infancy, it was a challenge to design for zero to infinity as the average number of circles and how many people each circle are unknown. In Alpha, users are allowed to be in 1 circle only with 6 people max. With our design, more metrics can now be generated. Down the road, having more data, and info on user habits would allow us to evolve design and adapt it to real user behaviors.
This design is currently being built. Fireside also has plans to build a native mobile app shortly after, so I am curious as to how well our mobile web design can be adapted in React Native. The layout of our platform was designed to be relatively simple for best responsive results, but seeing it turned into a native app would be the ultimate test of our design’s fluidity!