Afiye
Role
User Research, User Interface Design, Front-End Development
Date
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 app Afiye aims to address the numerous problem social platforms have by creating a space that gives users the privacy, intimacy and peace that they deserve.
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.
Phase 1: User Research
We started our User Research by identifying the range of personas our app would cater to. Since families include a mix of all ages, genders, races, etc., we aimed to keep our personas open-ended to accommodate for all. We started by interviewing different generations of family members to understand their expectations of such services, their familiarity with technology, etc.
Screener Survey
This initial survey was vital to understanding our users. It was aimed at understanding family size & dynamics, commonly-used social media to help with competitive research and usage with genealogy apps. Our analysis of the results can be found here.
User Interviews - Concept Validation
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.
User Personas
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.
Journey Map
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.
The contrast of emotions through the journey between someone aged 20 and 60 was stark and it was key we designed a UX which was universally easy-to-use.
Social Media saturated with Irrelevant Content
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."
Concerns surrounding Privacy
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.
Genealogy Apps have poor UX
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.
Phase 2: UI Design
Sitemap
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.
Branding & Design System
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.
Wireframing
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 Sketches
High-Fidelity Mocks
Phase 3: Prototyping
After designing the final wireframes, we recorded all our primary user flows to capture the intended look and feel of the app. This would act as a guiding point for our development further down the quarter.
Onboarding
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
Family Feed
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.
Network & Profiles
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.
Phase 4: Development
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.
Final Solution
Our team was proud of the positive feedback we got at the 2021 Drexel Digital Media Senior Showcase event. Here's our Senior Project showcase posted on Drexel's official channel -
Takeaways
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.
