SOCIALIGHTS

Collaborate with Android development students and provide the UX/UI for one of their applications. This was my second assignment, completed in General Assembly's ten week immersive course.  

SOCIALIGHTS HOVER.png

CHALLENGES​

UX : 

Beau Pesa


Development :

Sam Ray

  • This was the first time we had ever worked with a developer to create a functional product. 

  • First time collaborating with another UX designer using new tools to create deliverables.

  • Had to learn Android interface system and components for the first time. 

One week

ACTIVITIES

Pen and paper, Illustrator, Sketch, Balsalmiq, 

InVision. 

Competitive analysis, wire framing, prototyping, teamwork, material design development, flow chunking, persona creation, emotional journey creation, mind mapping, high fidelity mock ups, google map styling, sketching, style guideline creation, worked within the android ecosystem. 

RESEARCH

COMPETITIVE ANALYSIS

While all of the applications operating in this market mapped events, none told users physical locations of events their friends were going to in real time; this emerged as an opportunity to fill unmet needs.

socialights competitive.jpg

IDEATION

I decided to begin my ideation process with associative mind mapping, otherwise known as affinity mapping. This helped me brainstorm what kinds of people, places an d things I associated with event attendance. It helped me begin to think about what an event finding user might be concerned with, such as event type, size and cost as just a few high level examples.  

We drew out a basic user flow that took as few steps as possible. Our developer told us that at the time of our collaboration the interface he was working on would be just a map with dots indicating event locations of people in the applications network. 

I wanted to begin thinking about the different types of festival goers and event promoters that might use the application, fortunately Austin is a perfect city to observe such people, given the huge presence of music culture. These three personas are a cross section of some different possible user groups with different types of motivations. 

I developed a hypothetical timeline for Sally's first day of the SXSW music festival. Since our application is ultimately supposed to help people, I tried to imagine what some of her challenges and goals would be throughout the day, drawing on some of my own personal experiences during that time of year in Austin.  

FEATURE BRAINSTORM

With the competitive analysis complete, I took another look and began to research what kinds of features similar applications had and which ones they were missing. Each of the competing applications had features that I thought it would be important to integrate, but none of them had all of them.

DELINEATE

EARLY SKETCHES

With a decent idea of what kind of features our users might be looking for and a sense of their motivations, it was time to start drawing. Since this application is supposed to help you find events in real time, I wanted a really streamlined user flow that gets information to people fast. That way they can get on with their business instead of fussing with their phone. 

After sketching out some loose ideas, I created some high fidelity key screens for the team to review. If I were to do this again I would probably have created a set of lower resolution wireframes before moving on to this stage. 

Using sketch and InVision we quickly put together a MVP prototype of the application, which was designed to show basic functionality. 

Since the initial target user group was active socialites, living in Austin, I took an image of downtown Sixth Street at night and pulled colors from it to determine a palette for the application's interface. I feel this process helped capture the unique appearance and energy of the area.  

GOOGLE MAPS STYLING WIZARD

I asked my developer about altering the look of the map, which used Google Maps default styling and he said it could not be altered initially. A few months later Google rolled out the maps styling wizard; now I can use that tool to create a custom look and hand off the necessary JSON code plus the static map API URL ... awesome. 

VALIDATE

After putting together the first InVision prototype, I tested it on a few young socialite people to see how they responded to it. Most of them enjoyed the very straightforward interface design and the lack of complexity.

  • Established an MVP that was buildable with our skill sets and timeline 

  • Kept it simple 

Prev.

  • Wish we had done more market research 

  • Using new software caused some mistakes. 

Next

MIND MAPPING

mind map.jpg

FLOW CHUNKING

EMOTIONAL JOURNEY

HIGH FIDELITY MOCK UPS

PROTOTYPE

Screen Shot 2018-09-07 at 4.17.39 PM.png

PERSONAS

USABILITY TESTING

WHAT WE DID RIGHT​

AREAS TO IMPROVE

THE TEAM

TOOLS

TIMELINE

PROJECT DESCRIPTION 

VISION

PALETTE

Socialights uses both the Google Maps A.P.I. and Facebook's event feed to map events that you and friends are attending or interested in. Then it generates a map in real time to help you find them. 

feature brainstorm.png