Lisa Allsopp

Daily UI challenge - Design a calculator.

For creating a landing page for the daily UI challenge I looked at this article which I found really helpful, it shows a wide variety of examples of landing pages and also analyses the good and bad points of each page. I found this really helpful to see what I need to include and what I should avoid.

Another example which I looked at was the one above, again this toolbar appeared when you clicked the “man in blue” and then offered a range of accessibility tools. I think this is another good example, but does not offer the vast range of features as the audioeye website. However, I think I would like to include the man in blue icon as it is internationally recognised as the disibilty symbol.

The above example which I also looked at is just an image, but I think it is another good example of a toolbar layout and the icons which I could include. I had originally went for a toolbar layout similar to the above, however I want to move towards a pop-up toolbar which is always present on the main page. Although I am creating an app which limits the space I have but it may be possible depending on how concise I am able to make it.

Another example I looked at (above) follows a sort of Microsoft word style and allows the user to style the text to suit them. I think this is also a good example but it offers very limited tools.

A website which I looked at was Audio eye. When you first go onto the website the toolbar at the bottom is hidden, when you click the icons on the right toolbar it then appears. I think this is a great idea as it creates a more simplified and minimal screen and gets rid of any clutter. 

When you click on an icon circles appear to highlight the number of settings there are, which you would then need to click the icon 4 times to see the 4 different settings. I also think this is a great idea, I was struggling with placing the different settings and how to show them without any confusion. 

When you hover over each icon a text box comes up to tell the user what the icon is for. As I want my app to work with a screen reader I was trying to include a caption for each icon which I now think I will include a pop-up text box instead to minimise the clutter.

The toolbar also features a reset button to change all the preferences back to default.

The toolbar also features a reading guide which helps the user to follow the sentence along with the help of the thick ruled line. This is a feature I hadn’t even considered or known about, so I plan to try and incorporate it too.

The website also offers the player feature along with settings specifically for that. This is something I had considered but again was struggling with the layout.

https://blog.hubspot.com/sales/pricing-strategy

A combination of the words “free” and “premium,” freemium pricing is when companies offer a basic version of their product hoping that users will eventually pay to upgrade or access more features. Unlike cost-plus, freemium is a pricing strategy commonly used by SaaS and other software companies. They choose this strategy because free trials and limited memberships offer a “peek” into a software’s full functionality — and also build trust with a potential customer before purchase.

With freemium, a company’s prices must be a function of the perceived value of their products. For example, companies who offer a free version of their software can’t ask users to pay $100 to transition to the paid version. Prices must present a low barrier to entry and grow incrementally as customers are offered more features and benefits.

I have created a mood board of visual marques to try and gain some inspiration for my own brand. Most of the images which I found all seemed to show a wide variety of bright colours to highlight diversity and often an illustration of people coming together, by holding hands or being linked in a circle etc. 

User Persona 1

Name: Joe

Age: 37

Needs: To be able to consume the news with a variable colour palette due to being colour blind and struggling to see colour contrasts clearly.

What am I offering? An app that is personalised to the user and strives to create an experience which is as accessible as possible. 

Pain Points: News websites don’t offer a variable colour palette or an experience personalised to the users needs depending on visual and audio impairments.

Devices used: Phone and Ipad.

User Persona 2

Name: Beth

Age: 18

Needs: To be able to consume the news in a larger text due to visual impairment.

What am I offering? An app with variable text sizes and colours to personalise the experience to the user. 

Pain points: Most apps only have one font size and to see it better or at a larger size the user has to zoom in on the text which is extra unnecessary hassle.

For my research I also looked at this really useful website. The website gives a breakdown of the estimated number of people around the world who suffer from hearing loss or deafness. I found this really helpful in gaining an insight into the estimated number of my target market and was able to gain a better understanding of who exactly I am aiming my app at.

I found this useful article about jobs-to-be-done and user personas. It gives a great breakdown about what each one actually is and offers comparisons and what each one is useful for.

I was struggling to create a job-to-be-done for my own app and found the below diagram (from the article) to be really useful!

I created my own jobs-to-be-done, based off the above diagram.

As my app is aimed at those with visual or audio impairments I started looking at different icons they may face and use everyday. I want to make sure that the icons used in my app are widely recognised and won’t cause any barriers. These are some of the main icons which I looked at.

My Icons

I started to sketch a few different icons which I may use within my app. They are all quite simple icons and I wanted to create my own to use in the app.

I then started making a few of them digitally (the ones I’m sure i’ll need). I struggled to make an icon to represent the colour palettes available, I made 2 different ones but still don’t think I’ll use them. I have seen a few different websites use a “T” as the icon for colour palette, I haven’t been able to find out what it means yet, but I think i will aim towards using the “T” for my app also as it seems to be widely recognised.

From deciding to aim my app at people with visual and audio impairments I wanted to research my target audience a bit more. This document which I found gives essential facts and figures about people with visual impairments and an estimated number of people who suffer from it. Although the number of people is not massive compared to the world population I still think they are a very important niche and shouldn’t be forgotten about.