Sketches:

At the start, I struggled with what my screens would look like because I wanted to keep them simple but effective. It was hard to visualise sizing of elements when designing for a small screen.

IMG_3504 2.heic

I found drawing on a smartwatch template was a lot easier. I made sure to keep everything minimal but include important details.

IMG_3505 2.heic

I’m going to create 5 screens at most because I think 3 screens wouldn’t show all of the features of the app. 2 of the screens will be quite similar for showing “measure” and “retest” blood oxygen levels. Then ideally, I want to have a screen displaying what “normal, low & critical” levels are. The main screen overall will be the “alert” as this is the most important feature of the app. Lastly, there will be a page that shows the levels tracked in a day.

I am now more confident starting my low-fi wireframes on Figma. I think it will take time to get familiar with the layout of designing for a smartwatch.


Low-fi Wireframes:

https://www.figma.com/design/kFckfwdz9wEDpshVDICQtB/Low-fi-Wireframes-Smartwatch?node-id=0-1&t=RO8E8yWAjWqhjiLD-1

My aim for the low-fi wireframes was to keep consistency with the design and shapes I was using. I kept the same size for the CTA buttons and containers. To keep visual hierarchy, the nav bar is consistent throughout each screen and the positioning of the boxes along the bottom too.

I am satisfied to began with my high-fi wireframes as I’m getting used to working with a smaller screen. I think it might be hard choosing font sizes, but it will take trial and error to figure out.


Rows & Columns:

Screenshot 2024-10-05 at 23.16.11.png

Screenshot 2024-10-05 at 23.16.11.png

Screenshot 2024-10-05 at 23.16.11.png

Screenshot 2024-10-05 at 23.16.11.png

Screenshot 2024-10-05 at 23.16.11.png

I decided to use a simple grid: 2 rows by 3 columns ( margin 18 & gutter 20) , in order to make it easier for me to keep inside the frame. I thought I was going to struggle with designing on a small screen, but in fact I liked how by using less elements meant I was able to focus on the details of each screen.


High-fi Wireframes:

Screens before critique

Screens before critique

Screenshot 2024-10-07 at 21.52.08.png