Simply select the elements you want to group by hovering the cursor over the elements. Either use the group button in the upper toolbar or use the shortcut CTRL/CMD+G for grouping and CTRL/CMD+Shift+G for ungrouping elements.

Rename a custom group
Rename any custom group just like you can rename any element. Select the group and the properties panel appears. Within properties type in a new name and hit return.

Edit grouped elements
You can edit the whole group or double click an element within the group to edit it separately. After you are finished editing just hit ESC to deselect the single element and to set the focus on the custom group again.

Create and edit subgroups
Create as many subgroups as needed. Editing single elements or subgroups is being indicated by the breadcrumb visualization in the upper left section of the canvas.

Duplicate a custom group
To duplicate a custom group, click the duplicate button in upper toolbar or use the shortcut CMD/Ctrl+D.

Delete a custom group
To delete a custom group, select it and hit the backspace key.

The new custom groups feature will support you to wireframe even faster and more convenient. The really great thing about it is that you are not losing group interactions anymore, because you don’t have to ungroup elements to apply changes.

Hope you enjoy this new feature. Stay tuned for more updates to be released soon.

We just wanted to thank you for your tremendous support, the great feedback and your effort of spreading the word about HotGloo in 2011. That’s why we wanted to give you something special.

We know it’s a hard to pick something for a couple of thousands of people, but we think we found something really great and inspiring:
The ‘UX Storytellers – Connecting the Dots’ ebook where 42 UX masterminds tell personal stories of their exciting lives as User Experience professionals.

Download Your Gift: UX Storytellers ebook

The book brings together authors from around the world who paint a very entertaining picture of our multifaceted community.

Many thanks to Jan Jursa (@IATV) for making this happen.

Enjoy your reading, happy holiday season and a great new year!

WebExpo 2011 Prague – Czech Republic

So first off was WebExpo 2011 in Prague, where I was giving a talk on business principles for web applications. Apart from that I was spending most of the time in Design/UX hall and listening to an enlightening Luke Wroblewski and his talk “Mobile First”, also for the second time this year Nick Finck with the “Cross Channel Experience”, Smashing Mags finest Vitaly Friedman on the “Invisible Side of Design” and finally Peter Boersmahs talk “Your influence on non-design deliverables”.

Václav Stoupa and the organizing committee have achieved a great leap forward, compared to last year: overall higher-quality talks, more simultaneous translator, a more central located and bigger venue and all of this by keeping the pricing on a reasonable level.

Frontend Conference 2011 Oslo – Norway

Next I headed north to revisit Frontend conference, I had already attended a year ago and that has sticked in my mind every since. In 2010, organizing their first major conference, the guys and gals from IXD Oslo have put together something really amazing. A conference that would be considered small by size, regarding the 250 attendees, but with a unique atmosphere and an excellent choice of international speakers.

“Am I ready for this?” I asked myself when Hjortur contacted me in May this year, asking if I wanted to speak at Frontend2011. To be honest at first, I wasn’t really sure about that. I love sharing experiences but I was mainly speaking about business principles for web apps or sharing my lessons learned with running a web start-up before. I always wanted to share ideas and provide a valuable input on a User Experience topic, since this is what we do here at HotGloo every single day. So it just happened that I was wireframing the concept for HotGloo 3.0, when Hjortur contacted me again and since I had already documented parts of the process on this blog, I felt ready to jump in at the deep end.

I was putting a lot of effort and night-shifts into this talk and I was really happy with the outcome. I received a lot of positive feedback and even had the chance to discuss certain topics of my talk with people who are in the same situation we were before the redesign process – looking for ideas, user research approaches and a strategy from start to finish.

The IXD crew was putting together a really nice mix of talks for this years conference, covering web-related topics from design to UX and development. I met so many inspiring people: Eva-Lotta (@evalottchen), the Standardtistas (@standardistas), Simon ( @colly), Andy ( @andybudd), Russ (@russu), Joseph (@josephthinking), Sarah (@SaraJChipps), Jessica (@jessicahische), Rich (@richquick), Ivo (@gabrowitsch) and of course Bruce (@brucel).

Geek talking beer lovers at Frontend Conf: Wolf, Eric, Teodor and Joseph.

A big shout out to the whole Frontend Team, first and foremost Hjortur (@thewebhero), Eric (@stratosferik), Roger (@rogerguttormsen), Thomas (@trgrondahl) and Teodor (@teodor).

