© 2015 Strunden, All Rights Reserved.

Social Arcade

UX / UI Internship
  • UX / UI Internship
  • Team project
  • with Luca Lulleri
  • Duration 3 month
  • 2014
Product

Social Arcade is an online, drag & drop template service for launching branded Apps, Quizzes and Games - aimed at Creative Agencies and SME’s.

Why

As the first UX/UI designers to join the team, our tasks where to visualise and understand the users journey of the SocialArcade service. SocialArcade at that point used a control panel template that fell short in providing a service specific user experience. Instead the UI was bloated with repeated links and unnecessarily separated features. Our approach was to improve usability by focusing the user's attention on important features while providing strong visual anchors that reveal further features on demand.

First Step

There is only one time you can use a service for the first time.
Our design process began with objectively recording our first time experience of using the SocialArcade service. We categorised our findings into three types of issues:

Issue Description
New Features Proposing additional data to be presented to users
Proposing additional tool to manipulate presented data to improve the experience
Not intuitive If the user is not able to create a quick mental model of function, layout, content
Error Dead link, cut of images etc


Project Management

We created scrum runs to ensure a structured, result driven workflow. We worked independently and met deadlines with presentations to update the rest of the team of the progress made.

Solving Issues

Issue Description
Not intuitive User visually scan both bars in order to find a link.

The first design challenge was to combine the vertical menu with the horizontal header. We iterated the layout through a meried of quick sketches and paper collage Mock ups.




At first the engineers where skeptical about removing the menu bar in the fear of loosing functionality. Our detailed presentation on how the header can become a more valuable component of the UI removed this concern.

Offering even more though adapting to the pages content which adopts to the currently presented contend . focusing the users attention on a one central menu bar. (ill4) Demonstrates how the informenr slides out underneath the menue bar,


Identity through color

Orange is Social Arcades corporate identity colour. We used this color throughout the design to build a strong memorable association / relation between the brand and the experience. With the help of Adobe Kuler we created a balanced colour palette. While initially we tested with a light blue as a second highlight color for buttons, soon we realised that orange as the single colour strengthened the recognizability of the service.




Final Design

Itsy
Design Competition
Itsy project Icon
SocialArcade
UX / UI Internship
Social Arcade Icon