UI Design#

Design Requirements#

Based on our MoSCow list, we need to needed to build a user-centric design. We simply began with the UX/UI requirements.

  1. Need the following pages to statisfy our MosCow requirements:

    • Home page

    • Exercises page

    • Analysis page

    • Profile page

    • Settings page (optional)

    • Video trimmer page (optional)

  2. Big buttons for the UI to increase usabilty.

  3. Simplified user experience for the user as they may not have the capacity/patience to thoroughly understand the application

Throughout our development of the UI, we regularly met with our clients and a team of NeuroPhysiotherapy Masters students and their supervisor to enhance our designs.

The 3 main Usabilty Goals we focused on were:

  1. Learnabilty

  2. Memorability

  3. Utility

You will see how we have incorporated our understanding of HCI to our work on CopyClare’s UX & UI.

UI Sketches#

Here are our initial sketches for CopyClare:

Very first UI sketch of home page Very first UI sketch of exercise page

The designs were inspired by Netflix and how users can find the right exercise and begin their physiotherapy. However, we realized that it is very difficult to implement using PyQT5. Therefore we need to draft another version of the app.

Very first UI sketch of exercise page

With this design, we were able to accomplish our usablity goals:

  1. Learnabilty

    • There are only 4 core pages to the application (home, exercise, history, and analysis).

    • The menu bar on the left allows for the user to go to any of the pages the app offers

  2. Memorability

    • Since there are only a few core pages that are well connected, the user expercies would be memorable

    • The iconography is very clear with distinct colors and easy to understand

  3. Utility

    • All the functionality that we have implemented from our MoSCow list, have very simple and elegant UI.

    • The buttons and graphs that we show are very carefully placed to help the user to actually use the features

Feedback & UI Mockup#

Our conversations with our clients and the NeuroPhysiotherapy team has led us to modify our sketches. Here is the high fidelity design of our updated designs: https://cheryl237771.invisionapp.com/console/share/FAJ4M6HG3B7/881016074

Invision mockup of home page Invision mockup of exercise page Invision mockup of history page Invision mockup of analysis page

Final changes#

As we are implementing our UI, we have had to make subtle changes to the designs (such as color scheme, additional buttons, etc.) to make room for additional features that the client and the NeuroPhysiotherapy team requested