Family & Friends App
iPhone & Android App, User Experience and Interface Design, Prototyping Adobe Xd, Photoshop, Illustrator |
Challenge
Wondering when your kids left school, arrived home, whether parents are nearby, or where friends are watching the game tonight?
– “Sometimes is difficult to call everyone to find out. I need an app where I can set a notification for when they leave or arrive at a specific location, as well as see where are they and why are late for dinner again.”
Research / Competitors
I’ve started the UX process by doing market research among the top three competitors to try to understand their existing products and from users’ reviews on the type of features users are most interested in as well as any possible issues with the current technologies. After a side-by-side comparison, I had a comprehensive idea about what are the most demanded features and enough details to put together my personas which are presented below.
45% 20% 30% 5% of the users were asking for features like location history as well Google Maps direction. of the users were looking to be able to add separate groups for family and friends of the users had experienced hight battery usage, even when not using the app of the users complained about intrusive ads and confusing plans
Personas
Based on the research outcome, I was able to identify 3 personas that would be the most likely to use the Family & Friends app. The personas gave an overview of the user’s attitudes, goals, and motivations for when an app like this will be useful for them. I didn’t get too elaborate with too many details at this point because I only had preliminary data, and I wanted to allow room for the personas to evolve as I find out more during testing.
User Journey Map
Using the primary persona, Sophie whose mother is single, I created a user journey map to document what she might be doing, thinking, and feeling along each stage of her discovery and using the app experience. I also used this to identify any pain points and opportunities to keep in mind when designing the app.
Information Architecture
In the next step, my goal was to put together the Information Architecture Map which formed the skeleton of the app. A powerful IA is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. After putting together the AI and understanding the navigation and main connections between each feature I was able to move ahead with the wireframes.
Wireframes
As soon as I had a better understanding of user needs, and all the necessary elements at each stage of the app I started wireframing out the various user flows to start testing and validating my assumptions. Knowing that the main goal of the users will be to see the location of their friends or family relatives I dedicated the top half of the screen for the map, where each user was represented by a colored pin featuring their profile photo. Below, I added a space for the selected group and its members offering options to set reminders for leaving the current location, for when they will arrive home, or make a direct call. At the bottom of the screen, I listed all the groups featuring the main photo to be easily recognizable and selected.
High Fidelity Mocks
With all the blueprints and the content map ready, I started the high-fidelity mocks where I’ve applied a futuristic look based on simplicity. During the process, I’ve also defined style-guide, common elements, interaction, and transition animations, which I’ve emphasized more in the available prototype below.
Working Prototype
Creating the interactive prototype served as proof of concept of the design solution, serving as the starting point for requirements validation, conceptual design validation and a basis for iterative development activities. The prototype was also used for the final user testing, usability and preference studies I conducted before releasing the project to the development team.
– Prototype direct link, for Mobile or Full Screen experience:
Please Enable All cookies for a fast and stable prototype experience.
