Close

Entry #3: UI Design

A project log for HackADay App

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

georgeburrowsgeorge.burrows 05/22/2014 at 10:110 Comments

As I've already mentioned, my first attempt at building this app had an underwhelming user experience element.  This step should fix the problem.

At this point, I did a day or two of research into UI development tools.  What I found was that Sketch 3 had been designed with app mockups in mind, unlike Photoshop.  The other good news is that I could afford to pay $50 for Sketch 3 and could not afford Photoshop.  Also, Sketch 3 had an app that allowed you to view your work on your screen, as you were working on it!    And Sketch 3 has a simpler interface for those of us who are not graphic designers.  So I settled on purchasing Sketch 3 in the the App store.

After downloading Sketch 3, I jumped in feet first and designed a whole bunch of UI views in the program.  And after 3 weeks of a steep learning curve, I promptly lost all my work on the graphic design views. I was able to keep the content views, which are the backbone of the project at this point.

Content Views

Picture 1: Opening View Content

Picture 2: Article List View

Picture 3: Article Detailed View

Picture 4: Article View

Picture 5: More View

Picture 6: Video and Image Views

Picture 7: Profile and Settings View

There were some more views, but I think you get the point.  Some of the views have changed a little as well.  The main goal was to figure out what the app content was, and what views the content would be placed in.

Views with Graphic Design

Picture 1: The opening screen.  From here, the user could scroll left and right to see the contents of the section they are looking at.  Also, the user could scroll up and down between sections.  The sections were: 

-Newest Hacks (the opening page on HackADay) (Sorted by date, earliest to shortest)

-Projects (from HackADay Projects) (Sorted by most "Skulled")

-Featured section (Sorted by date, earliest to shortest)

-HackADay columns (Sorted by date, earliest to shortest)

-HackADay videos (Sorted by date, earliest to shortest)

Picture 2: Shows a list view of one of the sections mentioned above.  If the user is only interested in viewing one section, say the Newest Hacks section, then they could select that section by tapping the arrow pointing right on that section header on the front screen.  There were two ways to view this list.  The first way (shown in Picture 2) is a title focused view, with the image minimized.  But not all readers will respond positively to this.  So I also made the view shown and discussed in Picture 3.

Picture 3: When I showed my wife the list view like the one above, and the ones you can see in entry #2, she said that she didn't like them too much.  She said that she responded much better to visuals than she did to text.  Around the same time, I happened to be browsing Steam's mobile site on my phone, and I saw a solution to my wife's thoughts.  (I've posted a screen shot of this in picture 4).  I made the pictures the focus of the cell and added the title/author/date/article intro below the picture.  So now you have an interesting picture, a title, and a short intro to grab the reader's attention!

Picture 4: A screen shot of the Steam mobile web page.  This was definitely the inspiration behind the solution to my wife's concern's about people responding better to photos than they would to text.

Picture 5: Article View

Picture 6: Search View:

Picture 7: More View.  This view is designed to let users find other articles similar to the one they are reading.  They can find similar articles based on the current article's tags, categories, or the related articles listed by HackADay.

Picture 8: Profile & Settings.  This view is designed to allow the user to save their various HackADay profile settings in one place.  The user may have up to 3 different profiles associated with HackADay.  There is the Comments profile, the Projects profile, the Forum profile, and there is a potential for a fourth profile, but I think that last one is only for the the people who post articles on HackADay.  It also let's the user define other portions of their app experience.

This was the point where I lost my work.  Crap.

I'll post more later.  Thanks for reading!

Discussions