SiteSwan
Start Your Own
Home-Based Web Design Business
.avif)
.avif)
.avif)
User Flow
In order to design the best experience, I’ve look at the possible paths the user might take during their journey and examine what happens during each step. I usually create a map in Figma to get a detailed view of the User Flow.
Sign in/Register with Apple, Google, Email
Manual Sign-Up
- Create Password
3 main points about the app
1. What’s your first name?
2. What specialty are you in?
3. What topics are you interested in?
4. Where are you in your practice?
- Specialty
- Advanced Level
- Types of Content
- Podcast Information
- Image, Title, Host
- Time Remaining
- Resume Button
- More/See All Button --> takes you to list view version
- Click into podcast:
- Overview (Images, Title, Host, About, Episode List)
- Play (Image, Title, Host, Fast Forward/Backward 15 sec, 1x speed)
- Bookmark
- Share outside app
- Podcasts Carousel
- Articles Carousel
- Book Chapters Carousel
- Videos Carousel
- Specialty
- Advanced Level
- Types of Content
- Types of Content
- List of selectable categories
- Top Podcast List View
Currently Listening
- Takes you to list view
Bookmarks
- Takes you to list view
History
- Takes you to list view
Add New Collections
- Name new collection
- Invite people to collection
View Existing Collection
- Rename
- Manage Members
- Delete
- Update Email
- Change Username
- Notification Settings
- Privacy Policy
- Terms of Service
- Contact
Sign in/Register with Apple, Google, Email
Manual Sign-Up
- Create Password
3 main points about the app
1. What’s your first name?
2. What specialty are you in?
3. What topics are you interested in?
4. Where are you in your practice?
- Specialty
- Advanced Level
- Types of Content
- Podcast Information
- Image, Title, Host
- Time Remaining
- Resume Button
- More/See All Button --> takes you to list view version
- Click into podcast:
- Overview (Images, Title, Host, About, Episode List)
- Play (Image, Title, Host, Fast Forward/Backward 15 sec, 1x speed)
- Bookmark
- Share outside app
- Podcasts Carousel
- Articles Carousel
- Book Chapters Carousel
- Videos Carousel
- Specialty
- Advanced Level
- Types of Content
- Types of Content
- List of selectable categories
- Top Podcast List View
Currently Listening
- Takes you to list view
Bookmarks
- Takes you to list view
History
- Takes you to list view
Add New Collections
- Name new collection
- Invite people to collection
View Existing Collection
- Rename
- Manage Members
- Delete
- Update Email
- Change Username
- Notification Settings
- Privacy Policy
- Terms of Service
- Contact
UI Samples
The updated UI samples for SiteSwan showcase a modernized approach to existing branding. The refreshed interface combines sleek, user-friendly elements with the brand’s core aesthetics, enhancing visual appeal and navigation.
%205.avif)
%206.avif)
.avif)
Style Guide
This redesign revitalizes SiteSwan’s look while maintaining its established identity, offering a more contemporary and intuitive user experience.
Important Screens
The key screens for SiteSwan highlight the core functionalities of the website builder, featuring a streamlined Dashboard and an intuitive Site Editor.
Dashboard Page
The Dashboard page offers a clear view of all developed sites and billing information at a glance. Users can efficiently manage site performance and monitor financial details through an intuitive interface, ensuring streamlined oversight and easy access to essential data.
%202.avif)
%201.avif)
Resource Page
The Research page is designed as an information hub, offering access to SiteSwan's latest studies, reports, and industry insights.
Site Details Page
The Site Details Page allows users to delve into individual sites, providing access to settings and customization options. This page enables users to modify settings, update content, and manage configurations with ease.
%203.avif)
%203%20(1).avif)
Site Editor Add Section Page
The Add a Section Page in the Site Editor enables users to enhance their websites by selecting from a variety of pre-made sections. Each section is represented by a custom-made thumbnail, making it easy to preview and choose the perfect design element to integrate.
Billing Page
The Billing Page provides a clear and organized view of all financial transactions and subscription details.
%203%20(2).avif)
Site Editor Example
The Site Editor offers over 20 variations of sections, providing extensive customization options. Here’s an example showcasing the editor in action, focusing on the editing of a modal. This interface allows users to effortlessly adjust content and design, demonstrating the editor's flexibility and ease of use for fine-tuning individual site elements.
Other Screens
The updated UI samples for SiteSwan showcase a modernized approach to existing branding. The refreshed interface combines sleek, user-friendly elements with the brand’s core aesthetics, enhancing visual appeal and navigation.
%204%20(1).avif)
%201%20(1).avif)
%201%20(3).avif)
%204%20(2).avif)
%201%20(4).avif)
%204%20(3).avif)
%204%20(4).avif)
%201%20(6).avif)
%204%20(5).avif)
View More Work
