3. GOALS
USER
Deliver rich positive content that engages users to participate in contests and content creation
Allow for simple discovery, sharing and creation of positive content
Create a simple roadmap for participation in contests
Develop an intuitive method for point redemption
Provide social tools so users can share and socially engaged with positive content
DESIGN
Create an intuitive user experience that engages users to sign-up
Identify the most essential functions of the app for UX redesign
Unify the importance of content creation with the participation in contests
Allow for rapid user adoption through simple on-boarding and invitation processes
6. END USER INTERVIEWS
Golzar / 22 / Student / SF
Gabby / 25 / Branding / LA Chris / 25 / Education / LA
Dani / 19 / Student / LANikki / 21 / Marketing / LA
Jonas / 18 / Student / LA Mani / 23 / Student / SF
Kelly / 21 / Student / LA
Ryan / 21 / Student / LA
Jasmine / 21 / Student / LA Stefani / 22 / Marketing / LA
7. KEY TAKEAWAYS
MOBILE IS THE MOST UTILIZED PLATFORM
SOLUTION Responsive web or native app should be priority of development
FINDING POSITIVE CONTENT IS THE PRIMARY FUNCTION OF THE APP
SOLUTION Map landing page to funnel user to content in a simple and intuitive interface
USERS WANT TO BE GIVEN CONTESTS TO COMPLETE WITHOUT IN-DEPTH SEARCHING
SOLUTION Don’t rely only on search results to display contests. Display them immediately
RICH CONTENT SHOULD BE IMMEDIATE AFTER ON-BOARDING.
SOLUTION Make on-boarding easy with bare minimum features focusing on content delivery
COMPLETING CONTESTS SHOULD BE SIMPLE, FUN AND SHARABLE
SOLUTION Use a method that millennials are used to and make the content sharable instantly
8. MVP FOR VER. 1.X UX REDESIGN
RICH CONTENT DELIVERY
COMPLETEING CONTESTS
REDEEMING POINTS
SOCIALIZE CONTENT
PRE-POPULATED WITH RICH
CONTENT
ALLOW FOR EASY DISCOVERY
WHAT, WHERE, HOW, PROVE
UPLOAD IMAGE, VIDEOS OR SCREENSHOT
SHARE CONTENT TO
FRIENDS
COMMENT ON CONTENT
LOG INTO SOCIAL MEDIA - POST
COMMENT BOX
CONTENT DISCOVERY
SECTIONS
9. LANDING PAGE
PRE-POPULATED CONTENT
FILTERED CONTENT
SIGNUP OR SIGN IN
CONTEST LIST
“COMMUNITIES” or
“ORGANIZATIONS”
Section where a content is displayed on the page and the user can scroll,
search or filter to discover them. Positive engaging, curated content.
A drop down menu where users can filter the pre-populated content to their
criteria. The list of content will update to match new criteria.
A signup or sign in menu option. Once pressed the user will be given a modal
to either signup by email or Facebook.
Navigation menu that takes the user to the contests page to participation.
Navigation menu that takes user to the full list of communities / organizations.
Click on a org and be navigated to its details page.
PROFILE Navigation menu that takes user to their profile page.
FEED / CONTENT / BLOG Navigation menu that takes the user to the curated or user generated rich
content of the site.
11. DOSOMETHING.ORG
STRENGTHS
• 6 Years in business with strong tech and marketing team
• 4 Million members and growing. On target for 5 million by year end
• Transparent Financials with $10 million in revenue per year and a quarter of that in costs.
• Strong Board of Venture Capitalist, Technologists & Start Up Pioneers - Founder of LinkedIn etc…
• Straight forward brand and message “Young People + Social Change”
• Simple user flow to start and complete a deed. 4 Easy Steps
• 1. Know 2. Plan 3. Do 4. Prove
• Focused on 13-25 year olds.
• Landing page funnel users straight to deeds. No clutter or unnecessary content to navigate through.
• Profile page is straight forward and lists your upcoming and completed deeds.
• Strong sponsor and affiliate base
WEAKNESSES
• No Mobile solution - responsive web only
• No reward base system
• No content except for Blog.
• The site is not utilizing its content
QUICK SYNOPSIS
Strongest competitor (besides not rewarding users) Great brand and heavily marketed towards millennials. User
experience drives users to complete deeds and its very simple. No content clutter or confusion when navigating
through site.
AOK Completion Competitor
12. OMAZE
STRENGTHS
• Strong user base, targeted towards donating for once of lifetime experiences
• Simple interface
• 1. Pick Experience 2. Donate 3. Raffle 4. Win or Lose
• Celebrity focus allows for large audience reach with minimal user acquisition cost
• Emphasis on unique experiences engages customer and excites them to return for more opportunities at a
chance for winning
• Content is easily embeddable to social media platform for mass distribution and adoption
• Great video marketing campaigns with embedded donation widgets
WEAKNESSES
• No mobile presence
• Focused on donations only
• No real content on site
• Must make large donation for actual chance to win
• No real satisfaction or good feeling if you don’t win, almost feels like playing the lottery
QUICK SYNOPSIS
Up & coming startup in the donation for experience market. Geared toward rare celebrity experiences. User
experience is very simple and clean. No real content besides a strong video based marketing campaign.
Reward Incentive Competitor
13. ANONYMOUSGOOD
STRENGTHS
• Early entry into market
• Straight forward business model
• Strong sponsors
• Simple method to upload acts of kindness
WEAKNESSES
• Using wordpress to manage user profile and content
• Limited capability in scaling
• Cluttered and unorganized content
• Still in Beta
• No real market or strong user adoption
• Site has no real branding
• No Mobile presence - responsive web
QUICK SYNOPSIS
Not a strong competitor. Their content is scattered and unorganized. The only thing their site does is allow user to
upload any type of content.
AOK Completion Competitor
14. CHIDEO
STRENGTHS
• Strong player in the donation for experience market
• Great branding
• User experience is straight forward and easy to navigate user through donation flow
• Only one of the competitors to have a native mobile app
• Experiences are geared towards a user persona - music, film, business, food, etc… easy to navigate user to their
desired experience and convert them to a donator
• Large ambassador base to channel donors to and create social and market presence
• Easily monetizable business model
• Utilizes social media for marketing, branding, content creation and to drive user traffic.
WEAKNESSES
• Mobile app is only for content. Doesn't allow for donation or full app experience. Redirects you to browser for
mobile web experience to complete donation.
• Site is only targeting donation for experience model and not full acts of kindness market
• Many competitors popping up in the donate for experience market
QUICK SYNOPSIS
Strong player in the donation for experiences market. Lots of influencer and charity backing. Their platform has a
lot of content, but most are geared towards a larger market base, not millennials. They are not trying to enter the
AOK or Good Deed market.
Reward Incentive Competitor
15. PRIZEO
STRENGTHS
• Unique and smart donation to experience model which relates donation amounts to level of experience a
winner can obtain.
• Very clean and simple user experience, very hard to get lost in the site. Only 2 navigation buttons
• Great branding and tie in of the branding to their user interface
• No clutter of content that drives user away from their main objective of funneling users to donations
WEAKNESSES
• No mobile presence
• No content, just a list of campaigns that drive users to donate
• Again, Donation for experience model is becoming a crowded space
• No real user of social media or digital marketing
QUICK SYNOPSIS
In a different market and demographic, they are encouraging good deeds by allowing a platform for users
to donate to good causes and receive once in a lifetime experience, which in a way solidifies the reward for good deed
model. Their target market is more broad and they really have no relevant content as of yet. User interface is clean and
their branding is tied well within their interface.
Reward Incentive Competitor
16. MOBILE COMPETITORS
NOBLY
STRENGTHS
• Clean and intuitive user interface
• Content is cleaning displayed and easy to follow
• User interface is tied well to branding
WEAKNESSES
• Concept of relating images to “Stands” is confusing
• App is choppy and crashes frequently
• Too many unrelated feature sets
STAND4
STRENGTHS
• Great branding
• Most robust feature set of all mobile apps
WEAKNESSES
• User experience is extremely confusing
• “Chains” is hard a concept to understand and follow
• User interface is choppy and icons are too small
• No real incentive to use app
GOOD DEEDS
STRENGTHS
• Straight forward user experience
• Focused on simple imagery and comments
WEAKNESSES
• No real incentive to use the app
• User interface feels dated
• Just images of good deeds not enough for user
to return to app continuously
ONE TODAY
STRENGTHS
• Very strong UXUI
• Large user base
• Tied well into social media and all google pay
• Powerful content urges users to donate
• Instant gratification for giving donation
WEAKNESSES
• Focuses primarily on donations
18. FEATURE COMPARISON
FEATURES U4G DOSOMETHING OMAZE ANONYMOUS
GOOD
CHIDEO PRIZEO
Upload Image for Acts of
Kindness or Deeds
Upload Videos for Acts of
Kindness or Deeds
Upload Text for Acts of
Kindness or Deeds
Upload Links for Acts of
Kindness or Deeds
Text Messages for Acts of
Kindness or Deeds
Find AOK, Deeds or
Volunteer Opps
Rewarding Acts or Deeds
Rewarding with Merchandise
Rewarding with Experiences
Strong Influencer & NFP
Base
Geared towards Acts of
Kindness & Good Deeds
Organized and Shareable
Content
Notification of AOK, Deeds
or Volunteer Opps
Page listing Causes or
“Organizations”
User Profile Page
Native Mobile
Content geared towards
millennials
Feed of Content
Magazine or Book
19. HOW IS UNITE4GOOD DIFFERENT?
REWARDING ACTS OF KINDNESS
Unite4Good doesn't just give you a platform to carry out acts of kindness.
It rewards you for them through merchandise and exclusive experiences.
CONTENT BASED ON ACT OF KINDNESS
Unite4Good isn’t just a volunteering site. All of its content is positive and
based on acts of kindness or good deeds. Then these are shared across all
media platforms to encourage users to participate on the platform.
FOCUSED ON MILLENNIALS AND MOBILE
Seeing an opportunity in how millennials influence each other through social
media and also a gap in the mobile market for such an application.
Unite4Good will target millennials in an app that allows them to participate
in acts of kindness on the go with their mobile app.
21. STATS
PAIN POINTS NEEDS
# TIMES VOLUNTEERED IN THE LAST YEAR
# TIMES MENTORED OR TURTORED
TYPICAL HOURS OF VOLUNTEERING OR
ACTS OF KINDNESS
ACTS PREFERENCESREWARD PREFERENCE
PLATFORM PREFERENCE
HOW FAR OUT DO YOU MAKE PLANS FOR
VOLUNTEERING OR DOING GOOD DEEDS
KEY FEATURES
1 10
VOLUNTEERING
1 10
MENTOR OR TUTOR
1 10
JENNIFER Age 22
Jennifer is an active leader in her school and community. She spends most
of her time focused on her school work. When she has time she’s involved in
many extra curricular activities. If time permits, she wants to participate in
efforts that will provide a positive message and improve her local
community. She's worked at local food banks and donated food and goods
to homeless shelters. Besides the common volunteering tasks, Jennifer is
looking for new and exciting ways to be a contributing member of not just
her local community. She also want to make an impact that will lead others
in becoming a person that create a positive change. She has a strong real
world and online social presence.
• Doesn't have time to search and discover new
deeds or AOK on her own
• Fitting volunteering and AOK around her
busy schedule is hard
• Seeing the positive impact & response to her
AOK or good deeds socially doesn't exists
• Tired of the same old volunteering tasks
1 10
NONE
1 10
MERCHANDISE
1 10
EXPERIENCES
12
3
Between 2-4 Hours
Mobile
1-2 weeks
Facebook, Instagram, Twitter
The acts of kindness
themselves should be
reward enough for
people that really want
make a difference. We
just need a platform that
gives us new and fun
ways to contribute.
PLATFORMS YOU WILL SHARE GOOD DEEDS
Finding AOK or Volunteer Opportunities
Positive Content to share socially
• New and exciting AOK or Good
Deeds to participate in
• Updates on AOK or Good Deeds that
match her criteria
• A streamlined way to track her AOK
or Deeds
• Ability to share her deeds socially
PRIMARY CONCERNS
AOK geared towards youth and millennials
Content is positive and sharable
PREDEFINED GOOD DEEDS
OR AOK
22. STATS
ACTS PREFERENCESREWARD PREFERENCE
ADAM Age 18
1 10
VOLUNTEERING
1 10
MENTOR OR TUTOR
1 10
1 10
NONE
1 10
MERCHANDISE
1 10
EXPERIENCES
# TIMES VOLUNTEERED IN THE LAST YEAR
# TIMES MENTORED OR TURTORED
TYPICAL HOURS OF VOLUNTEERING OR
ACTS OF KINDNESS
PLATFORM PREFERENCE
HOW FAR OUT DO YOU MAKE PLANS FOR
VOLUNTEERING OR DOING GOOD DEEDS
2
0
Around 1-2 Hours
Mobile
Same Week or Weekend
Facebook, Instagram
PLATFORMS YOU WILL SHARE GOOD DEEDS
PAIN POINTS NEEDS
• Hasn’t found good deeds that relate to his
likes
• Wants to volunteering and do good deeds
with friends
• Doesn’t like to plan and schedule too far
out
I like doing things with
my friends and if I could
do good deeds or
volunteer with them I’d
have more fun. If I was
rewarded for my acts
that’d be great. I
know I’d participate
more often.
Adam spends most of his free time with his friends. He not very involved
with extra circular activities but he does get his school work done. He’s
volunteered a few times as part of school initiatives, but never on his own.
He’d like to get more involved, but the act of organizations and scheduling
time weeks in advance to volunteer is something he’s not interested in. He
thinks the current volunteering opportunities don’t fit his interests and if
there was a way him and his friends could do something that involved doing
good, he’d get involved and encourage his friends as well. He’s well liked in
his school and has a close knit group of friends and is an influencer both
socially and online.
KEY FEATURES
Cool Content that I can share with friends
Fun AOK that are easily to signup for
PRIMARY CONCERNS
Complicated volunteering processes
Keeping track of appointments and schedule
• Updates on Fun AOK and Good
Deeds
• Be able to do AOK with Friends
• Share his AOK with Friends
• Be able to easily redeem his rewards
PREDEFINED GOOD DEEDS
OR AOK
23. STATS
ACTS PREFERENCESREWARD PREFERENCE
DAVID Age 18
1 10
VOLUNTEERING
1 10
MENTOR OR TUTOR
1 10
PREDEFINED GOOD DEEDS
OR AOK
1 10
NONE
1 10
MERCHANDISE
1 10
EXPERIENCES
# TIMES VOLUNTEERED IN THE LAST YEAR
# TIMES MENTORED OR TURTORED
TYPICAL HOURS OF VOLUNTEERING OR
ACTS OF KINDNESS
PLATFORM PREFERENCE
HOW FAR OUT DO YOU MAKE PLANS FOR
VOLUNTEERING OR DOING GOOD DEEDS
0
0
None
Mobile
Never Volunteered
Facebook
PLATFORMS YOU WILL SHARE GOOD DEEDS
PAIN POINTS NEEDS
• No engaging content
• Inability to contribute content or comment
to the platform or discussion
• No real virtual community
• AOK that relate to his interests
I enjoy reading things
that relate to me and
let me join in the
discussion. It’s important
that I can be heard from
either participating in
the deed or from the
comments I make.
David spends most of his time reading and confounding in his thoughts.
He’s not active in either of his school or social activities. He likes to spend
time to himself learning and researching new ideas that come to hime. He’s
always curious and when he wants to know something he commits himself
intensely to uncovering as much as he can. Though he’s not very sociable,
he is vocal about his opinions and knowledge when it comes to topics he
feels he's well versed in. His social presence can be seen in his contribution
to discussion online and he believes that he has a lot to contribute but he
needs a strong cause and connection to join most activities social events.
KEY FEATURES
Smart Content that I can engage with
Ability to comment and contribute to content
Rewards and recognition for AOK and content
contribution
PRIMARY CONCERNS
Uninteresting content
Keeping track of appointments and schedule
• Contribution to discussion
• Content directly linked to AOK
• Seeing their voice being recognized
• Discovering new and interesting
ideas and facts
24. AOK COMPLETION USER STORY
Goes to
u4g.com
Looks at landing page
AOK & Deeds
Clicks
on a AOK
Navigated to the AOK
details page
Clicks
Signup
Sign up / Sign in Modal
appears
Signs
Up / Signs
Ins
AOK Details page with
What, Where, How,
Proof
Uploads
Image &
Presses
Upload
FINDING AND COMPLETING AOK OR DEEDS AND THEN SHARING THE CONTENT
Notification of
completed AOK or Deed
with new pre-populated
list of AOK & Deeds &
share icon
Click
Share
Icon
Share Modal Appears for
Facebook, Instagram or
Twitter
25. CONTENT USER STORY
Goes to
u4g.com
OR
Navigated to
u4g.com from
outside link
Looks at landing page
Sees content they're
interested in
Clicks
on a link
Navigated to the
contents detail page
Clicks
Signup
Sign up / Sign in Modal
appears
Signs
Up / Signs
Ins
AOK Details page with
What, Where, How,
Proof
Uploads
Image &
Presses
Upload
VIEWING CONTENT THAT ENGAGES THE USER INTO
COMPLETING AOK AND THEN SHARING THE CONTENT
User Content is Created
and distributed to
platform
User views the call to
action on the page for
an AOK
Clicks
on AOK
Call to
Action
Navigated to the AOK
details page
Sign up / Sign in Modal
appears
27. SIMPLE 4 STEP COMPLETION MAP
WHAT: In this section the user will be given information about what they will be
doing and what type of positive affect it will have.
WHERE: Here the user will find where they can accomplish their good deed.
HOW: In the next step, the user will be given all the info they need on how to
carry out their good deed.
PROOF: Lastly, the user will prove that they have completed their deed by
fulfilling a final requirement that is specific to the deed that they signed up for.
28. ASK4TIME
• Give some a ride: Upload Picture Proof
• Mentor or Tutor: Upload Picture Proof
• Volunteer: Upload Picture Proof
• Walk someones dog: Upload Picture Proof
• Grocery shop for someone: Upload Picture Proof
• Pick up trash or clean community: Upload Picture Proof
• Babysit for parents earning their degrees: Upload Picture Proof
ASK4GOOD
• Donate goods or food: Upload Picture Proof
ASK4VOICE
• Post messages in the real world. Post-its, Flyers or Handouts: Upload Picture Proof
• Post to social media: Upload Screenshot Proof
• Create website, media campaign or social network account for good: Upload Screenshot Proof
• Text a positive message: Input fields for phone numbers with pre-defined text message sent out
• Make something that voices a positive message to give out: Upload Picture Proof
CONTEST PARTICIPATIONS EXAMPLES AND THEIR PROOF
29. IMPORTANCE OF PHOTO OR VIDEO VERIFICATION
Photo verification emphases all business strategies and engages
end users in interacting with the site itself. It makes the site more
FUN and not a business process. This user experience is extremely
familiar and user friendly for millennials.
• Photo drives user generated content and allows them to be part
of the sites growth and initiate.
• Photos are shareable across every social media platform and
drives the organic growth strategy.
• This verification model takes the operational and financial burden
off organizations for their need to implement new technologies.
Our recommendation for photo verification on all tasks is based on
competitive research and user feedback.
31. LANDING PAGE MAP
What, Where, How
& Prove
What, Where, How
& Prove
What, Where, How
& Prove
New AOK to signup
for with Share Icon
Sign
up / Sign
in
Upload
Image
Upload
Image
Upload
Image
Sign
up / Sign
in
Sign
up / Sign
in
ASK4VOICE ASK4TIME ASK4GOODS
Landing Page
32. CONTENT ROADMAP
Content Page
External Content
Link
Landing Page
Clicks on Link
Clicks
on “Feed”
Menu or Content
Image
Reads Content
Leaves
Comment
clicks action
button
Clicks on
AOK related
Link
Comment Left AOK Details Page
33. AOK 4 STEP ROADMAP
Scrolls to Views
“WHAT” Section
Scrolls to Views
“Where” Section
Views Result of local AOK
location in the same section
Enters in
location for local
AOK or Views pre-
listed location
Scrolls to Views
“How” Section
Scrolls to Views
“Proof” Section
Completed
proof by image
upload
Taken to Pre-populated
AOK page with Content
35. FULL CONTENT
IMMEDIATE ENGAGEMENT
LIMITED CONTENT
SIGN UP REQUIRED
NO CONTENT
SIGNUP REQUIRED
Here the user is immediately
engaged with the content. They
are able to see AOK they can
participate in.
LANDING PAGE OPTIONS
Ex dosomething, omaze, prizeo
Here the user can see some of the user
generated or curated content. But to
interact with the site or participate in
AOK they must sign in/up
Ex: twitter, quora
Here the user can’t see any content or
interact with the site until they signup
Ex: facebook, linkedin
Its important to pin point the applications landing identity
37. AOK DISCOVERY, COMPLETION & REWARD SOCIAL MEDIA
When the user enters the site there is content which they can
interact with. The user can sign up for AOK, read curated
article. There focus will be the curated AOK to participate,
complete and be rewarded for and social engagement will
be secondary. The user feels more as though they are a
website, than an app or social media site.
SITES IDENTITY SCENARIOS
In this scenario the site feels like a social media site. There is
no immediate content to engage with until the user
performs certain “guided” roadmaps for content to appear
on their page. AOK participation, completion and reward
will become secondary, since the main purpose will be to
view and share content.
Ex: facebook, linkedinEx dosomething, omaze, prizeo
IDENTITY 1 IDENTITY 2
38. IDENTITY COMPARISON
AOK DISCOVERY, COMPLETION & REWARD
IDENTITY 1
STRENGTH
WEAKNESS
• Emphasizes sites key value feature
• Creates user generated content
• Engages users to complete AOK and
invite friends and family to participate
• Simpler user flow for completing AOK
• User can identify the purpose of the site
immediately instead of thinking its another
social media site
• User generated content is tied to the act and
not on the individual.
• No real content structure
• No premium content
• No real friends or community to be a part of
• Limited user engagement
This is a AOK discovery, completion and redemption experience.
39. IDENTITY COMPARISON
STRENGTH
WEAKNESS
• Keeps the user engaged with the sites content
• Allows for faster user adoption
• Creates connection between users, their friends
and content.
• Higher retention of users
• Complicated UX experience
• Longer on boarding
• Focus transfers to content and not AOK
discover, completion and rewarding
• Site feels empty till content is created by user or
certain actions are complete
SOCIAL MEDIA
IDENTITY 2
This is a social media user experience, focused on content.
41. WIREFRAME GOALS
LANDING PAGE
Show the value of becoming a user of the platform through rich premium content
Show positive curated and user generated content to encourage new users to sign up
Show the rewards the users are redeeming in a “winners” section to encourage sign up
PROFILE PAGE
Integration of social media functionality along with user and premium content with
AOK and rewards
Creating a page that encourages a user to participate in the site through different
contests and be able to share that content both internally and to other sites.
Create an interface that is intuitive and simple to navigate, but still allows user to
accomplish their positive content creation, sharing and redeeming.
42. IMPORTANT FACTORS
UTILIZE AS MUCH OF THE CURRENT SYSTEMS BACKEND FUNCTIONALITY AND NOT
OVERBURDEN TECHNOLOGICAL REQUIREMENTS WITH NEW DESIGN ELEMENTS.
TRY TO STAY AS CLOSE AS TO THE CURRENT DESIGNS GRID PATTERN TO MAKE
FRONT END REDEVELOPMENT EASIER.
UPON ON-BOARDING, USER SHOULD BE COMFORTABLE NAVIGATING THROUGH THE SITE
AND ARE ABLE TO INTUITIVELY ENGAGE WITH THE SITES CONTENT.
PLATFORM SHOULD BE CONTENT RICH AND FOCUS ON THE 3 MAJOR VALUE INITIATIVES:
• ENCOURAGING USER TO COMPLETE CONTESTS AND GENERATE CONTENT TO SHARE
• ENGAGE USERS WITH CURATED CONTENT TO CREATE AWARENESS OF PLATFORM VALUE
• REWARD USERS FOR THEIR POSITIVE CONTENT AND AOK THROUGH THE PLATFORM
1
2
3
4
43. OBSERVED OBSTACLES
1 Lack of On-Boarding - CURRENTLY NON-EXISTENT
2
Site feels empty upon entry into platform3
Confusing process flows towards creating connection with other users and causes4
Upon entry users are unaware of what K-count or K-Points are and their differentiation5
Platform current UX didn't have any organize content structure - standard top to bottom
or right to left user flows
6
User, Group and Community profile structures and navigation are neither linear or
connected to each other in an intuitive manner
Signup page confusing and cluttered
7
44. LANDING PAGE SECTION 1 & 2
1
2
3
4
1. Hero slider (image or video)
2. Call to action inside slider
3. Premium Content Image
4. Premium Content Description with Read
more link
45. 1. User generated content (Image, Name, Date &
Time)
2. User generated Image
3. User Comment
4. Call to actions (unite 4, comment, share)
5. Winner Image
6. Name of Winner & Member Since Date
7. Name of prize they won and link
1
2
5
6
LANDING PAGE SECTION 3 & 4
3
4
7
46. 1. Causes Logo and Name
2. Causes Image
3. Causes Description
4. See more causes button
5. Sponsors section with images of sponsors logo
6. Footer
1
3
LANDING PAGE SECTION 5 & 6
2
4
5
6
47. ONBOARDING
Step 1
Here the user is quickly
introduced to the value
of the platform and what
content they can expect.
Staggered positive content
will be shown to illustrate
each value point of the
site.
1. Contests Image
2. Prize Winner
3. Images of a Groups
4. Image of Sponsor or u4g leader
or advocate (dali lama or celebrity)
5. Continue button with
encouraging call to action
1
2
3
4
5
48. Step 2
This step allows the user
to connect to positive
causes and communities
so that when they enter the
site their home page isn't empty.
They will immediately
have content to engage with
and based on who they’ve
followed have the ability to
participate in contests
immediately.
1. Image of Cause
2. Follow button, once pressed will
3. turn into “following” button with a
check mark next to it.
3. Continue Button
4. Skip Step Link
1
2
3
4
ONBOARDING
49. Step 3
This step, which is
synonymous with all social
media site. It allows for the
user to upload their profile
and cover image so the
platform feels personalized
and complete when they
enter the site.
1. Default Cover Image
2. Upload button for cover Image
3. Default Avatar Image
4. Upload Button for Avatar
Image
5. Continue Button
6. Skip Step Link
ONBOARDING
1
2
3
4
5
6
50. Step 4
A critical step, especially in
early stage startup, is
allowing new users to connect
their friends and followers from
their existing social media site
and share their content with
them or
invite them to the new
platform
This will help u4g gain a
wider audience quicker since the
user generated content thats
shared, will drive new users to
the site to signup and engage
with the content and their
friends and followers.
1. Facebook Link
2. Twitter Link
3. Linkedin Link
4. Google + Link
5. Skip step link
ONBOARDING
1 2 3 4
5
51. Step 5
Simple but often overlooked
loading pages, letting the
user know that the site is
working towards customizing
their experience for them so
the user doesn't feel as
though the system has stalled
or froze, while the content
for their personalized site is
generating.
1. u4g image, time image
2. Loading gif
1
ONBOARDING
2
52. TUTORIAL
Tutorial
Before the user gets to interact
with the site, there will be an
overlay that gives a tutorial
of the u4g experience. This is
incredibly important since based on
user feedback, no one knew
what K-count or K-points were.
Also the users didn't know
what actions to take to complete
contests and how they would be
rewarded for them. All of this
needs to be clarified and walked
through, especially in a new
robust platform.
1. Modal that welcomes user
2. Text describing the modal
3. Image or Video of tutorial being
shown
4. Continue button to move to next
tutorial
5. Skip Tutorial Link
1
2
3
4
5
53. 1 1. Logo
2. Main Navigation
3. Profile Image for Settings
4. Notification Icons
5. Search
6. Profile Image with K count
7. Name, Bio & Social Media Icons
8. Cover Image
9. # of followers and following
10. User content navigation menu
11. Messaging
12. Timeline
13. Post box
14. Initial System AOK Post Suggestion
15. Suggested Events
16. Promoted Event
17. Promoted Content
18. Sponsored Rewards
This is the layout for the profile page
for when a user is viewing someones
timeline.
In all social media sites, there is a
timeline /profile page as well as a
homepage / feed page.
This timeline / profile page will allow the
user to see their own or another persons
profile content.
This page is setup through the left to
right process flow and reading of western
users. The profile image and timeline all
move a user to their content and
additional call to actions.
2
3 4 5
6 7
8
9
10
11
12
13
14
15
16
17
PROFILE TIMELINE
18
54. 1
2
3
4
5
6
7 8
9
10
11
12
13
14
15
16
1. Profile image with K count
2. Cover image
3. Name
4. # of followers and following
5. Call to action Section
6. Feed Post box
7. Image, name and time of post
8. Additional post options
9. Image Post
10. Like, Share, Comment icons
11. Comments
12. Comment box
13. Upcoming Schedule
14. Top u4g members and follow
15. Premium Content
16. Recommended Causes
17. Suggested Opportunities
18. Sponsor Image Section
This is the Home /Feed page
where the user will see all their
content. This content will be from
the people, causes or communities
they are following.
Again the flow is from right to left
where they user will move towards
the system generated content
that will drive them to engage with
the platform through following
other members, participating in
opportunities and reading
content about important causes.
HOME / FEED
17
18
55. USER TESTING
We user tested the on boarding page with the wireframes shown above. The tests
proved that the user were very familiar and comfortable with these on-boarding steps and it
helped them answer many of their questions about the platform including
• The purpose of the site and its message
• How they will interact with followers and with the site itself
• The power of completing contests and spreading a positive message
• What are K-counts and K-points
While testing with these lo-fi wireframes on the profile and feed page. We encountered that
many target market users were not familiar with navigating through wireframes. To resolve
this issue we took it upon ourselves to create hi-resolution designs of the profile and feed
page. (Although not part of project scope) Once this was done and re-tested, we received
very positive feedback on the pages navigation menu and how the user progressed through
its content. During testing, the users understood the sites process flow and intuitively
engaged in creating positive content.
Hi-Resolution designs in the next 2 pages.
56. Self Profile Page
High-Resolution
These hi-res design were created to
properly user test the pages and receive
the adequate feedback needed to be able
to make the necessary revisions. Showing
non-technical users a Lo-Fi Wireframe
would not have resulted in the feedback
required to deliver the final results shown
here.
Here you are looking at profile page
for a new user that hasn’t posted
anything to their timeline yet. You can
see that the few differences are:
1. Instead of a “message” button you
see an edit profile button.
2. The “followers” section is viewable
3. There is a system generated “first”
post that you can post to your own
timeline and also share to other
social media platforms.
NOTE
57. Following Page
High-Resolution
Here you are looking at another users
profile page. The main difference
between this and the your own profile
page are:
1. There is a message button instead of
edit profile button
2. you can not see the # of followers they
have.
Everything else on the page will be the
same as if you are looking at your own
profile page. This keeps the system more
uniform and easier to get accustomed to
and adapt.
58. HOME / FEED
High-Resolution
Here you are looking at the feed
page for your own profile. You can
see your profile info on the left,
along with 3 call to actions below
it.
In the middle is the actual “wall” or
feed. On the right is where the
system will generate followers and
content that best relate to the
users based on the groups,
followers and followings they have.
Each page always stresses the
importance of content and its
relation to users and contests.
