To make my tool more accessible I have begun to design the user interface for an app as an 'add on' to my dartboard. To create my app I used the elements I created for my dartboard clock and copied them from Illustrator into Adobe XD where I designed all the pages seen below.
My QR code takes my potential audience to the Adobe XD app page where they can trail the app. If I were to develop this for the real world using professional coding this QR would instead take them to the app store where a ready-to-download version of the app would be available.
The QR code was created using https://www.qr-code-generator.com/
Try out the QR for yourself, test out the app & feel free to leave feedback! After receiving feedback from peers during my presentation, and from running tests on course and flatmates, I changed the light blue in the clock, as seen on my home page, into a much brighter, almost neon blue that stands out more and would create a much more digital and professional feel on the screen, making each clickable object clear to the user. I experimented with placement of symbols and buttons for smooth navigation control. This took a lot of trial and error to get right because the user experience is incredibly important in app design - if the app isn't easy to access then no one would use it and therefore one that is clean, clear and fast to move through would be more successful. Originally I wanted to include an 'about page' in my app so the user could understand it's purpose and functionalities, but because I will be later presenting my app outcome as part of an open studio it would make much more sense to display the instructions on a bigger, separate page that would be more legible to my coursemates and tutors. However, when developing my app with an audience in mind I should make sure to develop this into a proper app page.
As you can see (in the photos below,), in my first artboard this did not go as planned because my dartboard was not originally made as a group object in Illustrator. Therefore I had to recopy my vector element as a group into XD where it was kept as a group of paths.
I added symbols to the pages of my app to make navigation easy for my users to experience. Unfortunately, I did not have time to make each and every symbol for my app and therefore sources them from an online service, such as Icons8 and a desktop app named Nucleo targeted at UI designers, where vectors can be downloaded for free. I later modified these vectors to my liking using Adobe Illustrator where I image traced and expanded each icon because removing their sold fills and applying strokes to match the font Avenir used throughout my project, therefore creating a sense of consistency within my brand identity.
symbols photos
If I were to improve my app I may also implement symbols into the interface of the dartboard clock, to make it easier for my audience to understand the activities and get a sense of the different relaxation options available fore finding it out for themselves via the time of spinning the dartboard, which in this case would e 09:41 where the dart has of course chosen the activity correlating with the number 9, telling the user to complete this activity for a total of 41 minutes. If I were to include a settings page the user would be able to change the way the dartboard worked because it would feel more personalised if the user had more conto whether the activities would be in seconds, minutes and hours (their length) and ultimately the way the 'game' works, as seen in the customizable activities page of my app. Instead, the user may choose to still allow the activity to last 41 minutes, but once those 41 minutes are up a new activity would be generated depending on the time.
Colour-Blind Simulation
Here I have used the plugin 'Stark", available on XD, to test the suitability of my colour scheme in My Time app. Depending on the type of colour blindness a person may have to deal with in their daily lives, I was able to see the differences this would make to the legibility and appearance of my app. These simulations let me notice contrast changes between the complementary blue and yellow colours I had chosen to brand my project with.
In my opinion, the app still works well according to these simulations because yellow and blue are opposite on the colour wheel, therefore allowing a great deal of contrast to be noticed by the user, allowing buttons and text to stand out and remain legible. The only thing I would consider changing, due to time constraints, is the 'nature walk' page in my app. Because I have chosen to create symbols using a line-art style, the stroke of these symbols would have to increased to make them more visible to those with vision and sensory impairments.
I want my app to be accessible to a wide audience and therefore was necessary to run these simulations.
Wireframes
Overview screenshot of my app artboards in 'prototype' view on Adobe XD, showing the hyperlinks between each button. I personally find wireframe screenshots like these marvellous to look at because they show the hard work, dedication and complexity behind app design, they are also useful to the designer themselves as they can pick out where links went wrong and whether the app is too complex to navigate through which in my experience, based on past UI designs that I have created, My Time has very links since the viewer only has access to 4 different pages. As you can see I had to duplicate pages to repeat animation and transitions, such as the appearance of time and activity data available on the 'my maps' page where the data loads in a visually-pleasing 1-by-1 sequence.
Video Playthrough
made with Rotato - Rotato is a plugin for Adobe XD that lets the designer create and capture mockup stills, screen-recording and animations by placing the final design or specific artboard in a various amount of handheld device styles ranging from different types of mobiles to laptops. Mockups are not only helpful to designers but also to the target audience in mind as they not only visualise the UI digital source in use but also help communicate its functions to potential users. Therefore it would be beneficial to include this screen capture video as a tutorial for new users when the app is first launched or as a demonstration video in the app store. As you can see I have even implemented My Time's brand identity into the colour of the phone and background, seamlessly allowing the home screen to blend in and therefore creating a professional tutorial.
Home Page Closeups
Final art-boards for open studio
Comments