Entry #4: UI Design, Part II

A project log for HackADay App

HackADay needs an app... and I want to build it.

george.burrowsgeorge.burrows 05/22/2014 at 14:320 Comments

So, in entry #3, I talked about the content I wanted in the app, and I talked about how I lost my first round of graphic design work for the project.  I took a couple of days off after that, because I just couldn't look at Sketch without getting grumpy.  I should have known better, and should have had multiple saves.

But I got back around to finally doing some more work, and here is what I came up with:

Picture 1: Splash Screen.  This is the screen that the user sees while the app is initially loading.


Picture 2: Opening View.  This is the first view the user will see when the app opens.  It consists of the various sections of HackADay that the user might want to read articles from, such as the HackADay Blogs, HackADay Projects, etc.


Pictures 3: Article Detailed List View.  If you notice the arrows pointing to the right in the two buttons on the right hand side of the screen in the picture 2, those will take you to the view shown in picture 3 or 4, depending on your personal settings.  The app's default mode will take you to picture 3, the detailed list view.  This view will show you a list of articles for the category you selected from the view shown in picture 2.  [If my explanations get a bit long, don't worry, I'm planning on posting a video of the mockup in action].


Picture 4: Article List View.  This view is designed to allow users to see more articles on the screen than they otherwise would with the view shown in picture 3.  The tradeoff is that the pictures are going to be smaller than in the the view shown in picture 3.


Picture 5: Article View. This is the view the user will see while reading an article.


Picture 6: Search View. This is the view the user will see if they tap the search button located at the bottom of the screen. 


Picture 7: Search View With Keyboard.  This is the view the user will see as they are typing in the search bar.


Picture 8: More View.  This view gives the user access to similar articles to the one they are currently reading, based on tags, categories, or HackADay's related article list.


Picture 9: Profile & Personalization View.  This view gives the user access to his/her profile settings, app settings, and saved content.


Picture 10: Comments Editing View.  Note: the other profile edit views look similar to this one, so I will only post this one.  You should get the idea of what the Forums and Projects profile views look based off of this.


Picture 11: Share View.  This view will allow the user to access various networking sites (Facebook , Twitter, etc), and communication apps (Messages, Mail, etc) to send out the article he/she is looking at.


At this point, I am comfortable with what I've got so far.  It definitely isn't complete though, at least not in the sense that I have every view that could come up in the app covered.  And yet, I feel like just having still images of the app isn't going to cut it.  I'd like to have some video to go along with this.

I came to this conclusion due to a decision I made about a week ago.  I decided that I was at the point that I wanted to submit my designs to the HackADay crew to see what they thought (I still haven't done that, but I hope that won't be a big deal).  Before I did that, I wanted to see how other people proposed apps, and found a great interview discussing submitting apps to app review sites.  I realize that isn't precisely what I was doing, but the theory still applied.  

So what did I need?

-A name for the app.  I figured HackADay would work.

-What it does, why is it different.  I talk about that in the first two entries of this project write up.  In short, this app will transform the mobile experience of HackADay readers.

-The price. I imagine that HackADay would like this app to be free, but if I was doing this on my own, I'd do a free app with ads, or a $0.99 ad free app.  To be honest, the ads on HackADay (they are there if you turn off AdBlocker) are the kind of ads that I would click on anyway.  Mouser, TI, Mouser, Atmel, etc.  I've probably bought something or requested free samples from almost anyone willing to advertise on HackADay, and I imagine so have most of the users.    I haven't put too much thought into this at this point though.  I'm building this app for me, and if things work out, other people will like it enough to enjoy it as well.  But I thought that HackADay might have a lot to say on this front, since the app would be associated to them.

-One link to the iTunes product page.  This is obviously something that doesn't apply.  

-One or two screen shots. Done... I just need to decide on which pictures.

-A Video.  Crap.  How do I do that without a working app?  (This is the next step of the UI design in the case of this project.)

-A short concise paragraph.  The paragraph needs to talk about the app's audience, what the app does, and what makes it different from the crowd.

-Contact Info (email and skype id).  This isn't an issue either.

So the big take away?  Let's make a video of the app in progress.  This will let me do two things:

1) I get a good idea what my app will really look like in action, and can make adjustments before I do 200 hours of code, and decide that things aren't quite right.

2) I can create a really great video to send to HackADay, showing my idea!  

Now I just need to figure out how to make a video...