UX UI DESIGN | PERSONAL PROJECT

FACEBOOK

SMART WATCH APP

ABOUT:

The project involved creating a usable concept for the popular social network as a result of a readers comment regarding how something like this could be done, which he posted on my article about “Designing a UX for wearable devices” over at usabilitygeek.com

REFERENCE: Personal Project

ROLE: UX UI Designer / Product Designer

TECHNOLOGY: iOS, Android, Mobile, Wearable

TOOLS: Photoshop,  Rotring 600 Pen, Dotgrid.co Paper, Koh-I-Noor colored pencils

PROJECT INFORMATION

GOAL:

My goal was to design an app that would feels like Facebook, is easy and fast to use while identifying what features would be viable and overcoming the challenges associated with a smaller screen and the lack to input data or text on a wearable device due to them missing a keyboard function

MAIN PROBLEM:

Currently users check constantly their phones for updates, activities, messages thus building the habit to check your phone constantly. To solve this problem a wearable app would make their life easier since they wouldn’t be required to constantly pull their phone from their pocket and put it back, they would just look at their wrist when the app would send a vibrating notification. The challenge of this project was to overcome all the limitations mentioned below

BEFORE STARTING I CREATED A PAPER PROTOTYPE THAT HELPED IDENTIFY:

People have different finger widths, thus having UI elements too small will make it hard for them to interact with the app, using gestures would help with this issue
There’s NO way to input data on wearable devices, except voice, which taking into consideration the number of accents, voices, background noise, having to wait for the data to be processed, will just make it difficult to input data. This means there’s no way to reply, post comments, perform voice calls or chat with others.
Voice calls or phone calls is a feature that is problematic, due to not being able to hear what others are saying in crowded spots and if you do, then other people around you will also hear your conversation, additionally if there was headphones support it would require a headphone jack that isn’t present on most devices and it will require a cable, so for now to use these features it’s still better to use a phone, however using a Bluetooth headset would be an option but that would require additional costs, which most users won’t be willing to pay.
Having too many UI elements present, will make the app feel bloated and hard to interact with, making users have a really hard time when using it
There are people with visual disabilities, thus making text or icons too small might make it really hard for them to see
People are more likely to remember a face or avatar then a complex name, thus using profile images is a better approach then displaying additional text, that will be seen daily and clutter the UI, forcing users to read it instead of being intuitive
Using a phone to input data doesn’t make sense since you can’t look at the watch screen while typing since if you look at the watch you can’t type due to not seeing the letters, plus it would still involve pulling your phone out to input data and then putting it back.
Using voice commands is cool but it’s not a valid approach since it publicly displays the action you want to perform, plus background noise can affect it’s efficiency. Imagine if users would stand in the metro and using voice commands, everyone would know what they want to do and look at him if the action isn’t performed correctly and requires them to repeat or shout. Using services like Siri, Google to perform certain actions is a problem since these type of services don’t allow users to perform in app tasks, so users couldn’t use this feature in apps only to probably start the app.

MY UX APPROACH:

I STARTED DOING A SERIES OF USER INTERVIEWS

Why I did this: I needed to identify how the app would fit in the existing ecosystem in order to understand the users and since there’s no data on wearable devices I studied the use of the Facebook mobile app since that’s the most similar to a wearable at this time
How I did this: by observing users how often they interact with the app asking them where they use the existing facebook mobile app and where they don’t , researching online statistics and other related information that would help me gather some high level info.
How it helped: by highlighting some information about the users and by analyzing how users use the existing mobile app which helped me connect with them and understand their behaviors

WHICH HELPED BUILD A RED ROUTE ANALYSIS

Why I did this: I needed to identify what features would be used by the majority of users so I could focus on integrating them into the app
How I did this: by laying out all the Facebook features, spending time to go through all of them and see how they work and then interviewing friends and past clients regarding how they use Facebook on a daily basis and what features they use the most. I didn’t ask them about problems since the web app and smart watch app are completely different things and I wasn’t redesigning the web app, thus it wouldn’t have been relevant
How it helped: by identifying what features I needed to focus on so my UX design would be targeted to the audience

I THEN CRAFTED THE FLOW & LO-FI UI

Why I did this: I needed to clearly identify how each feature would work and how each individual UI elements would look like, paying attention at the UI element size, font size, ease of use and so on
How it helped: by getting really in-depth regarding each app future, how to maintain the look and consistency of the official website and how to use certain device features such as gps, gestures, vibrating, blinking to create intuitive and easy to use experiences

AT THIS POINT I HAD TO CHOOSE BETWEEN A SQUARE OR A ROUND WATCH FRAME

Square watch frames, similar to the Apple watch feature less of a challenge due to easily being able to incorporate similar design trends found on tablets. While having a round frame, implies working with round elements, that you don’t often see on devices, while also posing a challenge when it comes to text clipping at the margins or other elements not being displayed at the frames margins.

I THEN STARTED CRAFTING THE HI-FI WIREFRAMES & FLOWS

I did this in order to further refine the app, by diving deep into the flow and how each feature would be connected and what specific UI elements will be present, their states and the general interaction. This helped flush out the details and the issues and solutions that I haven’t anticipated

WHICH HELPED ME COME UP WITH LOCATION BASED INTERACTIONS TO SOLVE SOME OF THE PROBLEMS

Diving deep into wire-framing helped me brainstorm and overcome the problem of users not having a way to input data or text, thus being able to incorporate the features that define Facebook reaching my first objective of creating an app that feels like Facebook

