Initial App Wireframe

-

Week 3

This week, my main task was to start designing the user interface (UI) for the app based on the core concept and target users established in the previous two weeks. To create a more structured and user-friendly flow, I used Figma to complete the initial wireframe of the app interface.

UI Design Goals and Philosophy:

In the UI design process, I focused on the following key aspects:

  1. Simple and intuitive layout: The interface features large icons, large font sizes, and high-contrast colors to ensure Alzheimer’s patients don’t feel confused during use.

  2. Warm and friendly aesthetic: The color palette includes soft pinks, blues, and yellows combined with visual elements of puzzles and memory, creating a comforting and emotional experience.

  3. Clear module separation and ease of use: The core functions are organized into five main pages: Start Page, Login Page, Home Page, Memory Map Page, and Achievements Page. This ensures that each step in the user journey is logical and easy to follow.

Page Structure and Functional Overview:

  • Start Page: Displays the app logo and brand identity to establish recognition.

  • Login Page: Supports login via Google, Apple, and Facebook, with a user-friendly layout for account creation and password recovery.

  • Home Page: After login, users are greeted with their photo and a welcome message. The main interface includes four key functions: “Play Puzzle,” “Memory Map,” “Difficulty Setting,” and “Achievements.”

  • Memory Map Page: Displays photo locations on a map, helping users recall memory scenes. Clicking a photo leads directly to the puzzle game.

  • Achievements Page: Showcases completed puzzle images, visually reinforcing users’ memory and sense of accomplishment.

Design Considerations:

This UI is not just about visual appeal—it’s designed to balance clarity of function, emotional warmth, and cognitive accessibility. Every button placement and color choice was made with Alzheimer’s users in mind, ensuring that the app is easy to navigate and pleasant to interact with.

Initial Wireframes

Next Steps:

  • Begin developing the basic structure of each UI page;

  • Continue researching literature and case studies to further refine functional logic and details;

Comments

Post a Comment

Popular posts from this blog

Clarifying the Purpose

-
Image
Week 2 After receiving feedback from my instructor, I began to rethink the significance and purpose of this app. The core question was: Why would users want to play this puzzle game? Since not everyone would play a puzzle game for no reason, the app must offer more value than just entertainment. Therefore, I redefined the app’s target audience as elderly users with Alzheimer's disease , and repositioned the project as a memory-aid tool . Clarifying the Purpose and Audience: This week, I conducted further research on the cognitive needs of Alzheimer’s patients. I learned that patients often struggle with memory loss, emotional detachment, and difficulty recalling everyday experiences. Compared to ordinary puzzle games, a tool that aids in memory recall and emotional connection would be more meaningful to this group. Thus, my app, which combines jigsaw puzzles with personal photo memories and map-based location cues , could serve as a way to both stimulate cognitive functions ...
Read more

Video Shooting Begins

-
Image
Week 6 This week marked a major milestone — the video shooting phase officially began for the promotional video of the Memory Puzzle app. With the storyboard and script finalized in Week 5, I proceeded to organize the filming sessions, capturing the emotional narrative and key app interactions. Progress This Week: Filming Completed : All scenes from the four-part script have been filmed, including: The emotional opening where the grandmother gazes out the window. Moments of interaction with the NeuroMap  app. The final scene featuring emotional taglines and app branding. Footage Overview : A wide range of clips was captured across different settings, including both indoor scenes and app close-ups. Visual materials include .MP4 and .MOV formats, with each clip focused on natural expressions and smooth transitions that align with the emotional tone of the story. App Demonstration : A dedicated screen recording of the app prototype was also included to clearly show t...
Read more