Be sure to follow the Frontend Team (@FRONTEND_CONF) on Twitter, because rumors say they have something really great and unique coming up for next year. Although I’m not really sure how they are going about to top this years Frontend church-party, including a norwegian calypso band.

Picture No.3 as well as more pics from Frontend 2011 by IXD Oslo can be found here.

Unfortunately I had to cancel my talk at Geekend2011 in Savannah next week. So the last conference I’m attending in 2011 is going to be an unconference – UXcamp Vienna. And I’m already looking forward to some interesting discussions.

The heat is really on and we are eager to leave the pitch as winners this year – but we need all of your help!

How YOU can help us

It’s really simple and just takes 10 seconds. Please click on the following link, select hotgloo, scroll down to the bottom of the page and click submit (of course you can vote in all other categories too if you want)

Vote Here >> www.thenetawards.com

You can vote once on any device. So make sure to vote on your smartphones, tablets, home computers also.

Please forward the poll link to your friends

If you happen to be on any social platform (Twitter, Facebook, Google+ or what so ever) please copy and paste the following:

Vote for @hotgloo and help them become WebApp of the Year at the #netawards http://www.thenetawards.com

Thanks so much for the support – hope you have a great summer and are enjoying HotGloo 3.0 already.

Please note that HotGloo 3.0 will mark the start of a new HotGloo era. New website, new account panel, new team collaboration and a whole new technology behind all this – the new solid backbone of our app. We got rid of uncomfortable barriers that slowed down the development process. So version 3 can be seen as the starting point for future updates and improvements. You won’t find tons of new features, instead you can expect a solid foundation with necessary improvements and great performance and usability updates and our promise that we will continue working on it every single day to make HotGloo the best experience guaranteed when it comes to web-based, interactive wireframing.

We are really excited about this and looking forward to your feedback. So put on your space suits people – version 3 is ready for take off.

What you need to do on or after August 15th

Not much really. Since HotGloo is web-based the system will be updated automatically. The only thing you need to do once is converting your projects to HotGloo 3.0 (with the ease of clicking a single button).

Preview of HotGloo 3.0

What’s new in 3.0?

Account Panel

• complete new design
• dashboard with activity radar
• improved usability
• easier administration of projects and people

Editor

• all new Team Collaboration (parallel wireframing mode)
• massive speed improvements, especially for large projects
• new notification system delivered right to the activity radar
• usability improvements
• masters sorting

Overall

• complete new website
• new improved help section
• new pricing plans (only for new sign ups)

 

Step6: The Wireframe Process

After breaking down the structure for the whole website in a site map we started to wireframe the new site. We agreed on splitting the process into two big chunks: the actual website and the account panel. Two complete different yet overlapping parts of HotGloo 3.0.

Marketing Site

The marketing site is the actual website communicating the application. Since we asked ourselves questions a visitor could ask of the website beforehand and clustered them into different interest areas, we had quite a vague picture of the page structure in our head. It was really important for us to introduce the editor in a very prominent way on the new landing page. The first time visitor should be able to understand what we are offering and how the offer looks like within a couple of seconds. He should also be able to get in touch really easy and find all the relevant informations clustered in areas.

The whole structure for the new site was divided by different interest areas. I’ve illustrated this step by highlighting the different interest areas we are using on the new landing page:

• Navigation
• Experience
• Call to Action
• Information
• Opinion

Account Panel

The account panel was a big challenge. We wanted to improve the over all user experience by developing a completely new panel, providing a better overview and an easy way to sort and group projects and people. We came up with the idea of designing a “Dashboard” including the “Activity Radar”. The activity radar is displaying all project relevant informations in a hierarchical order starting with the latest activity. We have different informations packed into the activity radar such as: Who opened a project and when did they open it? Who created the project and when? Who sent a note? When did they send it? What did they send? The ability to access a certain note with one click and much more.

Since account panels always differ regarding the current user state, we designed the whole account panel in an interactive approach. We laid out different user states for Owners, Reviewers, Editors – giving us the ability to testdrive the whole functionality of the new account panel, plus it helped us a lot to keep an overview of error and help messages, we needed to add and also to iterate on various account functions, like changing the account url, user information, up/downgrade functions etc.

Finally we exported the whole project to pdf and did a manual walkthrough to find out if we were missing some really important informations.

The benefits we experienced from wireframing the complete website upfront were:

