Challenge Summary
Round 1
Submit your initial designs and any notes you might have for checkpoint review.01) Patient Registration Workflow (Responsive Web and Mobile)
02) Patient Dashboard (Responsive Web and Mobile)
03) Physician URL Landing Page (Responsive Web)
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your initial designs plus checkpoint feedback implemented for the final review.01) Patient Registration Workflow (Responsive Web and Mobile)
02) Patient Dashboard (Responsive Web and Mobile)
03) Physician URL Landing Page (Responsive Web and Mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2
CHALLENGE OBJECTIVES
- UI Design for responsive web and mobile screens.
- Design for 3 unique scenarios
- Provide a ready to implement design for the production phase.
- How well your design aligns with current branding and provides a seamless user experience.
PROJECT OVERVIEW / BACKGROUND
- Ognomy is a teleoffice app that right now has 2 main parts: the patient-facing mobile app and the office web app. This allows patients to connect to sleep specialists over Zoom. The Ognomy team noticed that most of their patients are in the 55+ crowd and don't really understand what they are getting when they download the mobile app. The assumption is that patients think they are getting an app that tracks their sleep quality, habits, etc. instead of a telehealth communication app.
- We also need a design for a landing page for physician URLs; they would like to have custom URLs so that physicians can send patients directly to their “page” so the patient user will automatically be assigned to them. E.g. Dr. Smith in California will be ognomy.com/smith and patients who he gives his URL to, won't end up assigned to Dr. Wright in Kansas.
Expected Solution:
- Design a registration workflow.
- Patient dashboard.
- A dedicated physician URL landing page.
Glossary
- Telehealth: Telehealth is the distribution of health-related services and information via electronic information and telecommunication technologies. It allows long-distance patient and clinician contact, care, advice, reminders, education, intervention, monitoring, and remote admissions.
AUDIENCE
- Ognomy users: Senior citizen age > 55 years old and patients who have sleep issues.
PERSONA
- Name: James Clark
- Occupation: Pensioner, age 55
- Role: Ognomy app user
- Pain Points: Misconception for Ognomy as sleep tracker rather than telehealth service provider.
- Wants: A dedicated web portal to register and book appointments with assigned physicians for their sleep issues.
USER STORY: Registration and Dashboard
- James opens the Ognomy website and finds a button to register on the Ognomy landing page. (out of scope).
- He clicked on the register button and asked to complete the registration flow by providing his personal details, insurance details, credit card details, and scheduling details.
- Upon completing his registration process, he was automatically taken to his dashboard. James can see his health summary information on the dashboard with his upcoming appointment.
USER STORY: Physician Static URL
- James was given a link by his physician and opened the link on a web browser.
- He landed on the physician landing page to see details about his physician with the option to book an appointment.
SCREENS / FEATURES REQUIREMENTS
For this challenge, we are looking for you to create a set of screens that are easy to use for the following scenarios. Feel free to take creative liberties when designing the screens:
01) Web Registration Workflow
- Ognomy wants to convert more app users into registered patients who receive care on their platform by creating new user registrations workflow via web browsers.
- Your design should provide capability for patients to onboard seamlessly through their browser.
- Keep in mind that your design needs to be responsive design to allow them to use this on any device (laptop, tablet, or phone).
- Show progress indicators for each step.
- On top of all registration workflow screens, we need a banner that says: “You can also contact us at 1-877-664-6669 for live assistance."
- Below are details on each step and informations needed for completing registration flow:
- Step 1: Onboarding
- ������Have text to onboard users for registration flow: “Before we can send you a home sleep test, we have to schedule you for a virtual appointment with a doctor. Just like you’d expect with a traditional doctor’s office, we have to ask you some questions first:”, with a start button to begin the registration journey."
- Step 2: New User/Password creation?
- Are you a registered Ognomy App user?
- If Yes: user can provide their email address to continue
- If No: user need to provide for account creation:
- Email address
- Password, show this password rule “Password must be 8 characters long and contain an uppercase letter, a lowercase letter, a number, and a special character.”
- Step 3: Personal Details
- Email address
- First name
- Last name
- Address
- Mobile phone number
- Date of birth
- Step 4: Insurance Details
- Do you have insurance?
- If Yes, then:
- Show this text: “If you have health insurance, please enter it below. Don’t worry, prior to your appointment, we will verify to ensure your insurance covers the service. We will also let you know if you have a co-pay. We will ask for a credit card that will be used for your co-pay, but we will not use your credit card for any other payments without your prior consent. You can always cancel 48 hours before the appointment at no charge.”
- Then patient will be asked to provide these details:
- Type of insurance
- Insurance ID number
- Name of policy holder
- Relationship to policy holder
- Date of birth of the policy holder
- If No: show this text: “No problem. We will email you information on our self-pay options. In the meantime, you can continue to schedule an appointment, or, you can click here to set up a time to speak to one of our sleep support team members to discuss your options.”
- Step 4: Credit Card Details
- Credit card number
- Credit card issuer
- Exp date
- Ccv
- Step 5: Scheduling logic.
- Refer to page 6 of Ognomy Summary.pdf.
- How can we adapt this mobile design into web design?
- Step 1: Onboarding
02) Patient Dashboard for Web
- Refer to page 14 of Ognomy Summary.pdf for some information related to patients.
- This dashboard will show once a user successfully logged in to the Ognomy website.
- Show some informative and useful data for the patients, it can be in chart, table, summary, etc.
- There will be an introduction video that needs to be shown in the Patient Dashboard especially after the user makes an appointment for the first time. This video explains the next steps in the process. We want to see concepts for how you imagine this can be done. It should be easy to find and easy to close.
- Think about what information is useful and what is not. Eg. Do we need to show family history in the patient dashboard? Do we need to show the next appointment?
03) Physician URL Landing Page for Web
- Doctors should have the ability to have a static link to provide patients. E.g. Dr. Smith with ognomy.com/smith. This would enable a doctor to give out their own link.
- Treat this screen as a sales page to promote the physician. The expected journey is that the patient will make an appointment if the user logged in. If not, provide a CTA “Register Now” which will bring the user to the registration scenario.
- There will be an embedded video on this page, welcoming people to Ognomy and explaining the service they provide.
- Some information to show is:
- Physician name
- Physician photo
- Testimonial from patients
- An overview of the progress, e.g.: Register, make an appointment, Ognomy works with insurance for approval, user pays copay online, receives a home sleep test in the mail, takes the sleep test, gets results and treatment.
- Any additional details to strengthen this landing page.
JUDGEMENT CRITERIA
- Creativity: Conservative; barely new ideas, use what is already proven to work.
- Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
- Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
- Branding: Strict; carefully follow the provided guidelines and stick to them.
DEVICE SPECIFICATIONS
- Responsive Web for Desktop: 1366 x 768 pixels (height can be adjusted accordingly).
- Responsive Web for Mobile - iPhone X: 1125 x 2436 px (height can be adjusted accordingly). It is recommended for you to design in @1x (375 x 812 px, and export your design in x3).
DESIGN ASSETS
Find the challenge assets in the forum.
MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App
- Please request for marvel app in the challenge forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
SUBMISSION AND SOURCE FILES
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
- Declaration files document contains the following information:
- Stock Photos Name and Links from allowed sources
- Stock Art/Icons Name and Links from allowed sources
- Fonts Name and Links source from allowed sources
Source Files
All source files of all graphics created in either Adobe Photoshop, Adobe XD, Figma or Sketch.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.