Adobe XD Challenge 1 -
(Travel social media mobile app)May 11 - May 22/ 2020
Prototyping, Visual design.
Adobe XD daily challenge is meant to sharpen the UI/UX skills by following a week of everyday tasks brought by Adobe XD mentors about a certain topic.
This one was about social media apps, I chose to create a travel app for wanderlust people where users post travel related photos and information.
Day 1 - Sign in/ register screenMy main constrains for creating the sign in/ register screens were as follows:
- Empathy: make the experience be fast and easy, only ask for necessary information to be filled by the user.
- Enable logging in via external accounts for a faster and simpler experience. (also make sure the user knows that you won't post on their behalf without permission)
- Keep the user logged in option
- Security: Ask for a strong password, enable finger print and/ or face recognition if possible.
- Restorative: Make it easy for the user to recover from forgetting the password and failing to log in.
Day 2 - Navigation bar- Give the user the right amount of options, not too many and not too few.
- Keep the navigation conventional , intuitive and easily accessible by providing familiar and easily accessed icons
- Let the user know where he is by marking the current page
Day 3 - Social feed- The feed structure will be sectioned into 3 parts : 1) Header - where the stories are. 2) Log - where the posts are. 3) Anchor links
- The structure of the posts will contain: Who (the users' profile picture and name), The post (image/ video), Caption, Interaction (like and share), When (the post was published), Where (location).
- The feed's order from the newest to oldest.
- A notification of new unseen posts waiting to refresh
- The stories are 3 types : yours, new, and seen.
Day 4 - Search and exploreThe search and explore page has two sections: 1) Query (the search box) 2) Results.
I divided the results to 3 categories to be filtered by: places, people and keyword/ hashtag.
Day 5 - Profile The profile page of a social media app needs to be a personalized and customize-able space for the user to express who he is and be unique.
Therefore, I have designed a page that contains:
1) Editable profile picture
2) Name + nickname
3) Summary/ about
4) Info about followers and following and visited places
5) Follow button within the thumb zone
6) Map with pins of places that were visited ( different visual themes and colors to pick from). Clicking on a pin opens all the related pictures for the certain place.
Day 6 - Animated ButtonI created a simple liquid animation for the follow/ following button using Adobe XD .
Final ProductA few UI changes were done for the final product.
Feel free to try playing around with the following prototype.