Side Projects: Teaching a child to log into an App

The Challenge

My son needed to learn how to log in to a program for his school. Previously they had used QR code cards but for the new school year, he would have to manually type in a username and password. So I decided to build a login page for him to practice at home.

The Build

I looked at the app he would be using the interface was a basic login form with an option to show the password.  I searched for  login examples and  found a Python and flask tutorial that was close to what I needed.

As I worked through the tutorial, I noticed some of the code snippets were formatted incorrectly. The code appeared in plain text not as code. Instead of showing brackets {} , there was unicode for the brackets. All the indentation was lost, everything was aligned left.

I wrote the correct syntax and got the basic functionality to work. It was just a basic white with black text form. After adding some styling ans instructions it looked like the following image.

The School app had a show password option.  I added a some JavaScript and a checkbox.

I used a template for the CSS. Then modified it to the school’s color scheme. This satisfied  my initial concept for the app but I want to add replay value.

Adding a Reward

I had my son test it He was able to log in easily but all I had after log was the words “Welcome to book nook.” I wanted to keep him practicing so I looked for a way to encourage repeated use of the app.

First, I tried some CSS animation. It was neat but the same thing every time. Then I decided to try randomly displaying text. I added 10 inspirational quotes about reading. I made an array of quotes, then used Javascript to display them when a button was clicked.

function inspireQuote() {
	var randomNumber = Math.floor(Math.random() * (quotes.length));
	document.getElementById('inspire').innerHTML = quotes[randomNumber];
	inspire.style.display = "block";
}

 

The quote box is hidden till the button is clicked, another click replaces the quote.

What did I Learn?

This was a fun satisfying build. I learned some Flask and how to show a password with JavaScript.

Craft Content Nashville Voice part 2

“You don’t have to create, You get to create!” -today’s opening monologue

“Your audience must be first, foremost” -Alaina Shearer

“Gamification will increase user interaction” Mitch Canter

Final Take away

Don’t be afraid to use your voice!

Back Canary is a super hero with a powerful voice. Learn for her and use your voice.

Craft Content Nashville * Voice

Today I am at Craft Content Nashville. The UNconference is for the content creators and artist in digital media. The theme this year is Voice.

A few of the things I have learned so far today.

For those in leadership position we’re in a wonderful place to shape other view of their own worth. -Hannah Moyer

Skip the backstory. Get Into the story for immediate connection. -Megha Bradley

Embrace the line break. Break paragraphs into smaller ones to make post skimable.
-Pamela Wilson

UX Class & Case Study

I enrolled in the UI & UX for digital products course at Nashville Software School. It was a great experience for me. I got a taste of Agile, user interviews and digital design process.

I learned how to build a case study and how to frame a problem. I used interviews to see if what I thought was a problem really was something that needed to be fixed. Once I solidified my problem, I interviewed a few people and took that information to build my prototype and user persona.

This is a condensed version of my process. I have a full walkthrough of my UX Case Study on my portfolio.

My project

I proposed that people ran out of prescription pills and could use something to remind them to call the pharmacy before the bottle was empty. My resulting project was Medicine Minder an app that would send the user an alert to call the pharmacy when their prescription was low.

Wireframe

I sketched a basic paper prototype in a note book. It took several iterations to get everything I wanted on the design. Then I showed to some people got some feedback then I moved on to a wire frame.

Paper sketch to interactive prototype.

Prototype

I built a wire frame using the prototyping tool, UXpin. The interactive prototype allowed users to experience the proposed functions of the app. I was able to get feedback in person and online. The feedback helped to refine my concept.

OnBoarding screen

User receives an alert when the pill supply is calculated to be down to a few days supply.

Alert message to user.

Conclusion 

Studying UX has helped me focus my process. The idea that “You are Not the User” was repeated throughout the class. As a Designer I should focus on what the user’s needs are. They will be the one using a product daily, it’s their experience that matters.