UXLX in Lisbon was a blast, one of the most inspiring conferences I have attended so far. A brilliant mix of high quality speakers, really valuable workshops, great networking opportunities, awesome food and lots of talented and inspiring people from all over the world.

A lot has been written about UXLX on Johnny Holland, Usabilitytalks, Quodis, Frankwatching (in dutch) and even sketched by my friend Eva-Lotta Lamm and by Bauke Schildt, so I won’t go into details again, just pointing out my favorite sessions:

The Conference Highlights

Leah Buley - Building a Practice as a UX Team of One
Russ Unger – Guerilla Research Methods

Gorilla Research Team (video interviews from #GRMethods can be found here)

Stephen Anderson – Seductive Interactions
Oli Shaw – Magic, Hurt feelings and Forgiveness
Jeroen van Geel – The Childish Wash & The Happy Website
Louis Rosenfeld – On Not Declaring Victory: Going Beyond User Research
Nick Finck - The Cross-Channel Experience
Stephen Anderson – Critical Thinking Skills for UX-Designers
Dario Buzzini - The Manual of Detection
Don Norman – Living With Complexity

The Sticky Quotes

- Question the obvious.
- Good UX is all about communication.
- Find existing behaviors and log on to.
- We must break down the silos.
- When everyone zigs, zag.
- We write stories not manuals.
- We design experiences, not procedures.

For those of you who couldn’t make it to UXLX – you will find most of the presentations on Lanyrd.

Photo: Don Norman by Claudia Oster

HotGloo was a sponsor of UXLX and we were also offered to give a talk at the conference (find the presentation here) – so a big thank you to Bruno Figueiredo and the whole team behind the scenes – you did an amazing job!

Post conference UX get-together in Bairro Altho

Last week we started to provide you with insights on our redesign process. We started off with choosing a theme (space) and identifying a new key visual (the HotGloo spaceplane). This week we’d like to walk you through our next redesign steps.

Step 3: Research

This is one of the most important steps. We scanned the web for quite some time and compiled a list of the coolest web app pages.

These aren’t necessarily the apps we use every day but each of these websites has something we really love and look up to, ranging from a compelling headline all the way to nice call-to-action buttons, a strong key visual, great copy, an outstanding UI or a well done information architecture. We discussed, compared and shared a document where we noted our thoughts regarding these websites and rated them. Why also recapitulated and rethought all the great feedback that came from our great customers. What is working well right now on the site, what’s not or poorly working. We also revisited our wireframe survey we did by the end of last year and discussed the results. Piwik, our new analytics tool of choice, delivered new insights on which pages are working well, where are website visitors leaving the website and last but not least we also reviewed the Get Satisfaction Forum entries.

Step4: Strategy

Site Strategy:

We started with defining our own goals for the site. Where will the user land and how can we support him to easily find what he is looking for. How are we going to arrange our child pages, how many parent pages are there likely going to be? We wantet to really improve the user experience here. We thought about the ambitious goal to kind of take the new visitor by the hand and guide him through the most important hot spots of the site, making sure to provide everything he might need so that he will very likely sign up, try HotGloo for free and do everything we can to really impress him with our service so that he will become a paying customer.

Technology Strategy:

When thinking about the site strategy we also thought about which new or old/reliable technologies we want to use for the new website and the new editor. For the editor we tried something brand new: MongoDB (high-performance, open source, document-oriented database) and Node.js (event-driven I/O framework) in combination with Redis (advanced key-value store). For the frontend of the website we decided to stick to html, css, javascript and flash.

Content Strategy:

Regarding the content strategy we asked ourselves a couple of questions:

• How can we assure that we deliver top-notch content that will help the website visitor understand what our value propositions are?
• What content can we offer to meet the users’ expectations?
• How much content is appropriate?
• What style or tone should it have?
• Should we mix content with interactive experiences?

Step5: Site map

The concept phase started with outlining the sitemap. We usually do this in HotGloo first, simply by creating various examples of the main navigation. Therefore we create a navigation bar and add the pages to the editors sitemap. This visualization process really helps us defining the following important questions:

• How many parent pages are there going to be?
• Which tabs are really needed?
• How many child pages will we need?
• Which tabs could get transfered to the content section of the landing page or to the footer?
• Which content goes where?

Later on we broke it down and visualized the complete index of the new content with all the subpages to have a reference of which pages we need to wireframe.

Continue reading: Part3