App Description
Pathway is a social goal-setting app that allows users to set goals, and be inspired by the experiences of people they follow on the app. Using step-by-step templates, users can establish and achieve short-term Goals and long-term Dreams. Concise reports are tracked and presented as daily, weekly, monthly, and yearly results and statistics, which makes it easy for users to track their progress.
This design was created for Shopify's Winter 2017 Design Intern Challenge. I was a top 8 candidate of roughly 250+ applicants.
Brand Board
App Landing Page
Interaction Models • App Landing Page
1. Scrolling – on-scroll, users can view all website content on one page in logical sequential order
Rationale: simplifies navigation, consolidates content into a single place, has more storytelling potential to engage users in a smooth, linear fashion, users are continually entertained with new content without clicking or waiting, translates and responds well on mobile
Usage: optional navigation method; always present (never disabled)
Rationale: simplifies navigation, consolidates content into a single place, has more storytelling potential to engage users in a smooth, linear fashion, users are continually entertained with new content without clicking or waiting, translates and responds well on mobile
Usage: optional navigation method; always present (never disabled)
2. Slide-out/Sidebar – upon clicking the fixed hamburger icon, a sidebar menu will animate in from the left which displays the global navigation, email contact information, and links to social media
Rationale: global navigation is always above the fold without disrupting the content flow, saves screen space, translates and responds well on mobile
Usage: hamburger icon; always present (top left)
Rationale: global navigation is always above the fold without disrupting the content flow, saves screen space, translates and responds well on mobile
Usage: hamburger icon; always present (top left)
3. “Jump to” section – upon clicking any of the fixed five circles, users can easily “jump" to the page they desire
Rationale: fixed menu allows users to move freely, lets users return to the start if they get lost, users can break sequence and "jump to" a section if they are looking for something specific
Usage: fixed five circles; always present (middle right)
Rationale: fixed menu allows users to move freely, lets users return to the start if they get lost, users can break sequence and "jump to" a section if they are looking for something specific
Usage: fixed five circles; always present (middle right)
4. Card grid – grid contains a set of images divided into circular "blocks" that expand and collapse information pertaining to that subject
Rationale: highly visual structure that groups relevant elements together, allows user to visualize themes, large click/tap targets, translates and responds well on mobile
Usage: Personalized Content section
Rationale: highly visual structure that groups relevant elements together, allows user to visualize themes, large click/tap targets, translates and responds well on mobile
Usage: Personalized Content section
5. Sliders – carousel "slideshow" that displays different information on-click
Rationale: easy toggling/seamless transition between content, consolidates content so that it's more visible on one screen (saves screen space), users can control which content is visible and can go at their own pace
Usage: How it Works & App Features sections
Rationale: easy toggling/seamless transition between content, consolidates content so that it's more visible on one screen (saves screen space), users can control which content is visible and can go at their own pace
Usage: How it Works & App Features sections
6. Content-based – hyperlinks embedded into content with meaningful labels
Rationale: meaningful links makes learning more about that piece of information easy to navigate to, will stand alone and help users who are scanning the page, are accessible, and are more enticing/persuasive for users to click on
Usage: Personalized Content section – "10 categories" hyperlink
Rationale: meaningful links makes learning more about that piece of information easy to navigate to, will stand alone and help users who are scanning the page, are accessible, and are more enticing/persuasive for users to click on
Usage: Personalized Content section – "10 categories" hyperlink
Mobile App
Homepage Illustration
Illustration Close-ups
Art Style Process
Research
Biggest insight: setting goals is much easier than achieving goals. There are nine reasons why achieving goals can be difficult:¹
1. Lack of commitment – thinking about achieving a goal is not enough
Design solution: create a mobile app that acts as a motivation tool to achieve goals
Design solution: create a mobile app that acts as a motivation tool to achieve goals
2. It's just a fantasy – goals need to be more than just a dream
Design solution: allow users to differentiate between short-term goals and long-term dreams; recognize, in some cases, goals contribute to dreams
Design solution: allow users to differentiate between short-term goals and long-term dreams; recognize, in some cases, goals contribute to dreams
3. Too result-focussed – people focus on final result without understanding the steps it takes to achieve goals
Design solution: provide pre-set and customizable step-by-step templates to show users the "pathway" to achieve goals
Design solution: provide pre-set and customizable step-by-step templates to show users the "pathway" to achieve goals
4. Procrastination – focus on negative aspects can delay progress
Design solution: generate goal-specific notifications to keep users on-track
Design solution: generate goal-specific notifications to keep users on-track
5. Retaining goals – holding onto goals that are no longer of interest
Design solution: provide users with 10 categories to help narrow down interests
Design solution: provide users with 10 categories to help narrow down interests
6. Setting unobtainable goals – dedicating time and effort to achieve unrealistic and potentially impossible goals
Design solution: provide pre-set and customizable step-by-step templates that implement SMART guidelines
Design solution: provide pre-set and customizable step-by-step templates that implement SMART guidelines
7. Expecting immediate results – illusion that goals are attainable overnight
Design solution: deliver concise reports that are presented as daily weekly, monthly, and yearly results and statistics
Design solution: deliver concise reports that are presented as daily weekly, monthly, and yearly results and statistics
8. No goal ownership – wanting to achieve goals for the wrong reasons
Design solution: provide users with 10 categories to help narrow down interests
Design solution: provide users with 10 categories to help narrow down interests
9. Not celebrating success – not feeling like progress is being made
Design solution: show steaks and allow users to collect points to reward them for completing key milestones
Design solution: show steaks and allow users to collect points to reward them for completing key milestones
Reference
¹ Calabresi, S. (2014, May 30). Inbound Marketing Sales Blog. Retrieved October 02, 2017, from https://www.newbreedmarketing.com/blog/difficulty-achieving-goals
Wireframes • App Landing Page
Wireframes • Mobile App
