Idea Generation and Features
Idea behind this app project was to design a chat app concept to help people make friends through a variety of personality quizzes. Here, user may take and view results of different personality tests, and chat with people with similar personality types.
The app is divided into 3 branches: Quiz, Discover, Chat. I designed the Quiz branch. The Quiz branch should allow the following:
- Answer quiz questions associated with a personality test
- Viewing your test results
- Comparing your results with your friends
Currently, the app supports 4 personality tests:
- Myers-Briggs
- The Big Five
- DISC
- Jungian Archetypes
I chose to design The Big Five Personality test.
Information Architecture
The next thing I did was to divide the information architecture into feature based flows, such as viewing network, and test taking. I made the Quiz dashboard the center point.
Wireframing
This is the creative part of the design process. Here's some rough sketching of ideas I came up with. I used the material design guidelines for the app.
Quiz Dashboard
Here I explored different ideas for the design of the app. I first started with the main screen of the app i.e Quiz dashboard screen through which users can see their test, and network of friends. I created 3 design wireframes on this using functionalities like horizontal scrolling cards and pull up tabs. I went with first design i.e horizontal scrolling cards version.
Results UI
The first two wireframes are for The Big Five Test UI. (I chose the second one.) (The third wireframe was for The Big Five Test results which I ended up not choosing)
Design System
Final Screens
