Login Redesign for UTS Store7 min read

Login Redesign for UTS Store7 min read 150 150 mfaizan

Purpose / Scope

The current layout of the UTS store’s website was complex and was outdated considering modern standards. The design was done 3 years back and required a redesign.

Current state

The current UI of the login was let’s say was bad. Upon auditing I figured out the following problems.

  1. Lacked the visual hierarchy of basic elements was missing or wrongly used like headings, link buttons.
  2. The whole three pages were styles like dialog boxes. That was totally a peculiar UI pattern itself.
  3. The heading was missing.
  4. Forgot Password Link is placed far from the context.
  5. The type and the controls didn’t match properly
  6. Checkbox to I Agrees statement doesn’t match.
  7. The exit strategy for each page was confusing for e.g. Close ‘X’ mark was being used without the context of what it does.
  8. The color of the link buttons is completely off from the other links on the page. which will only confuse the user, as they will have to explore each section first to understand what it does.
  9. Placeholder text is not available for all the screens.

Competitor Research

Did competitor research to understand simple but yet affective process of login/signup experiences. Following websites experiences were looked at.

  1. Apple Sign In
  2. Amazon
  3. Noon
  4. Namshi
  5. Invision App

Key common take-aways

  1. Persistent and clear headings.
  2. Minimalistic and clean design.
  3. Call to actions should be clear and visible.
  4. Error messages and feedbacks should re-thought
  5. I Agree checkboxes are now deprecated at the above.
  6. Proper error states and exit strategies implemented.

Excellent article on designing forms and its elements.

Inspiration

Inspiration is necessary to brainstorm the ideas. it’s like brain food. I looked majorly at following websites for inspiration and there were few more

  1. Apple.com
  2. Noon.com
  3. Microsoft.com
  4. Evernote.com
Apple.com Login
Login page of Headway, ❤️ the clean design and straight forward CTA
VSCO, Very minimalistic and straight to the point
Microsoft design

Solution & Proposed Design

Sketches & Drafts

Sketch few concepts on how the new sign in / sign up should work through and be like.

Invision Freehand: Excellent tool for brain storming and quick sketching digitally

User Journey

Drafted the user journey based on the sketches and ideas

Used Miro App to collaborate with my team on the login process. This was solely done for making both the stakeholders and developers understand the sign/sign up flow.

Wireframes

Quickly hopped on to Adobe XD to draft wireframes and by keeping the user minimal into digital screens.


Final Solution (The Big Reveal)

Here is the final solution that got finalized for development. It implements most of the points mentioned in the key take always and findings section of this document.

1. Sign in

  • Cleaner and a simple interface with clear call to action to sign in.
  • A proximity based forgot password button place next to the password input field.
  • Contact information of the business kept in-case user want to directly business for certain inquiries

2. Registration & Forgot Password

  • clean bold title explains the context of the page.
  • Retype password field is taken off to make the process quicker.
  • Check box removed from the ‘I agree’ and rewrote the statement and to point.

Learning & Outcome

Sign in and sign up pages are least favorable screens for any user, as they come in between the user’s tasks. Our tasks as designers is to keep these journeys as quick and straight forward as possible not forgetting its usability aspects.

For me to it was 🥳 fun going through the process of auditing a design that I previously did 🤓 [I know it was a crappy job back then]. My favorite part was auditing the problem and then doing the competitors research, it gave me the opportunity to learn what’s others in the industries tackling such situations.

Well, this was my 🏃🏽‍♂️process hope it was fun for everyone to read.

Thanks everyone for reading

.

Links or References:

  1. Article: https://uxplanet.org/18-ux-design-tips-for-registration-and-login-forms-f897557358ba
  2. Webforms by Luke Wrobleski: https://static.lukew.com/webforms_lukew.pdf