About Accounts

Accounts is the central login portal for the apps of SDSLabs( a student-run technical group of IIT Roorkee, which has built various competition hosting platforms and other apps focused on simplifying the lives of students). Accounts provides a single account to access these applications and saves the users from signing in into each of these applications separately.

My Task

For my first summers in college, I was given the task of understanding the user behavior wrt Accounts, and based on it, redesign the flow of the app and also revamp the UI.

Identifying problems with the existing design

No redesign is effective without knowing the actual purpose of it. So I started off by identifying problems with the existing desing.
1. Separate Sign-In required for each app:
   The user was required to sign in to Accounts for each app separately every time he visited it.
2. End of flow after Signing In:
   Clicking on Sign Up in any app opened Accounts in the same tab, and after signing up, the user reached a dead end with his user profile opened in front of him and no link to redirect him back to the platform he came from. The user had no choice but to open that platform again.
   

   Existing flow of Accounts

3. Old and Inconsistent UI:
   The existing design was created at the inception of the group (around 2014), so the visuals had got outdated, and since an extensive set of audience visits this portal, revamping the UI was of utmost importance.
   

   Existing UI of Accounts. 1) Sign Up page, 2) Sign In page, 3) User profile page

Identifying Use Cases

SDSLabs has majorly two types of applications-
1. Competition Hosting Platforms:
   Platforms on which various technical competitions are held both on national and international levels.
2. Platforms aimed at simplifying college lives of students

On talking to developers of the group, I found that Accounts experiences the significant flux of users before any competition is about to start on any of the platforms.

To get a better idea of the users and how they use Accounts, I talked to some of my friends who actively take part in the competitions and those who mostly use the 2nd type of platforms. These were the two primary use cases identified-
• The user is on one of the competition platforms where the competition is about to start and needs to sign up/log in to participate.
• The user wants to use the features of the website and therefore needs to sign up / log in.

Solution

Correcting the flow

After identifying the use cases, I needed to fix the flow accordingly. My first idea was to instantly redirect the user to the platform from which the user arrived(as Google does). I discussed this with the senior designers of the group, and the major problem with this was that Accounts is not that popular, and people rarely open it directly. So even to make changes to their account details, they visit Accounts from other platforms. So I decided upon the following flow-

Wireframing

The next step was to turn the flows into designs, so I started wireframing screens

Final Designs

After looking at a lot of inspirations from various websites and after several iterations this is how the final designs looked -

UI Guidelines

Key Learnings and Takeaways

Every experience leaves a lot for you to learn. This being even truer for the firsts. Accounts was my first project, where I designed the complete product keeping the user requirements in mind. From the user-flows to final UIs, I learned about the various deliverables required from the designer's end. Since a lot of form design was involved, I had to go through multiple articles to improve the form-filling experience of the user. This project also helped me in enhancing my UI skills. Finally, I also collaborated with developers to deliver the final desired product.