STORM is an interactive storytelling tool. It's a UX/UI design project that started in the summer of 2014. It has been designed with a focus on user experience. We conducted user interviews and online surveys to gather as much information as possible. From there, we created a website schematic and overviews of the different interactions.
I applied my general knowledge (design principles) and my specific knowledge (information from our user research) to design the features and to guide me in the art direction. This project is still being worked on.
The interface editor is meant as a tool for developers and system administrators. When we started this project, we knew there would be many challenges because of the complex notions and features available. We started by sorting the differents components in categories that make sense to the user. We applied a color scheme that differentiates each component and make them easier to remember. We also added affordance by having drag and drop features for certain components. In order to make all this clear to the user we explored multiple options. Ultimately, we felt the best way to ease the user's learning curve was to secretly teach him how to use the interface. For instance, when the user creates a page, he has to use our drap and drop feature. From that point the user is familiar with this feature and it can be re used in other design patterns.
As far as the art direction is concerned we decided to go with darker colors, often used in "code editors" or software of the genre. The idea was to keep the environment familiar. Our first iteration used some more "skeuomorphism" elements but we eventually flattened them out (the brand uses mostly flat design) while making sure we kept the interface easy to understand.
WE ARE ALL DEVELOPERS
This project started with some research on social interfaces and online communities. To keep it succinct and to present it to the rest of the team, I did a powerpoint presentation with only a few key points per slide. Each key point was also put in context with a visual example.
Each keypoint was then used for the design of the website. For example, the documentation on social interfaces suggests that some gamification features can enhance an online experience for certain audiences. After clearly identifying our audience, we felt it would resonate with our audience as well and so we implemented it in our design.
As far as the art direction is concerned, I re used Coveo (the client) branding guidelines while adding some more "fun" elements such as icons and illustrations. The content is also balanced between the serious tone of the company for the more critical information (such as product information) and a funnier tone to make the community welcoming and friendly.
I always found pagination kind of annoying on any website. They usually look like big boxes with multiple numbers, taking a lot of space. I personnally find that it is hard to see on which page you are at any time. When you have a lot of pages (50+) it usually requires a lot of clicks to access some of the deeper content.
After some exploration, I came to a solution where the current page number also serves as an input box if you to navigate to a precise page. The solution is not perfect, I think you would need some kind of indication to make sure the user knows what to do since this is a relatively new feature. We could also explore something with a dropdown list or the like. For now it feels like the hamburger icon, it's problem but if it's vastly adopted, people get used to it.