A-Bao Social App
Type: Teamwork
Deliveries: User flow and prototype for the final testing and release
Method: Whiteboarding, Zoom meeting, Cross-functional Team
Design Tool: Figma
PROBLEMS
-
The A-bao team didn't have a designer.
-
A-bao team was full of developers and stakeholders
-
The team had lots of ideas and requirements need to be transformed into design
-
The team needs a professional designer to help them to do the design decisions.
GOAL
-
Develop their user flow
-
Create the layout, wireframe, and the interactive prototype
-
Corporate the design system
-
Provide suggestions for their future new function launch
-
Brainstorming the logo design and opening animation
METHODOLOGY
-
Whiteboarding for brainstorming of the user flow.
-
Zoom meeting for every step.
-
Working in a cross-functional team, including designers, engineering, back-end team, stakeholders, marketing team, and customer services team.
MY ROLE
Designed the interface and interaction
Collected and organized the user's pain point
Interactive Prototype Design
Arranged Whiteboarding meeting
Made sure every team member on the same page
TOOLS
Figma
Zoom
Miro
InVision
NEW VISUAL STYLE
#F093FB
#F5576C
#4AA1F8
#32CD32
WIREFRAME &
USER FLOW
"My first time here!"
What if I don't have a pet yet?
Quickly create an account and start to use the Abao app directly.
Select the user interests. Those are also the topics on Abao that people are interested in.
Able the fast register and login method: social media login and face ID login.
Go to see the Follow session and Explore session (the two main functions on the main page)
"Look at that cut post!
And I wanna share mine."
Review the post detailed page.
It's my time to post the user's own page.
Navigation of the menu bar.
According to the post sharing, the user can post both images and content. Adding hashtag and location information is beneficial for the post to get viral.
"Finally, I have my first puppy!
I should update my profile and my Riley boy."
Navigation the menu bar and go to the profile page.
Enter the user's information.
Update the pet's inormaton, such as name, image, gender, etc.
New profile page present, and the pet's information is before the human's. (The priority order is easy to see.）
