New look and feel, to match new functionalities.


  • withSIX

    [i][color=#b6b6b6]Work in Progress! This post will be updated over time
    [/color]
    [font=Georgia][size=6][img]http://i.imgur.com/Sem0A6v.png[/img]
    My time to shine!
    [/size][/font][/i][size=3]So far we have mostly released blog posts and forum topics about our code development. [/size]
    [size=3]Introducing new features and technical improvements. [/size][size=3]Let's talk design for a change! :-)[/size]

    [size=3]This last few months our new approach to web-first has been taking shape. [/size]
    [size=3]We introduced new functionalities to the website and a mini-client to interact with them. [/size]
    [size=3]The beta-fase resulted in great insights from feedback on the forums and social channels. [/size]
    [size=3]We've also been learning from lots of hands-on real-world experiences ourselves.[/size]

    [size=3]We're now starting our new phase where we shift the focus on presentation and usability.[/size]

    [b]New focus
    [/b][size=3]The current website was designed a few years ago as our first real face beyond the desktop client. [/size]
    [size=3]Meant to introduce the features and showcase all our content in a clear way. [/size]

    [size=3]The main focus was on discover-ability, allowing users to find content. The website is changing into our main GUI. [/size]
    [size=3]The new design is build for discovering, but also installing, managing and launching content. [/size]

    [b]Library
    [/b][size=3]We introduced the library area to the website, shoehorning in EVERYTHING missing from PwS. [/size]
    [size=3]Resulting in more of a test area, where users ARE able to find their content back. [/size]
    [size=3]With abilities, like changing the version, uninstalling and easy access to all updates available. [/size]
    [size=3]Creating and managing collections is also hidden in there.[/size]

    [size=3]From the feedback we learned that besides the presentation, the actual flow is lacking. [/size]
    [size=3]Switching between discovering content and checking your library taking too many steps.[/size]

    [b]Playlist & action bar
    [/b][size=3]Easily select multiple mods to play while still being able to browse between pages at the same time. [/size]
    [size=3]We're quite proud of the flow here and the playlist really seems to work. [/size]

    [size=3]But, the design does only show up to 3 mods at a time. [/size]
    [size=3]To actually play them, you need to activate the playlist to see it appear in the action-bar to the left. [/size]
    [size=3]If it's first installing/updating, you need to press play afterwards too. We created something confusing. [/size]

    [size=3]We came up with a simplified approach that's also more powerful.[/size]

    [b]Header mayhem
    [/b][size=3]The current website has too many headers. Top section showcases what area of withSIX you're using. [/size]
    [i](Used primarily for Play, but also shows Home & Connect.) 
    [/i][size=3]Second section header shows which game you're browsing. [/size]
    [size=3]Both with their own menu structure and background image, creating quite a big top-section. [/size]

    [size=3]The Content header appears below these on specific pages. [/size]
    [size=3]Moving their description and other info even further down.[/size]

    [size=3]The new approach changes all 3 headers, reduces the height each takes up and moves focus to the content. [/size]

    [b]Quick access
    [/b][size=3]Launching from the current website doesn't feel quick nor intuitive yet. [/size]
    [size=3]As a user you have to use a navigation structure that is the same for every single visitor and user. [/size]

    [size=3]With our new approach we want to allow the user to adjust the UI more for their own use. [/size]
    [size=3]And introduce sections to pin content for quick access.[/size]

    [b]A new home
    [/b][size=3]The current website has a distinct Home section. [/size]
    [size=3]Build for first time users to find out what we do and to download the client(s). [/size]
    [size=3]The moment you're using our software there is no reason to go there anymore. [/size]

    [size=3]New users don't immediately see the content we have. [/size]
    [size=3]If the first visit starts on a content page you'll might never see the home page. [/size]

    [size=3]The goal is to design states for a dynamic home experience. [/size]
    [size=3]Starting with introducing new visitors to what we do. [/size]
    [size=3]Then guiding new users through the functionalities and their first steps. [/size]
    [size=3]Lastly displaying a personalized section to continue from. [/size]
    [size=3]Each catering to their use case.[/size]

    [b]Notifications
    [/b][size=3]Notifications guide you through what happened when you where gone and showing finished actions. [/size]
    [size=3]We want to communicate what is happening more, besides the on-screen toast-notifications which disappear. [/size]
    [size=3]And not just what we do either, are you an author? Did you create a mod, mission or collection? [/size]
    [size=3]And are people commenting on it? Notifications will keep you up to date, no more need to check your mail. [/size]

    [b]Status
    [/b][size=3]The site experiences either shine or fall with users running Sync client on their system. [/size]
    [size=3]An indicator will show if you're connected or reminding you to launch the client.[/size]

    [b][size=4][u]Initial designs

    [/u][/size][/b][img]http://i.imgur.com/1yfQ8lb.png[/img]
    [img]http://i.imgur.com/j1Sdixg.png[/img]
    [img]http://i.imgur.com/frlIubV.png[/img]
    [img]http://i.imgur.com/Lvfb2lc.png[/img]
    [url=http://i.imgur.com/D8fOCSJ.png][img]http://i.imgur.com/IjsyyCL.png[/img][/url]
    [url=http://i.imgur.com/bENdYdl.png][img]http://i.imgur.com/Wd4VI35.png[/img][/url]

    [b]Bonus:[/b] [u][url=http://i.imgur.com/tmAT1IL.png]Small content image solution [/url][/u]


  • withSIX

    Please join us in taking this next step with our interface!
    If you feel something is missing, completely wrong or anything else - please do share your thoughts, as clearly as you can, so we can learn from it!

    This is really just an early start for the design, lots can and probably will change when I work further on a proper flow-map and create corresponding wire-frames.

    Some points we want to always take into consideration is that with our web-first approach you will also be able to manage your content from a mobile device.
    Another point is that the design needs to be loaded quickly, with the new side-panel we already need to think smartly how we will load in the content without blowing up our data cost nor keep users waiting for minutes.

    Any help is welcome, keep in mind that we are a small team. Right now Sickboy is the only developer, coding all back-end and recreating my design in the front-end.

    My post will be updated over the days, I'm sure I can rewrite a couple of things and add all sorts of stuff. Maybe I need to eventually split up between a few specific topics in the future.
    All this is part of our new approach where we want to work as open as possible, together with the community.



  • Good to see PWS finally does something about the godawful design that is currently used. The above designs/wireframes look far more like modern-day applications with an icon based main-nav and a list side-nav. This could be a major improvement.

    Something that bothers me though:

    1. The [i]"Full playlist view" [/i]seems to contain your active playlist with the mods. So where are my other configured playlists? How can i switch playlist?

    2. Why is the "Preview content page" like 75% image? Why not give this a more compact view? It's way to huge and forces all relevant information like mod description out of view. Look at how the Arma 3 Units pages are build. They are very slick: [url=http://units.arma3.com/unit/bohemia-dev-squad]http://units.arma3.com/unit/bohemia-dev-squad[/url]


  • withSIX

    @NyteMyre Thanks for the feedback. I'll have to get it right one day, right ;)

    I'll take your concerns into consideration, let me share my initial thoughts on them:

    1. One of the goals of the new design is to make it easier to navigate through your library, activate different collections and installed mods.
      The library isn't supposed to be anything more than a list showing what is being launched with your current session. Besides dependencies for mods, a mission might auto-activate some required mods, the same applies to servers which we want to bring back support for too. The playlist will show you all the stuff that's going to be launched, a mix of manually selected and auto-added content.
      The current implementation added more functionality than necessary for this area, complicating and confusing the user (as you demonstrate in your other post) so the goal is to keep functions separated but more accessible too.

    2. I want the content to shine, to give content authors a big space where they can promote the content with little visual noise surrounding it.
      Besides that we have a library of nearly 2500 mods for which most images fit the 16:9 ratio on the current design. I've already decreased the height by 20% (making the ratio something like 16:7), but when I reduce the height further most images will need to be replaced to still look correct. For us it's not that hard to switch the size we display the images at, but for them to fit nicely is harder. What I like about your example is how it already scrolls a bit down the page to hide the header but keep it accesible to the user.

    Let me know what you think about this and if you have any more feedback. I'll dive further into the base design and focus on flow and wireframes soon too.


  • withSIX

    I've been a bit quiet, not really the goal I had. Development hasn't been still though!

    As a team we've been working on mockups for most elements and we're rapid prototyping the design hidden on the live website to get a proper feel while using on a daily basis.
    We will reveal more shortly.

    In the mean time, here is an update of a full-size mockup for the side-nav Library section:
    [b][u][size=3][url=http://i.imgur.com/H3qVa9c.jpg]CLICK HERE[/url][/size][/u][/b]


  • withSIX

    We're almost ready to release the new GUI!
    Check the announcement topic for our reveal video: [url=https://community.withsix.com/topic/205/meet-the-new-withsix-com-introduction]https://community.withsix.com/topic/205/meet-the-new-withsix-com-introduction[/url]

    Please give your feedback as it's really helpful to get fresh insights after looking at this for such a long time already. Been using this GUI heavily for the last few weeks, we're loving it ourselves!


Log in to reply
 

Looks like your connection to withSIX Community was lost, please wait while we try to reconnect.