Souluv
A social product that puts emotional check-ins, shared interests and everyday conversation into one recognisable interface.
- Sector
- Social · Community
- Scope
- UI/UX Design · App & Webapp Design · Frontend Development
Feel. Belong. Connect.
Feel. Belong. Connect.
Souluv brings together community circles, conversation, personal profiles and emotional check-ins. The supplied code includes web and mobile applications, with a shared language system and a distinct purple identity.
This presentation uses the original web interface. It moves from the home experience into the introduction and profile setup, showing how the product establishes its purpose and prepares a new member to participate. The account and post shown in the preview are explicitly fictional.
- 01
Give the day a starting point
Place the emotional check-in close to the home experience.
- 02
Explain participation
Introduce connection and community before the setup form.
- 03
Keep the product familiar
Carry the same identity through navigation, cards and onboarding.
Introduce the purpose, then make room for participation.
Onboarding introduces what the product offers. Language and profile setup prepare the account. The home interface then combines a personal check-in with the community feed.
- 01
Understand
Introduction slides
- 02
Choose
Language preferences
- 03
Introduce yourself
Profile setup
- 04
Check in
Daily mood prompt
- 05
Participate
Circles and conversations
Start with the person behind the feed.
The home screen places the greeting and mood prompt above the feed. The five expressive mood illustrations offer a direct interaction, while the surrounding navigation connects home to circles, conversations and the profile.
- 01
A personal opening
The greeting and check-in make the home screen more than a stream of posts.
- 02
Visible community context
Feed cards retain the author and circle context around each post.
- 03
Navigation that travels
Desktop navigation and the smaller-screen tab bar share the same section structure.
A short introduction with a clear next step.
The introduction uses one message per slide, distinct icons and a simple Next action. The visitor can move through the explanation without having to understand the full navigation first.
- 01
One idea per screen
A title, short supporting text and illustration establish each message.
- 02
A paced sequence
Next advances the introduction; Skip provides a direct route onward.
- 03
Shared visual language
Rounded forms, purple emphasis and familiar icon styling carry into the application.
Warm colour. Legible conversation.
The original web source pairs Nunito with Inter and defines the same surface, border and text tokens in light and dark themes. Purple carries the product identity, with pink and cyan used as supporting accents.
Feel. Belong.
Connect.
Soul purple
Brand and primary actions
Soul pink
Supporting warmth
Cyan
Secondary accent
Community on the desk. A personal space in the hand.
The wider home layout has room for navigation and supporting discovery content. On mobile, the main column takes priority and the tab bar keeps the core destinations within reach. Onboarding stays focused in a narrow, readable column at either size.
Reading orderContent follows the task in a vertical sequence.
Working spaceControls keep their own room on the smaller canvas.
Brand recognitionThe identity carries across both screen sizes.
Explore the original interface.
Choose a view and a screen size. The embedded interface reflows and responds to your actions.
The actual components, with demonstration activity.
The presentation compiles the supplied web app’s home and onboarding components. The original translation provider and interface styles remain in place. A local adapter provides a fictional member and post so the home interface can be explored without an account.
- 01
Original product structure
Home, introduction, language choice and profile setup come from the supplied application.
- 02
Shared language system
The web interface uses the project’s own translation package.
- 03
A self-contained preview
The preview does not publish posts, create accounts or connect to private messages.
- UI/UX Design
- App & Webapp Design
- Frontend Development
- Responsive interface layouts
- Original brand and product assets
The embedded views use original Souluv frontend components and brand assets. Demo Member, Demo Creator and the feed post are fictional. The preview does not connect to the live account, messaging or payment services.
A social interface with space for how people feel.
Digital design & development · Gradatim Concept
Let’s build your next digital experience
