Prototype stage

The "X-plore" app is currently in the prototype stage of the UX design thinking process. This phase focuses on transforming ideas and concepts into tangible, interactive representations. This phase is about crafting a functional model that captures the essence of the app's features, layout, and user interactions. Through this prototype, we can in the test phase persform test and refine the user experience, ensuring that the final product seamlessly integrates enviromental user-friendly features ie, video/audo lessons, quiz, challange, post, event, chat and forum feature

Prototype goals

1. Create low-fidelity wireframes that provide a basic visual structure of the app's key features.

2. Develop mid-fidelity wireframes that add more detail to the app's interface and user interactions

3. Ensure that the prototype is designed with a strong focus on the needs and preferences of postnatal users.

4. Identify and prioritize the most crucial features and functionalities for each section of the app.

5. Enhance the wireframes with more specific design elements, including icons, color schemes, and navigation flow.

6. Prepare the wireframe prototype for usability testing.

MoSCoW method

Prototype
MoSCoW

The MoSCoW method is a valuable tool for decision-making and efficient prioritization of requirements and ensure that the most crucial elements needed by users and design components were addressed first ... This method helps me make well-informed choices about which essential and critical features and components I should focus on first, then consider adding extras if time and resources are available.

Persuasive design

...

The app design focuses on the F scanning pattern, layer cake pattern, and spotted pattern, white space, headings, short text, different font size, colors, shape, icons, label and images. ... This will make it easier for William to quickly scan the apps content and locate relevant information. These elemens contritbute to the visual appeal of the design and play a role in creating a positive impression

...

Familiar design functionality such as carousel, accordions, tabs, modal, drop down, input field, read more/read less functionality are used. This aligns with behavioral design by focusing on providing interaction that are intuitive and recognizable to users, allowing him to interact with the app effectively... ... without the need for exstensive learning. Since Williams time and motivation are limitated the design aims to minimize cognitive effort and enable him to perform activity efficiently. This aligns with behavioral design principle that priorize ease of use and task completion

...

The app has a well structured site architecture, provides a good combination of images, text, buttons, icons, familiar design components like accordion, tabs, modal, drop down to make William reach the goal in a efficient way regardless of his experience level. ... ... William can easily navigate through activity options, utilize back and forward buttons, apply filters, track progress via breadcrumbs, access dropdown menu and explore off-canvas content. The step by step information during sign up is designed to accomondate users like William who have a limited attention span. To avoid overwhelming him with text, most information is condensed within accordions and off-canvas elements, allowing users to click and expand section for futher reading. The app place users in full control over their action, activity, reading preferences and task. Overall, the user experiences is seamless, cohensive, and intuitive, offering a logical, fun, journey throughout

...
1 / 3
Onboarding process
2 / 3
App homepage and chat feature
3 / 3
App video lesson, quiz and results
4 / 4
App enviromental challange