10 Iterations that lead to the final homework app design

There were many design iterations I went through before I got to the final design of the Homework Night App Concept. Like most of the apps I design I first start with written use cases, then I use those use cases as a vision and loose creative boundary to iterate through many low and high fidelity wireframes until I get to the final design.

I should make a note here that deep user research and usability testing have been a normal part of my app design process for over ten years and frankly it’s my favorite part, but I purposefully made myself the sole target audience for this project so I could spend the bulk of my time improving my visual design and UI skills since those skills aren’t quite at the level of my research skills yet.

Iteration 1 — Writing down all my thoughts and use cases in Evernote

• I typically start an app design by writing out all the use cases and random thoughts I have into Evernote. I just put them down in the form they come, I don’t try to force them into any particular process or order. I’ve found it challenging to design a UI without knowing it’s purpose and writing these use cases helps me establish that purpose if one doesn’t already exist.
• This writing phase goes fast, maybe an hour or two. I’ve found that I can design an entire app with loose use cases like this in a matter of hours, whereas drawing wireframes for an entire app may take weeks or months. This way I have the overall app framework in my mind when I start drawing.

Iteration 2 — Greyscale and unpolished wireframes

• When I know that an app will be multi-platform I like designing for desktop first. The bigger canvas allows me to work through higher level flows and interactions before I have to limit myself to the small mobile screen.
• The first thing on my mind during this phase was to design the left to right hierarchy between students, classes and assignments. This was how the information hierarchy was organized in my head so I wanted the UI to reflect that.
• In this initial phase I was also really stuck on the idea of having every day of the current quarter visible on the screen all at once. That’s what the grid is in these designs. I wanted to see every assignment this quarter, when it was handed out, when it was due and how late it was all at a glance.
• For design inspiration during this phase I referred to Health App Calendar by Jakub Antalík over on Dribbble.

Iteration 3—Color exploration

• For color inspiration I referenced Rapid UI Challenge : Smart Home Application by Ghani Pradita over on Dribbble. I was really sold on the blues used in that design.
• I used the website uiGradients.com to explore some other gradient ideas and you can see I copied and pasted some of the ones that I liked into my sketch document for reference.
• I was pretty into blue color scheme but as you can see my original blue was too muddy and I wanted the design to have more energy so I pulled up the saturation in that last version.
• At this point I also went away from showing the grid I had in the original wireframe phase. I felt like the grid buried the most important information on this screen, namely what assignments haven’t been turned in yet.

Iteration 4—Polishing the blue version

• I went even deeper into the details during this phase, especially the graph that shows how your grade has changed over time.
• I added the shelf on the right back onto the screen with a new visual treatment to fit with the blue UI.
• With every element now present I started removing visual elements to further refine the UI.
• Allowing myself to spend whatever time it took in this phase was one of the goals of this project since I don’t get many opportunities in my day job to really explore the visual design this much.

Iteration 5 — Final desktop design

• A huge leap. There are no design iterations in between the last blue design and this white design, this is literally what I designed next. Basically the dark UI just wasn’t working for me and I realized a clean white UI was much more desirable. For inspiration at this point I drew heavily from Zora Dash — Properties (WIPs) by Balkan Brothers over on Dribbble.
• Up to this point I’d spent enough time placing and thinking through the actual UI elements that this screen came very quickly, I knew what I had to include and what I had to work with. It was simply about finding the right visual treatment.
• This version of the desktop design became my first Dribbble post for this project — Homework Night Desktop Concept

Iteration 6 — Mobile version

• At this point I understood the overall flows, all the elements and the relationship between the elements. Now the task was reformatting all that to the small mobile screen and reducing the number of items and interactions per screen. This part of the process is pretty fun, for me it’s the part most like Tetris.
• This phase started off by simply porting the desktop UI to the mobile screen size, but as you can see I started changing the UI to take advantage of the mobile experience, especially swiping and tapping.
• Rather than just having a single screen with all the student’s classes I really liked the idea of having a class card to the right. That way a user could simply swipe through the student’s classes and see some of the assignments behind the class grade before they went deeper into that specific class.
• I realized that navigating between students was critical as well and it was the root of the information architecture, so I moved their photos and the functionality behind them to the prime navigation spot at the bottom middle. That way a user could hold and slide to another student no matter where they were in the app.
• Inspiration during this phase came from Accounting end mobile application design by Zhao Legs and from Calendar App by Gal Shir
• The last three designs I posted on Dribbble in the post Homework Night Mobile

Iteration 7—Exploring charts

• I wanted to explore another way to treat the class list so I decided to include this graph and turn each class into a card.
• The graph shows the student’s class grade over time throughout the current term. That way a user can see how and when the student’s grade changed during the term.
• At this point I realized that the user would switch between students frequently enough that I wanted to put both student pictures on the bottom nav and not bury the other student behind a tap.
• The class cards weren’t enough on their own, so I added a title to this screen that told the user what term they were looking at to give the cards more context.

Iteration 8—Realizing the charts were pretty but not useful

• The charts were a great visual design exercise but after repeated prototyping using Sketch Mirror I realized they got in the way of the purpose of this screen which was to see a student’s classes and their corresponding grades at a glance with no additional navigation. The graph forced classes and grades below the fold and required the user to scroll to see them.
• I tightened up the student navigation on the bottom of the screen by having the current student’s image overlap the other student’s image rather than having them side by side.
• I dropped the orange “on” state for the bottom navigation and instead opted for a filled icon. The orange was too strong and took attention away from the content above.
• I tightened up the assignments list on the individual class screen as small as I was willing to go to get as many assignments visible on the screen at a time.

Iteration 9—Polishing for the animated version

• I wanted to really push myself with the animation this time around. I studied the Google Material Motion docs multiple times and made lots of notes. Then I wrote a script of what I wanted to animate in Evernote. I also referenced the Dribbble post App Navigation by Ramotion because it had the smooth cursor style and timing I wanted.

Material Motion Notes and Animation Script in Evernote

• Forcing myself to write the script for the animation helped me refine the details of these screens in a way that wouldn’t have happened otherwise. For example, in my previous iterations I had the class card on the right be a single card, but once I got to the animation phase I realized it needed to be a stack of class cards the user could swipe through like a carrousel.
• Once I knew the animations I wanted show I had to create some additional screens like the second student’s list of classes and grades, two additional classes to swipe through and the schedule popup shelf.
• I created the final animation in After Effects and used a clay iPhone mockup from the Ramotion store for the background. You can see the final animation on Dribbble in the post Homework Night Animated

Iteration 10—Even more fine tuning for the narrative article

• When I posted the animation I got some great feedback. Some of the feedback was that the contrast between colors on the UI wasn’t strong enough so after looking at the animation again I could see that because I had made all the elements a uniform light blue nothing stood out and so everything in the UI kinda blurred together. For the Medium article I added the darker blue for all the text treatments and bottom navigation.
• I didn’t end up using the schedule shelf popup in the animated version so I made sure to include it here. I also revised it slightly. When this shelf is spawned the user is coming from a specific class. So I realized the popup needed to highlight that specific class because that would be the context the user was coming from and most interested in.
• When I drew these final screens I looked back at all the previous screens I had drawn and realized that these final screens were really the first version worth showing. On my next project I want to make sure to go through this much polishing before I post on Dribbble so that the first Dribbble posts are as refined as these final designs were.
• In addition to using these final UI designs in my Medium article Homework Night App — Use Case I also thought they were worthy of another Dribbble post Revised Homework Night Mobile

As always, let me know what you think and how I can improve in the comments below.

Read more about this homework app concept in my other Medium article Homework Night App — Use Case

See more of my design work on my Dribbble

And more of my writing here on Medium

I’m also on Twitter and Instagram