https://github.com/sondosaabed/khatttech-high-fidelity-final
https://github.com/sondosaabed/khatttech-high-fidelity-final
design high-fidelity-prototype nanodegree prototype udacity-nanodegree user-experience
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/sondosaabed/khatttech-high-fidelity-final
- Owner: sondosaabed
- License: mit
- Created: 2025-07-02T15:10:06.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-21T20:43:50.000Z (3 months ago)
- Last Synced: 2025-07-21T22:30:11.218Z (3 months ago)
- Topics: design, high-fidelity-prototype, nanodegree, prototype, udacity-nanodegree, user-experience
- Homepage:
- Size: 277 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KhattTech High-Fidelity Final
## 1. Link to Midterm Review & Figma Prototype
- [Project Link in Github](https://github.com/sondosaabed/KhattTech-High-Fidelity-Midterm)
- Find the reviw as PDF in the files under Midterm-submission-review.pdf
- [Figma Prototype](https://www.figma.com/proto/H4nPD778PuO7OBR5v7N6z0/High-fedality-Mockups?node-id=0-1&t=7UIBmHVw8vDsTNUW-1)## 2. Accessibility
In this section I Improve accessibility of my design.
- I reviewed and look for issues and opportunities for improvement in accessibility and annotated the screens accordingly.
- Implementing these improvements on a new frame and placed them side by side to demonstrate the improvement.
- annotated changes I’ve made
- [Figma Project Link](https://www.figma.com/design/YUVbeKHyrSP2N8r1rwQrCx/High-fedality-accessability-improvements?node-id=1-329&t=Am5LHHtlfg97GtLj-1)## 3. Design Performance
Solution for this part could be find under the report pdf file named: Design-Performance-Report.pdf### 3.1 Testing your design
- Tasks to be tested:
- Task 1: Chose your image by either ways and successfully reach the recognition screen.
- Task 2: Try editing the image you chose
- Task 3: Try to download the recognized text.
- Task 4: Now that you finished, try to get back home screen so you can start over.- Screenshot of participants:
- List of test insights
- 83% Completion Rate: Most participants completed all tasks. One outlier misunderstood the test and failed all tasks.
- Task 1 Took the Longest: “Choose Image” had the highest average time (33.8s) and largest time variation (7s–74s), suggesting confusion or hesitation.
- Smoother Flow After Task 1: Once users chose an image, they completed the rest of the tasks faster and with fewer issues.
- Back to Home Was Slower: Task 4 took longer than Tasks 2 and 3, possibly due to unclear navigation.
- Average Session = 2:06: Overall session duration was short and efficient for most users.
- One participant recommended improving the app’s logo for a more professional look.
### 3.2 Iterate design based on Data & KPI provided
Since we have 100% completion of task rate the KPI I chose to work with is
- **Decrease Time on task**: The flow I chose to iterate on from my product should be:
- **Task 1, that is choosing the image**. This decision was made because it was the slowest of average completion time 33.8 Seconds and had a high variance starting from (7s – 74s).
- **Hypotheses**: If the image selection screen is simplified by providing clearer visual options and clearer instructions, users will take less time to complete Task 1, reducing the average completion time from 33.8s to under 20s.
- **Based on data point**: A 67-second time difference between the fastest and slowest participant on Task 1 shows inconsistent understanding of how to proceed.
- **Alternative solution**
- Added a “Change Selection” button on the preview image page to allow users to easily go back and choose a different image without confusion.
- Changed the CTA text from “Go Back” to “Change Selection” for clearer, more actionable guidance.- [Annotated Figma project](https://www.figma.com/design/002nSKJvx29pXEd8pWNu0M/Usability-Test?node-id=48-100&t=vJNp4LKQ2sYquuqq-1)
## 4. Preparing for Handoff
In this section I prepare the assets for Handoff:
- I Prepared the assets for export
- I Export the Figma designs to Zeplin
- [Zeplin Project Link](https://scene.zeplin.io/project/6883d59ef55858e98159feda)