Afiye is an intimate social experience for extended families to share memories and stay connected with each other.
User Research, User Interface Design, Front-End Development
Drexel University (Senior Design Project)
September 2020 - June 2021
The inspiration for this project stems from the on-going Covid-19 pandemic. With many events cancelled, travel bans and displaced family members, we noticed a need for intimate and personal spaces online that popular social platforms failed to provide.
Our project aims at addressing the numerous problem social platforms have by creating a space that gives users the privacy, intimacy and peace that they deserve.
Afiye is a web application that serves as a digital home for large families to stay connected and share memories with each other. It's designed to be a safe space in which family members can share private stories with all, helping them bond and preserve family history.
In order for our project not to be a replica of existing social media like Instagram or Genealogy platforms like Ancestory, we spent a lot of time figuring out which features were essential for families to share intimate experiences/memories with each other that existing platforms didn't provide.
There are 3 main goals for this project:
• Conduct research around families and existing social media/genealogy applications.
• Design a high fidelity prototype that enables families to bond on a deeper level.
• Develop a minimum viable product that highlights some of these feature.
This initial survey was vital to understanding our users. It was aimed at understanding family size & dynamics, social networking and genealogy. Our analysis of the results can be found here.
Our user interviews were based on a rough draft of a web application with features from both social media and genealogy. We spoke to users about how they would interact with such features and the relevance of each in connecting with their family members or sharing memories.
After reviewing the survey results and user interviews, we crafted 3 user personas based on the differences in age and needs that were brought up during research.
To create a user centered design solution, I created a user's journey map based on previous interviews and usability testing. In doing so, I could re-evaluate the design concept and features holistically, and make sure that users' goals are achieved.
Our research on current social media platforms and genealogy applications brought to light the following:
Many social media platforms are littered with content that users find irrelevant. These include targeted ads, sponsored posts and influencer marketing. These types of posts are frequent and hinder users from seeing and interacting with people they know and care about. As one of our users mentioned - "It seems more like a marketplace than a social media platform."
Other users made mention of privacy, virtually anything posted on social media is public and accessible by any one anywhere in the world. Users are thus unable to be vulnerable and share intimate/personal memories with their loved ones.
Lastly, genealogy platforms are focused more on the details of a persons background such as where they come from (their roots) and their connection to other people. They don't focus on who the person was, their values, the things they love and have done in their lives, etc. These are the small moments we want our users to cherish using our app.
In between wire-framing, I also helped designing the visual identity for afiye. We chose the color purple to differentiate us from popular social brands and crafted a unique logo that symbolizes connection and togetherness.
We developed a site map before we developed our wireframes in order to simplify our creative process, trim off any unnecessary pages, and keep what’s important to users.
Each member of the team was tasked with sketching out wireframes for the project based on how they perceived such an application to work. With our creative juices flowing we developed several sketches for evaluation, and eventually progressed towards mid and then high-fidelity screens.
Low-Fidelity Wireframes
We created a simple and straightforward on boarding experience for users to quickly get into the app and start sharing memories. This short video illustrates the process of creating a tree from scratch and browses through the interactive family network feature
The family feed is where the entire family gets to see what is going on in whose life. We decided to keep things simple leaving only a comments section for relatives. We found that likes create competition and the space we curate for families is one that is more about expression and sharing.
The family network is where one can browse through all the family member he/she has and learn more by visiting family member profiles. We included a tree view for the nuclear family to illustrate the family hierarchy.
As a minimum viable product we decided to build a web application using our mid fidelity wireframes. This application was developed in HTML, CSS and JavaScript.
We also stumbled on a graph database management system named neo4js which allowed us to build the interactive family network that is showcased above. Our time, tasks and code guidelines were arranged using a GitHub, this allowed effective collaboration on this project.
Using what we have created in Figma and our high-fidelity wireframes, we converted all of the elements into code. The blessing of the wireframes is that the sizings and positions of elements were already prepared using Figma so pushing on the live site using Sass was a relatively easier and successful process.
This was the team’s first foray into such a complex backend system. Many mistakes and challenges happened along the way to our final product. Over the course of this project, our greatest success is that we demonstrated our adaptability. We developed substantial direct experience in NodeJS, MongoDB, and Neo4j.
Visit the live website at: www.afiye.io
The entire team was surprised by the positive feedback we got at the Drexel Digital Media Senior Showcase event earlier this year. We however, decided to end the project at this stage as many of us are starting new careers and moving countries upon graduation.
Here's our Senior Project showcase posted on Drexel's official channel -
As a UX designer with little coding experience, I took on this project as an opportunity to learn more about front end development and develop my skills in this regard.
I also loved researching into the long term effects of social media on the minds of growing adults. Some of the information that surfaced allowed all of us on the team to re-evaluate our personal relationship with social media and its impact on important relationships.
