PROJECT INFORMATION
GOAL:
The goal was to create a social network that would attract talent be it students or professionals and help them get noticed while also encouraging collaboration between architecture related fields and making it easy for clients to find professionals in their area.
MAIN PROBLEM:
Currently users have to visit numerous websites to get inspired browsing long articles or spend a lot of time to find information that would help them come up with a solution to their problem, be it technical information, construction details and so on. Thus the solution involved creating a social network that would fix these issues among others ones that I can’t mention due to NDA reasons.
MY UX APPROACH:
I STARTED BY DOING A MARKET RESEARCH AND COMPETITOR ANALYSIS
This helped identify who the competition is, what they are doing, what can the app improve on, how it can be unique, who are the key influencers and later on helped lay out a detailed launch and post launch strategy. Doing a market research helped identify user needs and user problems as well as identify the average age groups for all the niches it was targeting
I TACKLED BRANDING EARLY TO HELP DEFINE THE BRAND COLORS FOR THE VISUAL DESIGN AND GET USER FEEDBACK
Tackling the branding early on helped define the brand colors needed for the visual design phase and ensure it inspired trust, it also helped get feedback from users as I interviewed them to make sure it was appealing to both young and seasons professionals. Based on their feedback multiple variations were created and different colors were tested, while the final one can be seen on the left.
I THEN DONE A SERIES OF USER INTERVIEWS TO IDENTIFY PROBLEMS AND MADE AN AFFINITY MAP
Interviewing professionals was a key part to validate the information found in the market research phase as well as understand how they use the internet in their workflow, what problems they are having, what would help them make their life easier and identify what features they would like. Based on this I was able to create an affinity map highlighting their problems, patterns, journey and goals
ALL THIS HELPED IDENTIFY THE USER GROUPS AND CRAFT THEIR USER PERSONAS
Based on the information gathered so far, I was able to clearly define the targeted audience and identify four user groups and highlight how each of them will use the website in their daily workflow and what information and features would help them solve their workflow problems. On the left is a more condensed version of the personas due to the final ones containing sensitive information that’s under NDA
BASED ON THIS I STARTED DEFINING APP FEATURES AND HOW THEY WOULD WORK AND SOLVE USER PROBLEMS
This helped brainstorm different solutions, then refine them as a way to solve user problems as well as get an idea of the high level flows and clearly define what systems will be in place and the user goals when visiting the website
I THEN DETAILED AND WROTE ALL THE FEATURES NEEDED FOR THE BACKEND AND FRONTEND
This was helpful to clearly identify what features I needed to design a UX for and get an idea of how they would work as well as help the development team start planning their approach, platform and come up with different technical solutions
THIS LEAD TO USING AN AGILE WORKFLOW
Based on the features, me and the development team were able to choose the best approach for this project and what technology to use, in the end we chose using an Agile methodology and CodeIgniter plus Twitter Bootstrap as the technology behind the website and a web API to tackle some of the more complex features
I’VE SETUP DIFFERENT STRATEGIES SO THE TEAM COULD GET STARTED WHICH LATER HELPED GET USER FEEDBACK
By setting up a roadmap and a clear strategy for marketing, seo, pre & post launch the team was able to get an idea of how long it will take to accomplish certain tasks, what we will do each day after the launch data, what features are a priority and so on. This helped build a viral coming soon page, build a initial set of 2000 users, determine key social influencers and bloggers as well as have working prototypes for user testing
CREATING A DETAILED WEBSITE MAP INCORPORATING ALL THE FEATURES AND SYSTEMS HELPED DEFINE AND IMPROVE THE UX
I choose this approach instead of a typical axure map since there were a lot of features and systems that were connected, this helped me easily get a birds eye view at the project while being able to hide or show certain elements based on how deep I wanted to think, thus allowing me to see how certain features might be better put elsewhere or integrated into the flow, how a new system could fit the existing flow and so on. It also allowed to easily move or edit things around at both a global or detailed level, making it a lot easier to work with.
NOW I WAS ABLE TO CRAFT STORYBOARDS SHOWCASING DIFFERENT USER JOURNEYS AND HOW THE APP WOULD HELP USERS
By identifying how each system works I had a clear idea how the app works and how it helps users, thus I was able to start creating some scenarios. Creating a series of storyboards was helpful to identify the core mechanics and the journey users will go through as well as help the team, especially the development team, get a better understanding of the features, how they would work and how they would help solve user problems
I ALSO DESIGNED AN ADVANCED GAMIFICATION AND ON-BOARDING SYSTEM TO BOOST USER ENGAGEMENT, USER RETENTION AND USER INTERACTIONS
I’ve designed a gamification system to help users get familiar with the features and increase user engagement, user interactions, user retention and making them come back since this was a key element to make users feel like there are constantly new things happening. During the user interview, they mentioned they like when they receive comments or someone likes on their work, thus it proved to be a key element to help with the UX. The process of designing such a system involved setting up an achievement system, assigning xp to users actions, testing the pacing , the sense of progression , the value and incentives which were tested on an early prototype.
On the other hand, having an on-boarding system proved to be a key solution to all the complex systems in play and unique features the app would have thus using such a system users would be able to signup faster, connect with members and learn about the app features easily and at their own pace while also informing about what they have to do next. This involved creating a welcome message, having a progressive profile in-place that shows how complete their profile is, a modal window informing them about what they need to do next, using social media for login and register, automatic e-mail describing what they should do next and what are some of the app features and how they work and having a detailed progressive tutorial that will introduce the user to all the features in-time so they won’t get confused or overwhelmed.
DOING A RED ROUTE ANALYSIS HELPED IDENTIFY WHAT FEATURES ARE IMPORTANT AND THUS DECIDE THEIR PLACEMENT IN THE UI
By interviewing users and asking them to assign a value to certain actions I was able to identify which are the most important features and by how many users would use them, this helped identify which are the key features and as a result it influenced their placement so users will have easy access to them and not have to go through 5 clicks just to reach the action or to avoid having certain features hidden and requiring users to remember where they were
WITH ALL OF THIS I STARTED CREATING A SERIES OF LOW AND HIGH FIDELITY WIREFRAMES
I’ve started doing a series of low-fidelity wire-frames in order to test different approaches and also help developers get an idea of the modules. This helped flush out layout ideas quickly and experiment with different approaches. Doing a series of high fidelity wire-frames really helped define the final layout and different UI states
AND THEN IT WAS TIME FOR THE VISUAL DESIGN
During the visual design phase I’ve tackled different design styles in order to identify which one performed the best. This ensured that it would be tailored to both young and seasoned professionals
Here are some additional
UX EXPLANATIONS
– click to view a larger image –
Here’s how I’ve solved
SOME OF THE UX PROBLEMS
