I.

Sitemap Outline 
1. Homepage 
User first arrives at our website on the ​Homepage​, with the website logo in the top-centre of 
the page. In the background, there will be full-screen moving images taken from collages that 
our users have created. There will only be a simple box in the centre of the screen, filled with a 
single line of options for which domain the user wants to go to: 
Art ​ | ​Beauty​ | ​Fashion​ | ​Living​ | ​Others1 
 
This is the heading to be placed on top of the box​: 

Stylebloc is your digital partner-in-crime who lets you create your stylish 
collages, anytime, anywhere. 
 
This smaller heading is to be placed inside the box, on top of the options: 

We’ll let you choose your own adventure. What inspires you today? 

 
On the bottom-right corner, there will be an Intercom badge that greets first-time users with a 
welcome message, and a prompt for the user to send an Intercom message should the user 
has any questions. It will stay static throughout the website, and not move from window when 
moving from page to page. At this point, we do not want the user to rush to register — we 
employ the ​lazy registration UI pattern​ here — and entice them by showcasing our content first. 
 
Sample greeting: 

Hey there! We’re Stylebloc. We help you express yourself through pictures. 
Come talk to us if you need an answer! 
 
We will include several modules in the Intercom chat bubble: the Chat module, FAQ Search 
module, Watch a Tutorial module, Feedback module, as well as the Status module. 
 
2. User Feed 
Let’s say the user chooses ​Fashion​. Upon which, the user will then be shown the​ User Feed ​of 
the ​Fashion​ domain. For this section, we want the user to explore the site further and take their 
time to view the contents generated by other users. Our new user can continue to browse and 
even create sets as Guest, however, in order to publish sets or to save any unfinished sets as 
draft, the user will need to sign up and create a profile.  
 

