UX UI DESIGN PROJECT

ARCHWAVES

NICHE SOCIAL NETWORK | WEB APP

ABOUT:

Archwaves is a next gen social network aimed at young and seasoned professionals from the architecture, interior design, construction and visualization industry as a way to encourage collaboration and interaction between these related industries making it easy to find all things both visual and technical inspiration for their projects. I had multiple roles for this project, acting as project lead and designer coordinating a small team of developers, designers and seo specialists, planing the tasks and working alongside each of them.

REFERENCE: Groza Cristian

ROLE: UX UI Designer / Product Designer / Graphic Designer

TECHNOLOGY: Agile, CodeIgniter, Twitter Bootstrap

TOOLS: Axure, Photoshop, Balsamiq Mockups, Mindmeister, Rotring 600 Pen, Dotgrid.co Paper, Koh-I-Noor colored pencils

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

1. how to visualize the entire website flow and functions easily to better understand the features and how they should work together to be able to craft the UX? solved by using a mind map that could act as a website flow, while being able to colapse certain elements to hide or display certain functions, while using connectors helped easily understand how each feature is connected and how it works, thus being able to get a good idea of how to tackle the ux design.
2. how to make users get a fully working profile from the start? in order for this to happen the ability to upload their project samples during the signup, this way they would have a continuous experience and not be interupted by having to tackle the signup process and then be redirected to the dashboard where they would search for the upload tool or forget to complete their profiles and the option to skip this process during the signup was also an option that was taken care of.
3. how to prioritize what features need to be present in key locations so users could access quickly? this was solved by using a red route analysis to break down each future, asign values to them based on how many people would use it and how often and then design the UI
4. how to educate users about certain mechanics? solved by designing an on-boarding system that goes step by step and reveals more information as the user interacts with the website in time and by sending an e-mail informing users what they should do next
5. how to drive user engagement and user interactions while making users return ? solved by using a complex gamification system that incentives users to interact with content, perform certain actions while also giving them a social status in the community
6. how to make username registrations fast? solved by handling the process directly on the homepage without having to redirect users to another page making the whole process take less then 10 seconds to get done
7. how to make image viewing feel natural and less cluttered? solved by removing distractions such as sidebars, ads, features, making it almost full width and increasing the spacing between images as well as the image size
8. how to get users to interact without having an account? solved by letting users use Facebook or other services to post comments
9. how to make users easily browse all the type of content? solved by grouping all the main content categories on a single page where users would intuitively select the category and see their results below instantly
10. how to display user stats or their connection activity easily? solved by displaying their stats in a close to reach area while giving them the ability to hide certain types of content that they don’t want to be displayed in their feed
11. how to reduce the need for users to check different dashboard categories too see if updates happened? solved by using different visual cues as indicators that something has changed
12. how to make users signup faster? solved by letting users use social media to create an account and letting them skip certain steps of the signup

THE IMPACT

Design wise:
  • solved 100 user experience problems, challenges & created wireframes, mockups , diagrams, flowcharts , storyboards, prototypes
  • designed an on-boarding system avoiding overwhelming users with all the features by introducing them slowly to the app in a unique way
  • created a global feature and flowcharts, which helped envision how each feature is connected, what the flows are and made it easy to hide, edit, move or change things in just a few seconds instead of minutes or hours thus increasing productivity and gaining the ability to work either on a certain feature or at a global app level
  • used Photoshop wireframes to quickly explore and test different approaches, resulting in a pre-final draft in 2 weeks, keeping costs down by not requiring expensive products
  • explored different visual design directions, tailoring them to young and seasoned professionals
  • performed usability testing on different prototypes which led to identifying early problems and avoid a bad user experience at launch
  • used red route analysis to define which of the 20 features need to be easily accessible, reducing the need to search or remember them
  • designed a Gamification system that helped push user interactions by 30% while also drawing them back, keeping the website updated with user generated content
  • conducted user research like ethnographic research and user interviews with 20 users of different levels of experiences to identify their habits, problems and how they use the web in their work-flow, resulting in a product that solves critical market problems
Project management wise:
  • created a 20 page document describing all the features, that resulted in identifying the minimum viable product and choosing the best development approach
  • used storyboards to envision how the app would solve the core niche problems which led to the stakeholders and the team to easily understand the solution created seo,marketing pre & post launch strategy that helped the team stay organized, leading to a list of 2000 users, identifying social influencers, have working prototypes, know exactly what to do in alpha, beta and post-launch
  • designed a unique viral launch page that would generate exposure before the app is live
  • avoided launch day hiatus by creating a two week day by day team task spreadsheet
  • mentored and directed a cross-functional team of six, teaching them how to perform key tasks
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps