FLAGSHIP WEB APP

for INSPIRETOSMILE.COM

Role: UX/ Creative Direction/ UI Design/ Prototyping

About a 15 min read

result: in development

SMILE REASON WEB APP

A positive digital experience powered by InspiretoSmile.com.

Providing media designed for calm reflection. Presenting positive affirmations in a zen, new way.


STRATEGY

[ user needs + product objectives ]

Defining the target audience took some effort. I started with google analytics of the website. Also gathered insight data from facebook community page, youtube channel and instagram profile. From all this data I started to model personas. As the personas took shape, I did an empathy map per audience. All of which really helped define and align product value propositions to user needs and goals. Also, doing a competitive analysis really helped identify KPI's to strategize a competitive advantage.

User Needs

Tyler, Monica and Tony feel that its hard to stay upbeat while indulging in social media. When they do try to filter out negative content or look for positive content, there are consistent interruptions and bad media habits by design. If you do find affirmations, there are too many ugly lists, written in boring language which are usually full advertisements. Also, while in the topic of ads; they are so over the click bait. They aspire to utilize the subconscious to reclaim their personal power. They desire to create a positive and encouraging mindset. They also want to find inspiring thoughts for daily motivation.

Product Goals

Provide media designed for calm reflection. Empower readers through daily affirmations and smile reasons. Be a tool for shifting and holding focus in positive and encouraging state. Plant seeds of optimism and hope into reader’s subconscious.


SCOPE

[ functional specifications + content requirements ]

Keeping in mind the personas, I did a brainstorming for solutions to meet their goals and alleviate their pain points. All of which really helped define and align product value propositions to user needs and goals. I put together a task analysis diagram along with a content inventory list to manage the project requirements and begin to strategize development.

  • Tech must be mindful of its impact in user's life
  • Tech should create calm
  • Tech can communicate but doesn't need to speak
  • The right amount of tech is the minimum needed to solve challenge
  • Tech should respect user's time

STRUCTURE

[ interaction design + information architecture ]

A card sorting exercise helped me organize and pair down ideas for solutions down to an MVP. I then mapped out the structure to help me prioritize development tasks and needs.

VALUE PROPOSITIONS

  • DISCOVER
    Access the growing collection of Smile Reasons.
  • FAVORITE
    Curate a list of your favorite Smile Reasons.
  • CREATE
    Create and submit your own Smile Reasons.
  • CUSTOMIZE
    Choose your favorite color theme, change the background, and choose a font.

SKELETON

[ information design + interface design + navigation design ]

I start to test out navigation system ideas with sketch prototypes. Also, I gather content and further define content requirements and how that content is organized. As, navigation and content is gaining clarity, I begin low fidelity pencil wireframes. In the spirit of rapid prototyping, I then test some more with high fidelity wireframes in Adobe XD.

Sketches

Low fidelity brainstorming pencil sketches

Wireframes

Wireframes done in Adobe XD

SURFACE

I gathered the branding style guide and brand components. I kept notes and made the moodboard as I did some design inspiration research online (behance, dribble, awwwards, giphy, codepen ). I designed the interface in Adobe XD, which I leveraged to utilize their Design Specs and Prototype delivery.

 

SUMMARY

After a round of design revisions I coded a functioning prototype. I used this prototype for an internal QA launch, which I shared with a test group of about 30 people. I tracked this internal QA with google analytics and did an informal survey to find opportunities for improvement. With this insight, I got to work on the next itiration and used that for a beta launch. I continue to track the latest itiration with google analytics to further improve with each sprint.

smilereason.com media designed for calm reflection

CONDITION YOUR MIND FOR GREATNESS, ONE SMILE REASON AT A TIME

A smile reason can be a seed for good/wellness to be planted in your subconcious. Wherever you put your thoughts, you put also your energy and intention of creation. SmileReason is a digital tool meant to empower you in taking charge of what content is fed into your subconcious. Claim your personal power, shift your emotional focus towards growth, wellness, and progress. Condition your mind for greatness one smile reason at time. There are so many reasons to smile. Find yours today.

-- NEXT CASE STUDY --
×