1
​Potentially let the user create a ‘set’ to showcase their own personality or life — essentially who they are — using any items from 
our database or items she uploaded or clipped online. This ‘set’ will be a page, a subdomain that belongs to the user (e.g. 
https://username.ourdomain.com/​). She would be able to browse other users’ ​pages​ as ‘sets’ as well.
 The user feed layout will be in grid, with each set being represented as cards. This page will 
have endless scrolling. Each card will have an image of the set, as well as the title (heading) 
and the username of the creator, or creators (subheading). Below these details, it will also 
display the tags as well as number of likes received by the set. At the middle-right edge of the 
screen, there will be a ‘Scroll to Top’ button which the user can use to scroll to the beginning of 
the feed. 
 
Currently, before the user is logged in and while she is browsing and exploring our site, the 
navigation deck on the top-right corner of the screen will include the following: ​Register​, ​Sign 
In​, and ​About​. This menu will be fixed and not move from the window when scrolling down, so 
she can choose to register at any point in time.  
 
Once the user clicks ​Register​, she will be routed to a separate page with a full-screen 
background image that will include a form with 4 fields: username, e-mail address, password, 
and confirm password. Submit button is placed below the form fields. To make registrations 
painless, user authentication via OAuth (FB, Instagram, Twitter) are also allowed. The OAuth 
badges will be available below the submit button. 
 
This heading will occupy most of the left half of the screen, and the registration form on the 
right half: 

More than a style organisation platform. It’s the style community’s best-kept 
secret. Join Stylebloc. 
 
For returning users, they will click on ​Sign In​. This will also route the user to a separate page 
with a full-screen background image, which will include a form with 2 fields: e-mail address and 
password. Submit button is placed below the form fields. OAuth buttons will be available below 
the submit button. 
 
This heading will occupy most of the left half of the screen, and the registration form on the 
right half: 

Welcome back. Let’s bounce. 

 
The ​About​ page will route the user to a page that describes Stylebloc. ​See more under #4. 
 
Once the user is logged in, the following will happen:  
■ The user will be redirected back to the ​User Feed​, where she can search, browse, 
and explore sets: 
 ◻ User Feed ​will be divided into several sections, such as ​Recently Published 
Sets​, ​Sets from Followed Users​, C
​ urrently Trending Sets​, and 
Recommended Sets​ (recommendation based on the user’s liked or created 
sets). These different sections can be toggled from its respective hyperlinks 
available under the ‘​User Feed’​ heading title. 
◇ When user clicks on a particular set, user will be shown the set view 
page, where the set will take up more than half of the screen. Below 
the set image, there will be details such as title, description, created 
by, published at, tags, number of likes, and number of comments. 
Below the set details, user can see the comment thread for the 
particular set, as well as post a comment. 
◇ The following buttons will be on the right edge of the set: Like, Share, 
Add to Collection. When the user hovers over to each clothing piece, 
it should show available details about the piece — such as brand, 
item name (link to item), as well as price tag. 
◇ To the right of the set, user can view several scroll-able sections: 
Similar Sets, Sets Published By This User, as well as Sets Liked By 
This User. 
◻ Set Categories​ are available as a 5 x 2 thumbnails grid (each with a 
background image representative of its own category) on the top section of 
the website, just below the header. There will be a full list of categories on a 
page when the user clicks on ​Category​, which is a heading just above the 
grid. 
◻ Search Bar​ is located on the left of the navigation items below, with an 
auto-complete feature and magnifying glass icon on the right. Filters will be 
introduced in the search results page, including filters for tags, colors, 
clothing items, style. If no matches are found, the results page will respond 
with “Sorry! We currently have no matches for that. Do you mean [this],” with 
[this] being a similar match to the input keyword.  
■ On the top-right corner of the screen, the following navigation items will be 
available: 
◻ Create​: Link to set creation page 
◇ The canvas to create the set will occupy slightly more than half of the 
page, slightly off-center of the page, and will have an toggle option at 
the top-right corner to either use an infinite canvas, or to use a fixed 
400px x 400px size. Above the canvas, there will be a toggle button 
where user can toggle a form to fill in the set’s title, description, and 
tags. On the bottom edges of the canvas, there will be the edit 
 features, such as remove background, flip, rotate, slice, duplicate, 
undo, redo, magnify, save as draft, publish, download as image, and 
delete. These features will be available as icons. 
◇ On the right side of the canvas, there will be the thumbnail grid of 
items to drag-and-drop towards the canvas, as well as a search bar 
and a filter above the grid. User can also toggle between the search 
items view and the user’s items view (include clipped items and 
uploaded items) using a toggle button to the left of the search bar. 
Clipped items and uploaded items will also appear as a grid. Clipped 
items are synced automatically from the user’s browser clipper 
extension. Uploaded items appear starting from the most recently 
uploaded item, with the search bar transforming into an upload 
button. As user clicks on Upload, a pop-up window will appear to ask 
user to upload an image. 
◇ Below the canvas, there will be an input field for sending an invite to 
other user for collaboration. This will only work for users who are 
following each other, and the inviter will receive a notification once 
the invitee accepts the invitation. 
◻ Manage​: Link to set and collection management page (include user’s 
published sets, collaboration sets, user’s liked sets, user’s drafts, user’s 
collections) 
◇ This is a bird’s-eye-view for set management, with different tabs for 
different sets — Published, Liked, and Commented. Sets will appear 
as medium-sized thumbnail in a grid. User can choose to edit or 
delete any sets that has been published, and to organise any sets she 
has created or interacted with into collections via drag-and-drop. 
◇ Editing set will appear as the Create Set view, with the items laid out 
on the canvas and set details filled in. User will be able to change 
anything as they like and click Publish to overwrite the set. 
◇ User is also able to either select specific sets to export as .zip, or 
export all sets under a tab in a .zip file to their own local machines. 
◻ Explore​: Link to user feed 
◻ User Avatar​: Dropdown to ​Notifications, User Profile​, ​Account Settings​, 
and ​Sign Out 
◇ Notifications ​will be received (by default) when user has a new like, 
new follower, new collaboration invitation (or acceptance), new 
comment, or new contest. 
◇ User Profile ​will show the user’s avatar on the left side below the 
header, and the user’s details to the right of the avatar.  
❏ User can change their avatar by hovering their picture and 
clicking the Change Avatar link, where user can choose to 
input a URL or to upload an image.  
❏ In the user details section, top-level heading will be the 
username, with the user’s bio as the subheading. Below the 
user’s bio, there will be a link to different social media account 
which the user connected and authorised. Below the user’s 
social links, there will be number of sets published by the 
user, the number of followers, the number of users followed 
by the user, and number of contests won. At the top-right 
corner of the user details section, there will be an edit button 
for the user to edit the user profile. This will link to the edit 
profile page, where there will be a form filled with the user’s 
details. If the new username input is unavailable, there will be 
a red-coloured message appearing to prompt the user to input 
a different username. There will be a Save button at the 
bottom of the page, for the changes made to be committed. 
When the changes are successfully saved, there will be a flash 
message with green background with the text ‘Changes 
saved.’. Otherwise, it will flash a message with red 
background saying ‘Changes are not saved. Please try again, 
or contact us for help.’ 
❏ Below the avatar and the user’s details will be different tabs 
for different sets. By default, the active tab is the user’s 
Published Sets (include collaboration sets), and there will be 2 
other tabs: Sets Liked and Sets Commented. Under Published 
Sets, user is able to sort the sets based on Alphabet (Title), 
Date Published, Number of Likes, Number of Comments, and 
Tags (grouping similar tags together) 
◇ Account Settings​ will show the user a page filled with the user’s 
account details — e-mail address and password. An edit button will 
be next to each detail’s heading, where user can change their details 
accordingly. If either the new e-mail or password input is invalid, 
there will be a red-coloured message appearing to prompt the user to 
enter a different input. Below the e-mail and password, user will be 
able to link to different external accounts, such as Facebook, 
 Instagram, or Twitter. They can also customise their privacy settings 
and notification settings, as well as to delete their account. There will 
be a Save button at the bottom of the page, for the changes made to 
be committed. When the changes are successfully saved, there will 
be a flash message with green background with the text ‘Changes 
saved.’. Otherwise, it will flash a message with red background 
saying ‘Changes are not saved. Please try again, or contact us for 
help.’ 
◇ By clicking ​Sign Out​, user will be signed out and redirected to the 
User Feed​ of the domain the user was on. 
 
At any point, user can navigate to other domains at their own will via a domain toggle located in 
the bottom-left corner. In most cases, we should be able to map the user’s current location 
directly (e.g. if user is at ​User Feed (Art)​ and choose to toggle to the domain Beauty, user will 
simply be redirected to the ​User Feed (Beauty)​). Otherwise, we’ll redirect the user to the 
homepage of their destination domain. 
 
Our website will be like ​Tumblr​ x Polyvore x ​Are.na​ — where we emphasise on visual input and 
creation and organisation. Here are the following example elements we can emulate: 
■ Tumblr’s aesthetics and moving/scrolling images on the homepage  
■ Polyvore’s items database and browser clipping function 
■ Are.na’s collaboration and organisation interface 
 
3. Community 
As we want to encourage community building on our site, we will prompt the user (via Intercom) 
to introduce herself or post a shout-out on the Welcome discussion thread. Alongside this 
thread, there will be other discussion topics under the Community tab, such as: 
■ Beauty 
■ Fashion 
■ Art 
■ Travel 
■ Technology 
■ Home 
■ Fitness 
■ Others 
 
Sample prompt: 
 Hey Queen Bee! You found our sweet-hanging-spot! Go ahead and say hello to 
everyone, you know you want to! If you’re stuck, try starting with your name, and 
how you got to Stylebloc! 
 
The layout for this section will resemble a forum, with each topic title being the heading of a 
table row, with the most recent post in the thread being the subheading, as well as the user 
who posted and date of post. As user goes deeper into the forum sub-threads, there will be a 
breadcrumb navigation just below the header, so user can move to different threads at any 
time. 
 
Right above the table forum layout, there will be a link to ​Contests​, where users can view 
ongoing contests and post their entry accordingly. On the contest page, there will be details on 
entry requirements, ongoing dates, as well as rewards. 
 
4. About 
On this page, we will have different sections under different headings, where we describe how 
to use our platform, why we’re different, as well as who we are. Terms of service and privacy 
policy is recommended to cover issues about user-generated content, as well as user 
behaviour on the website.