TESTED THE FLOW AND UI ON MY SMART PHONE AND WITH OTHER USERS

Why I did this: in order to test if the flow works and is not missing any elements, as well as check if the UI element is large enough and intuitive
How I did this: by creating a complete flow and transferring it to my smartphone, where I tested it, then showed to some connections to see if they knew how to navigate, if the UI is clear, if they are having any issues, dilemmas or questions.
How it helped: by pointing out some issues with the UI which lead to redesigning some of the UI to make it easier to use

THIS HELPED ME USE GESTURES TO MAKE IT INTUITIVE

by using paper prototypes and my smartphone to further prototype and test, I was able to get a hands on feel and what interactions would feel natural and intuitive for me and other users, this resulted in using gestures to make the UI less cluttered by removing the need for certain buttons to be displayed on the screen and by letting users easily access the main navigation or return to the main screen which is the time line
The app menu is accessed by holding the finger on the screen for 5 seconds, this way there’s no need for a button, the physical button can then be used to exit the app. The main menu isn’t the main screen, since it would require additional interaction to get to the timeline, which according to the red route analysis at the top of the page is the future that is used most often by the majority of people

WHILE THE FINAL STEP INVOLVED CREATING THE VISUAL DESIGN

This helped flush out any remaining flaws as well as tackle even deeper the UI and how I could use certain visual elements such as using background images, colors, shadows, typography to make the app feel more like Facebook and further refine the UX, thus achieving my goal to make an app that looks and feels like the website, while also being fast and easy to use.

AS A RESULT I HELPED A FELLOW DESIGNER BY SHEDDING SOME LIGHT UPON THE PROCESS

I was able to help a fellow UX designer on how to tackle a complex application and how to use device features to make it easier for users to, while also showcasing my ability to work with the latest technology, physical devices and mobile design
Check out the article: “Designing a User Experience for Wearable Devices” if you want more information on the subject
And below you can find a video of the

INTERACTIVE PROTOTYPE

Here are some additional

UX EXPLANATIONS

Here’s how I’ve solved some of the

SMALLER UX PROBLEMS

1. how to make users have fast access to the content while also have quick access to the main Facebook features? solved by using the time-line as the main screen they see, as this being the most used feature while the menu is accessed by holding the finger on the screen.
2. how to make the navigation easy to use, keeping in mind different age groups with different eye sights and different thumb sizes? solved by separating each main feature on it’s own screen, so instead of having all the features on a single screen, users swipe left and right to cycle between the feature they want to access, thus making it easy for them to see each future and not having to struggle to see each one.
3. how to inform users of notifications, friend requests ? solved by using vibrating and visual cues to grab a users attention, while not being too prominent as a way to avoid seizures or accidents while driving while also giving them the ability to turn these off.
4. how to keep the consistency between the online and app version? solved by using a similar color scheme, same feature set and same level of options while using the power of location based interactions to make it feel unique.
5. how to make users check-in, like a page knowing there’s no way to input data on smart watches? solved by using location based services so that once a user enters a store he then has the option to like that business or check-in from there which auto completes the information such as location or automatically pulls the facebook data on the screen
6. how could users select a different location, if the check-in features displays a wrong business or address? solved by letting users the option to manually browse from a list of nearby businesses or locations before they would send the check-in.
7. how to remind users what app they are using and how could they dismiss notification in a non intrusive way? solved by using the Facebook logo as a reminder of what app they are using, in case they engaged in a conversation or phone call or they’ve locked their watch while pressing the logo at any time would bring them back to the main screen, which is the time-line.
8. how to remove the habit of constantly checking the phone? solved by using a notifications system on the smart watch, that informs users when they have something pending and if it’s a chat or message they can reply via their phone due to the lack of an actual input method on wearable devices.
9. how to display the time-line activity in a way that’s easy to use? instead of just taking the normal route by implementing the same thing as the web app which would be difficult to read, I implemented the time-line as a full-width element that displays elements from the time line instead of the time-line. This way users can easily see the content shared or updates by viewing it on the full screen and not trying to read
10. how to make each friend request feel unique as a way to avoid repetitiveness? solved by using user profile covers, users profile image and large typography
11. how to eliminate guess work by making it easy to make new friends? solved by using a button that by default is set to accept friend requests but once a user presses and holds the option to decline appears, this encourages users to connect and be social while eliminating the need to make a decision as in the case of having two buttons at once.

THE IMPACT

Overcame 8 interaction design limitations, resulting in a unique solution to the inability to input data on smart watches, by using location based services, keeping interactions at a minimum as a result. Using this solution I made possible the use of features such as check-ins, liking a facebook page and social tagging without having to use a keyboard by using a maximum of three interactions to perform them. I solved the problem with small screens in which people can’t touch the UI due to different finger widths, by using gestures, making it intuitive, fast, easy to use. Using a paper prototype helped quickly explore and see how the user interactions would feel, thus being able to quickly test and iterate different things before tackling the high fidelity wireframes and final prototype, saving time. By further exploring how location based technology could help users I was able to develop a new revenue source while pushing cross-device interaction between users and the environment while this project helped envision how interactions between wearables and the environment could be possible. All this lead to helping a fellow UX designer understand how this can be done while removing the habit of users constantly having to check their phones by using notifications, sounds and vibrations to make users look at the device only when certain things happen.
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps