Web App: Juvely

The past year has been pretty amazing for me. I’ve learned so much in so little time, especially with university. With this post I hope to show you how my designing skills have progressed over the past year, for Juvely in particular.

Below is the first ever mock-up design. At the time I was completely chuffed with this interface. A year later not so much, however this was the starting point, I jumped into photoshop with the idea of keeping, it simple and friendly. I only designed the dashboard back then, as i was eager to get into coding the backend. I decided that it needed:

• Tabs
• Clear logo
• Simple live search box
• Some form of overview for certain areas (in this case tickets and notes)

.

Although I had these points I had no real idea of what the main features of the app were going to be, knowing these details is important because in-order to design something you should have a good idea of what’s going to be included. Looking back on it now, I sit here and think what the.. although it did prove to play a very important role as it has set out the main design points.

Moving on to the second “version” of the design. As time went past I started to see downfalls in my masterpiece, colouring, fonts, positioning etc. After a few weeks of playing around, and getting a better feel for photoshop, I found that I could do so much better. Although not everyone has a major “creative streak”, I like to think I have a good idea of what looks good. After showing family and friends, asking for their feedback, it really opened my eyes. I wanted to make the design more aesthetically pleasing, whilst maintaining my main principles.

After showing people the final version 2 design, the feedback I received was brilliant. For a good few months I saw this as the final design. But me being me, In spare time I like to tinker with things. So things started to change. By this time I had met Luca, he liked the design. Although whilst playing around with other ideas, I was sure I could do better. The thing was, I really liked the navigation and the re-positioning of the logo. I decided it would be best to keep these how they are. The thing that was bugging me most was the content area. I felt that it needed to be defined more, rather than alot of white space. Also the “new & improved” left navigation/option/eye-saw box needed to go.

One thing I love when logging to apps I use is to see whats going on in my account - quickly. With no fuss or hassle, a nice simple overview giving me a general idea of whats going on and what I need to give attention to. I’m sure I can’t be the only one, so without further a do, I implemented it. The way tickets are listed has changed quite drastically, with the new spacing, icons etc, I felt that it firstly felt less cluttered and more readable, also the new highlighting technique (on hover, the colour of the priority) would achieve a much better affect on the user.

Obviously there have been other minor versions and changes, I felt these three examples would be best. So there we have it, the current dashboard interface, once the app launches into its beta phase you’ll be able to see all of the other content area interfaces, I would really love feedback, whether negative or positive.

Juvely is one of many app’s Luca and I plan to release in the future. Juvely is what I hope to be the foundation of a fantastic development future.

Revision is really boring, and I can’t wait for the exams to be over! As such I have been doing a bit of work on Juvely on and off when I get a chance. I have been working on the user side of things, and I remember we haven’t given you a walkthrough on that yet so I thought I would start off. The basic stuff for viewing and creating tickets is nearly done, but the knowledge base stuff hasn’t been started yet.

The user side is where people who are having problems go. Here is an example below (we probably should note that even though we are using ‘Google’ they are not associated with us or Juvely in any way):

We have gone for a white-box model and will probably keep it this way for all plans (even free ones), other than T&C and copyright notices. The text on the left of the login box are links to various sections. Once you are logged in above the search box we show a list of your tickets and links to other sections:

Next is the submit a ticket page (hmm the title is wrong). The three boxes are for the user to select a priority of the ticket, you can click on the whole box rather than just the radio button to select it. Next to that is the severity slider, this allows a user to select how severe their ticket is. At the moment we haven’t decided on the names of different severities. Under this you can post your ticket and upload files.

Next up you is the ticket view page. At the top is the title of the ticket, on the left is the priority nice and easy to view. Under this are certain details for the ticket. This can be hidden by clicking the hide button (and will stay hidden for the rest of the session) if it gets in the way. Under this is the user’s original message and any attached files.

Under this is the reply and attachment form, and then replies in the same format as in the staff center. Staff replies are shown in yellow and user replies are shown in green.

If you have been following the development you will probably notice that the design for this is completely different to the staff section. James designed this completely from scratch to be as simple as possible, and I guess what he learned while doing the other sections has been put into this. I shall leave it up to him to explain his reasons and what we are going to do about it!

It’s that time again, Luca is heading back to university on Monday and I’ve already been back for a week. With the May exams coming up we’re both going to be doing revision, so the development process will slow down. We will still try to update the blog as often as we can.

The easter holiday was pretty amazing. We both managed to get a ton of work done on Juvely, we were able to make important decisions, I also managed to read the Getting Real book in an evening which made me think harder about some of the choices we’ve made in the app. We completely re-thought the “settings” pages. Originally the app had alot of settings/preference pages, Although Luca and I knew exactly what settings were where, for a user it might become confusing. We’ve scrapped the whole idea of the settings/preference pages. We’ve decided we’re going to make the decisions as far as simple settings go, for example how many tickets to display, how to display them etc. Many other small decisions/revisions were made as well, you can download one of the Revision files here just to get an idea of the process (this one was typed up whilst sitting on the plane on the way back to university).

On a getting things done (GTD) note. Taking my MacBook everywhere is great, if I do come up with something or think of anything, whether it’s big or small i can get it down. Sitting on a plane for an hour gave me a great chance to look over alot of what we have done. I come up with a ton of possible revisions, and design improvements. Getting alone/quiet time is key. Wherever it may be, on a plane, in a public library, at the park, it really gives you time to think hard about your idea. Having no distractions really allows you to get in the zone and focus. Although I was able to get work done at home, my little brothers and sisters were a constant distraction, it’s fair to say they missed me and I missed them but as far as concentrating goes, it’s hard. This could be anything though, whether you have kids, a hungry dog, a hungry cat, something on the TV. It’s good to get away from these distractions, go off by yourself (take your laptop if you have one or just a notepad will do) find a quiet place and focus. I was able to think clearly about important decisions. This is something I would highly recommend. I would love to know how other people get things done, so send me an email james at juvely dot com or post a comment!

Remember we still need more beta testers for when we’re ready to launch it. Sign up here!