Projects @ UNI.xyz
Our endeavor to put never seen before original ideas on the web by the sharpest design minds in world.
A snapshot of project uploader of UNI and the associated screens.
Fact sheet
Before we begin...
Projects happen to be the primary submission method of UNI competitions. The project aims to not only be just a submission portal but a holistic portfolio project builder for architecture related projects that can expand to students as well as professional level showcases.
You can learn more about UNI competitions here.
Background
One of the fundamental ways to manage design content was conceived as 'projects' on UNI - the same way figma has files. UNI's first GTM was to be a portfolio website for discussions, where projects as a feature has been a core of that piece.
However, that model completely crashed and only competitions survived. In our later endeavors what we eventually realized is the fact - 'projects' still has to be the driving factor as the competitions are temporal and projects are the permanent hooks for our audience to explore.
How the project came to existence
The old UNI (2018-18) was made as an MVP not designed for scaling and eventually got riddled with bugs. After the main competition experience was complete the old project pages need to be shelved because of unavoidable issues mushrooming.
Our customer support was usually swamped with submission queries until midnight especially when a significant number of submissions came from different time zones - many a times these went on till 5am (a time when employees aren't available, so it was mostly us replying as customer support).
This recurring event and several breakdowns, plus potential feature needs - led to an overhaul of the project feature of UNI.
The video shows the first upload tutorial I made as a content designer. (Above)
The first UNI project uploader design idea by Abhishek on Powerpoint. (Below)
Architects webscattering to build portfolios all around the web. Can competitions on UNI be a magnet that can bring people to this specifically designed corner for them?
Timeline
The projects @ UNI started in January 2019 after competitions were stabilized. We worked on it for 3 months inclusive of design and implementation.
Team
1 Design Manager, 1 UI Designer, 1 Front End Developer (Bhupesh), 1 Front End Developer intern (Maya), 1 Back End Developer (Raj), 3 Ops team (Imtiyaz, Divya, Pradeep)
My role and responsibilities
Craft a flow by understanding project use cases and competition use cases that makes a solution which scales to both.
Enumerate disciplines and tagging method to induce project tagging to boost discoverability.
Build wireframes and produce final prototypes that are development friendly and scalable for future use cases - like un-auth view, evaluation dashboards, journals, publications, etc.
Ensuring implementation, final testing and gather user feedback for improvements from our users.
Design embedded ways for people to share these projects and improve discoverability.
The problem cards life gave us in the beginning.
Project outline
Create a stand-alone project uploader that can handle images, videos, text and location - fitting for everything an architecture project published online will ever need. The steps to upload can be many but differentiating crucial path of user should always be covered. Additionally, there should be incentive to fill their maximum information as possible as to boost retention in future with more content leading to more user retention.
3 major user segments
1st type the competition submission audience who use the uploader only as a means to get their submission near the deadline. These are the primary user group for the current use case, but they will not continue to be in the future.
2nd use case is designers who liked either the competition submission experience or liked other projects and got motivated to publish their own works. This use case is rare in current situation but one of the places UNI would like to be in future.
3rd use case is the fact that designers are generally not just publishing content always - they are also discovering and exploring projects for inspiration. This is the use case we're aiming to achieve as a result.
The design process is centered around the 1st and 3rd audience segment, where we keep segment 2 behind our mind to achieve all great design results for all 3 of these.
Brainstorming and research
Architecture sheets are essentially long form stories with layers of information and drawings, which are usually very dense with information and requires a lot of zooming - especially because they are designed for print first and not web. At the same time, we had to made it mobile ready as well to boost discovery on the move.
We saw various competing platforms like Behance, Dribbble, Coroflot to understand how projects are stored across the web for creatives. The audiences of these are fairly diverse but mostly centered around graphic designers. The idea was to ensure that there is some degree of familiarity at the same time having specific features that architects would want. Behance is clearly the market leader when it comes to such portfolio experiences - and we questioned both types of uploaders the platform used to offer back then - the infinite scroll and the image gallery.
We realized sequential nature is an essential and hence scroll mode is what we went ahead with.
Challenges
Too many fields: There are way too many pages to complete in the name of business goal. Images are just one aspect but there were disciplines, location, etc. that were too much for a lot of new users. In the previous design (check video in the beginning of the page) all of it appeared right below each other on a single page in an accordion format which at times seemed very intimidating.
Fatigue: At the same time the user mindset is usually to get done with the process because they're already tired with all the work they have done to get the competition submission ready - so to push or nudge the user for completing the project is also very important in the large goal.
Unfamiliarity: The kind of portfolio uploaders available in the web are image galleries and designers are usually unfamiliar of how to operate one. This was learnt from a lot of conversations while solving queries of thousands of designers trying to submit via a live screenshare.
Design Principle
With our experience of previous UNI project uploader of not living up to the expectations of scale - it was easy to determine the new projects have to made as modular as possible and easy to adapt for future use cases - even the ones which are extremely. The components created here will always be restructured but the base components conceived should never change and the first iteration taught us that.
User journey
The entire information system was broken down in to stages with ample room for growth. As we are emphasizing on maximum data reception while upload - our current users will mostly view these are competition submissions and users will try to upload to get the best of the outcomes. The portfolio upload audience will see the detailed projects received for competitions and try to match the same benchmarks while creating their projects. This strategy helped us get detailed projects automatically after the first 1000 projects were complete.
Drag and drop based tagging
Making tagging easy
Tagging is one of the most crucial steps in UNI projects as the data we receive is many a times is rendered in images - which is not very healthy when it comes to discovery. While I designed tags to be manual we were also finding ways to make it easier to see if we can have suggestive tags while uploading these.
A few ways explored were having suggested tags based on the competition users participated in but they may lead to very similar keywords over and over. Another way was to have more
Final outcomes
Here's how the new uploader looked like.
Hooks for Distribution
Merging tags & SEO
To get a better ranking in terms of auto generated content we modularized the page tags to use popular keywords like disciplines to improve organic search discoverability.
SEO titles for pages on UNI
Limiting unauthorized view
At first we showed a popup directly to login if a user is not holding an account on UNI. However out of 100 users who visited the website with organic search 73 usually bounced with a direct popup to force login. After having a project preview popup and limiting certain download/comment features - the rate went lower to 51 users at present.
Sending invites to contributors
A big part of UNI percolating to other architects is inviting contributors and giving them edit access. These are the kind of email notifications they usually receive when they invite their team At least 4 people are suggested per competition team, and they're a great way for students/professionals to bring the entry fee down.
Reminders to complete project
We mapped the project building journey and optimized for drop offs wherever we can through email notifications on 3 critical steps (Choosing discipline, Inviting team and Publishing upload)
Illustration: Bucket with everything / A group with everything
More data - More retention (Crucial - Optional)
People's choice sharing
The biggest hook was a cash award embedded for getting more likes on their projects in the form of people's choice.
Tag list animated or working flow.
Impact
By prioritizing more content and more detail, we are making users go the hard path - but at the same time realizing competition users are momentary in a lot of cases, it made sense to channelize that in building better ranking and valuable content for users to explore.
These are the stats achieved by consistently building project as feature over the years - where a lot of links and reach are by our users sharing these as knowledge resources or by universities who's students were featured in here.
With no ads.
Improvements
Integrating Evaluation Dashboard, UI Improvements, Profile, Public projects and Search