Design inspiration and crafting the in-app user experience.
Not sure what this is, start here with our README, or catch up on last week, VRBTM Looking Forward | WK V.
Often I go straight into photoshop without a plan. I have an idea in my head, and it seems great there, but it’s always different when I try and make it real. It’s then when I end up spending hours moving things around by a few pixels second guessing every decision. This time I went back to my landscape architecture roots and put pen to paper to work things out. So much nicer to work this way as I’m not worried about making everything perfect. I only need to figure out what the necessary elements are and place them on the page relative to where they should be. Doing this first means when I move to photoshop I’ve got the blueprint and I’ll be able to work much faster.
I’ve got three pages to finish this weekend.
- The Plan/Pricing Page
- The Content Detail Page
- The Dashboard
I already have a handle on how the Plan/Pricing page should look, but now that we’ve gone over the feature set for each tier I can start to implement. I have a couple variations I want to try but they all are based off the feature rack that is common place among these types of product pages. The content detail page will take some thinking as it’s our most complex page. Overall the design is to be very minimal, but there comes a time when you have to surface things and make it functional. Adding in all of the functionality to the content detail page cleanly will be the biggest challenge. Then, the dashboard page, I think, will be pretty straight forward. The dashboard to me is essentially a summary page of everything that’s going on in the content detail pages. So it should be a matter of pulling out the most relevant info from those and presenting it cleanly. One consideration I’m going to have to work through for the dashboard is whether or not to have a top navigation, or a sidebar navigation. I’m tempted to design a top nav but knowing the level of detail we could end up drilling down to I’m concerned about stacking a secondary, and tertiary nav that will push the page down. Down the line I could see us having both top and side navigation.
Also, I have to pay attention to making different versions for the different plan tiers as the design will need to accommodate for different elements depending what plan you’re on. To handle this I’m going to design for our most feature-rich plan and then pull elements out to craft the lower tiers. Hover states also need to be figured out along with logged in/out views.
Since the project is all about showing off the content and letting the UI take a step back I’ve been constantly drawn to examining online newspaper publications and how they interject functionality while putting the content first.
Saturday, October 22, 2016
Even with the layouts sketched out things still take time. Nick just sent me this article one dashboard and UI design that’s very relevant to the work we’re doing now. Great process structure to implement. One I’ve made sure to be diligent about is keeping my photoshop files very organized so that once Nick get’s them he doesn’t have to search for anything.
Odd how no matter how many times you interact with certain things online all the time, when you have to design them yourself it’s like learning to ride a bike all over again.
Ran into the challenges I expected when putting together the Content Detail page…How to fit all of the info on there in a clear and concise manner. To do so I broke the page out into sections, or modules and then made each of those the best I could. After which I placed them together in a heirarchy they would be in if you had full viewer permissions. Then as it degrades with different permission levels the available modules would then slide up.
In our prototype we currently have a few user interactions with the buttons. I knew we’d always have to reformat these and I expected they would be pop-up modal’s. However I was able to find a nice middle ground between what we have and a pop-up that really fits with our design aesthetic. To keep the page clean it’s more about surfacing information and actions when a user requests them rather than be available all of the time.
Ok, 11pm on Saturday and I have to get up tomorrow morning to run a 10k so I’m going to call it here for tonight. Got two pages out of the way: Plans/Pricing and the Content Detail. This leaves me with the Dashboard to finish tomorrow. I may be over zealous but I think that’s going to be the most straightforward one. As I said earlier it’s just a summary of everything else.
Sunday, October 23, 2016
Nick sent through a question about how we want the feedback threads to look just as I was gathering the content detail designs to send over to him. He had some good points to simplify it even further, such as there’s no point in having more than one passcode unlock mechanism. Completely right — I think I had put two in there last night as I mentioned I was designing each section as a module. Therefore put each necessary piece in that would be required for each function — Not thinking about it as if the page would function as a whole. Few simple edits, and I’m really liking the detail page. We are going to run into some layout challenges when we start working with content of different sizes. Right now I’m designing it against a landscape photo, which makes it really easy. I think we’ll solve the issue with some max-width and max-height parameters, as for the most part I want the content to fit fully in the browser window when the page loads. Then if someone needs to see something larger, I’ve put some + / - buttons in the toolbar to zoom in if needed.
One last thing on the content detail page. Just went back and forth about what our activity feed looks like. Whether or not we make feedback and activity two columns side-by-side, a toggle switch between feedback and activity that defaults to feedback, or making an info button with a pop-up modal. Rather than discuss further I’m going to let this speak for itself:
That discussion right there is why this project gets better every day.
Onto the Dashboard page. I have all of the elements that need to go here, so rather than get paralyzed by the blank page and what fonts I should be using I’m going to get everything into Photoshop and finesse from there.
Outline of everything on the page and running into the same problems trying to take on the whole page at once. Need to work on one module at a time to get things right. The Left Nav will be a good place to start, as there’s just two views: collapsed and expanded. Done.
Finessed the list layout of the content summaries and now I’m just staring at the screen wondering what to do next. Which at this point at 8p on Sunday evening I know I wont be able to make any worthwhile progress. Chatting with Nick and he was talking about the progress, or the little of that he thinks he made this weekend. Which is hardly a concern.
We may have to do something different next weekend. Get together but not work. We’ve been grinding on this for six solid weeks now, and have accomplished more than I think we thought we would which we need to step back and recognize.
Outstanding design items for me that I can take care of at night this week:
- Dashboard Interactions & States
- Dashboard Views per Pricing Plan
- Account Settings Page
- Organization Settings Page
- Workspaces Settings Page
- Team Settings Page
- Address Book Page
- Personas for each User Permission
Read the other half of this week with Nick’s vrbtm.co development stream | Week VI where he talks about the challenges of refactoring the codebase.
We’d love to hear from you…
Get in touch at Founders@vrbtm.co, talk with us on twitter @vrbtm.co, and read our story on medium.
Wes Jones is on Twitter @WesJonesCo
Nick Dandakis is on Twitter @Dandakis
