Challenge Summary
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback01) Splash and Login Screen (Portrait)
02) Navigation Screen (Portrait and Landscape)
03) About Screen (Portrait)
04) Practising mii-chi Screen (Portrait and landscape)
05) Bespoke mii-chi Screen (Portrait and Landscape)
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01) Splash and Login Screen (Portrait)
02) Navigation Screen (Portrait and Landscape)
03) About Screen (Portrait)
04) Practising mii-chi Screen (Portrait and landscape)
05) Bespoke mii-chi Screen (Portrait and Landscape)
06) Quick Start mii-chi Screen (Portrait and Landscape)
07) mii-chi moment Screen (Portrait and Landscape)
08) mii-chi progress Screen (Portrait)
09) mii-chi 10 Pillars Screen (Portrait)
10) mii-chi Alarm Screen (Portrait and Landscape)
11) mii-chi Category Screen (Portrait and Landscape)
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
'mii-chi' is a bespoke transformational wellbeing application which will teach people how to make micro-changes to their lifestyle that will make a macro-change to their life. The app will deliver a unique sound and colour guided meditation experience (already created as a linear piece but will need to be adaptable to deliver a bespoke sequence). This app offer services and information for people to practice mii-chi on a daily basis, any time, any place, anywhere. Longer-term it will enable communities to share information between themselves and a network of professional mii-chi practitioners.
In the longer-term, the app should be able to interact with wearables that give health metrics and location data and existing diet/health recording apps/services. Also, we envisage the app being connected to augmented reality devices.
For more information about mii-chi, you can check our site that can be found from the following link: http://www.mii-chi.com/ and read the mii-chi brief from challenge attachment (mii-chi app briefing document.pdf)
Design Consideration
- Your design needs to look cool and contemporary
- Do not using cliched energy healing / chakra imagery, we want to be stand out!
- The functionality needs to be smooth and the graphics should use the best practice for mobile devices
- Your design needs to be able to consider of supporting multi-language version (english, arabic, chinese, india, etc)
- Color choices are important here, the color we provide in PDF reflecting user chakra and energy that must be utilized in the app
- Simplicity to find necessary information
- Best Practice for Mobile Design
- Easy to understand flow from page to page and knowing which section you are in (denoted by the colours of each chakra) and how to move to another section
- Intuitive for the user; should never be left asking "what do I do next?" or “how do I get to another section?”
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=654704
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Splash and Login Screen (Portrait)
Reference Screen "wireframes.pdf" page 3
- User will see the Splash screen every time they open the mii-chi app
- Make sure to embed the mii-chi logo and tagline in the application
- User can use button to skip the splash screen where they will be redirected to login screen
- Login screen, provide login mechanism (can be login form or 3rd party accounts from social media)
- Login screen, 'Remember me' features (so user don't need to login everytime they open mii-chi app)
02) Navigation Screen (Portrait and Landscape)
Reference Screen "wireframes.pdf" page 4, 5
- Once user successfully login to the app, they will see the main navigation where they can explore the application
- The coloured circles, beside being used as main navigation, are a representation of the 7 main energy centre in the body. They are also known as 'Chakras' (https://en.wikipedia.org/wiki/Chakra)
- As this is a universal image (for chakras) I thought it would also be a good main navigation tool for the app. It does mean we are restricted to 7 main navigation icons and colours, however we could increase it to 8 if we used white as well at the very top ie above the violet circle
- Circles are a good shape and the colours of the rainbow in the ascending order is key.
- To navigate, user will need to click the circle first and it will show menu available inside the circle, and then user will need to click the menus again to navigate to the other pages. Clicking on a circle will take the user to the pages of that section which should be clearly colour coded so that colours represent the overall look and feel of the app as well as providing navigational detail
- User can press the coloured circle in any order so its not a linear/ordered process, as the user could press any circle in any order to choose which features they want to use in the app
- The Details menu list can be found below:
-- About mii-chi
-- Practising mii-chi
-- Bespoke mii-chi
-- Quick Start mii-chi
-- mii-chi moment
-- mii-chi progress
-- more mii-chi
- We need more cool, neat, and professional design screen for this one (do not just follow the plain colored circle)
03) About Screen (Portrait)
Reference Screen "wireframes.pdf" page 6
- Scrolling screen that would contain information about mii-chi
- Need to have some category in it where user can drilled down to detail to find more information
- Need some 'back' button where user can go back to the main navigation screen
04) Practising mii-chi Screen (Portrait and landscape)
Reference Screen "wireframes.pdf" page 7 to 14
- When user choose Practising mii-ci menu, there will be a sub-menu appear (provide interaction on how the sub-menu should appear in the app)
- The sub-menu content actually the step by step to practice the mii-chi, here are the content:
-- Breathe
-- Prepare
-- Energy Balancing
-- Intuitive Healing
-- Intuitive Balancing
-- Quiet Mind
-- Tapping
- Clicking each sub-menu will show a new screen that simulate the mii-chi practice using animation/video/ or interactive motion clip
- For now, the animation/video/interactive motion clip is out of scope for the challenge, just provide the sub-screen layout for:
-- Showing text instructions
-- Showing animation/video/interactive motion clip (content can be an image for now, choose image that have similar design that we provide in the pdf)
- Need a navigation to go back to the main menu
05) Bespoke mii-chi Screen (Portrait and Landscape)
Reference Screen "wireframes.pdf" page 15 to 17
- This is the fundamental part of the mii-chi app. This is a representation of a bespoke guided mii-chi meditation.
- This is a very simple screen from a user perspective that will set mii-chi apart from any guided meditation app
- This is a mii-chi unique feature that enable users to give themselves a unique mii-chi experience every time they use the app
- User will need to measure their 'feel' first in order to get the proper mii-chi treatment based on their current condition
- No mii-chi treatment is ever the same. So if the app gave you a treatment today, It would be different tomorrow as your energy will have shifted
- Obviously if the user answers identically and chooses the same duration, then their treatment will be the same BUT where and when they place their hands on their body will be different
- The whole purpose of the mii-chi app is to enable users to give themselves an holistic energy healing treatment without needing to see an energy healing therapist all the time
- mii-chi is all about give people the tools techniques and practices to heal themselves. Or to put it another way to allow their mind's and body's to heal themselves
- The score means that the user can track their score overtime. This also adds an element of gamification to the app (see page 17 of the wireframe)
- We use this scoring when working with individuals overtime and giving them a series of treatments so that they can see progression
- After seeing the score, user will need to choose the treatment duration and then user can do guided meditation using video and sound provided in the app
- Please see our "mii-chi blue 10.mp4" for the sample of video and sound treatment (check also the google docs “mii-chi video explanation” for more information about the video)
06) Quick Start mii-chi Screen (Portrait and Landscape)
Reference Screen "wireframes.pdf" page 18 to 19
- This screen actually similar with the Bespoke above but this time user don't need to measure their feeling, user can directly choose duration of the treatment and start the guided meditation.
07) mii-chi moment Screen (Portrait and Landscape)
Reference Screen "wireframes.pdf" page 20 to 22
- This screen actually similar with the Bespoke above but this time user don't need to measure their feeling and they can choose particular mii-chi moment, such as:
-- Feel more wise, conscious and knowledgeable
-- Feel more perceptive, imaginative, and interpretative
-- Feel more communicative, expressive and creative
-- Feel more compassionate, accepting and loving
-- Feel more purposeful, spontaneous and improve your self esteem
-- Feel more open, knowing and intimate
-- Feel more content, relaxed and trusting
- Each mii-chi moment will open the relevant colour and sound video only. For example orange mii-chi moment 'Feel more open, knowing and intimate' will only use the orange video and orange sound sequence.
08) mii-chi progress Screen (Portrait)
Reference Screen "wireframes.pdf" page 23 to 24
- This screen will show user app statistic history
- Ability to see Progress:
-- By time (last session, week, month, year)
-- Progress by health
-- Exercise
-- Daily mii-chi diary
- Integration with 3rd party devices like apple watch, fitbit, etc
- Detailed analytics sections using analytic system that can be shared between app (heart rate, steps, nutrition)
- On 'daily mii-chi diary, please refer to page 24 of the wireframes to see what kind of content that user can fill in to the app
09) mii-chi 10 Pillars Screen (Portrait)
Reference Screen "wireframes.pdf" page 25
- This screen will show the 10 pillars of mii-chi as sub-menu
- The 10 pillars are:
-- Breathe,
-- Smile,
-- Scan,
-- Move,
-- Hydrate,
-- Nourish your body,
-- Nourish your mind,
-- Focus,
-- Relax,
-- Sleep
- Every sub-menu will have it's own detailed screen that showing information of each pillars
- Will be great to be able to see graphics that will be able to present each 10 pillars (For example for 'Breathe', graphics that able to present 'breathe' may expand and contract in a breathing motion. For 'Smile', the word would animate into a smile. Etc.)
10) mii-chi Alarm Screen (Portrait and Landscape)
Reference Screen "wireframes.pdf" page 26 to 28
- Needs and alarm feature created in the mii-chi app
- User can use this for their sleep or wake up phase
- The ideas is, when user set the alarm, either for sleeping or for waking up, the mii-chi application will play the video and sound
- mii-chi alarm should be portrait for settings and landscape for video/sound delivery.
- The video will run the same core sequence of colours for both the sleep and the wake up sequences i.e. going from red, orange, yellow, green, blue, indigo and into violet. The only difference will be the sleeping sequence will start with a white screen, and the waking sequence will end with a white screen. The screen will dim in brightness for the sleep sequence and the screen will become brighter through the wake sequence.
11) mii-chi Category Screen (Portrait and Landscape)
Reference Screen "wireframes.pdf" page 29
- mii-chi is an umbrella brand and in the future, we will add more features in it
- Need to create a single screen that able to cover all category for mii-chi features in the future
- Each brand extension will require it's own section of the app and will comprise text, moving graphics,sounds and colour (out of scope)
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- 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 this link while you upload).
Branding Guidelines
- Follow http://www.mii-chi.com/ (as a starting point)
- The mii-chi logo is in red with the balance bar and ball centered. The logo can also be white for when it needs to be reversed out. In black and white the logo would be grey
- mii-chi is always written in lower case with a hyphen ie 'mii-chi'
- The typeface used is Arial Rounded MT Bold
Documentation
https://drive.google.com/drive/folders/1aYcJcH9aKU3ltaZusTigtJEA_N1mBbq7?usp=sharing
- Wireframes.pdf (Screen Requirements)
- mii-chi app briefing document.pdf (Explanation about mii-chi)
- mii-chi blue 10.mp4 (Video for mii-chi treatment/guided meditation)
- mii-chi video explanation (Explanation about the mii-chi video)
Target Devices
- Mobile Design: 750 x 1334px (iPhone 6,7,8)
- Need Both Portrait and Landscape version (See the screen requirements)
Target Audiences
- 18-65 Years age range
- Urban professionals in developed countries
- 50:50 male and female Smartphone users
- People who feel that they need to relax a bit more during their day to day life
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on the Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to be converted to PSD later), XD or Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colourshttps://apps.topcoder.com/forums/?module=ThreadList&forumID=654704
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.