I recently decided to take part in the Challenges to learn and improve my skills in Adobe XD, Illustrator, Photoshop, Sketch, and InVision.

: Up (design a sign up page, form, modal, or app screen; full freedom to take it whichever direction you please).

Here’s a breakdown of my thought process and steps to get to the final product:

1. Research and Brainstorm

The very first thing I did was start browsing Dribbble for ideas and inspiration from other designers that had done the same challenge, and also the most popular shots across both web and mobile platforms. As a designer, I was looking for design and functionality that stood out from the crowd, both within the sign up process, but also in other processes. The ones that left a lasting impression were ones that replicated actual human interactions and went beyond the push/click of a button.

One feature that stood us was a scroll dial within a mockup for a plant app by Dribbble user Andrea Hock. I liked that it was different from scrolling up and down and the interface was not the typical linear model. This inspired my dial function on the sign up page.

https://dribbble.com/shots/4956007-Automated-Hack-12-Automated-Plant-App

2. Wire-framing

I went through many different ideas while wire-framing. I didn’t originally intend to make the sign up screen for a fitness app. I was so hooked on the idea of the dial function that I thought of products/designs that the function would make sense to use with. The first round of wire-framing included just a generic sign-up process showing different icons to scroll through.

First version of differing dial icons

Although I loved the idea of a dial, I knew that this wasn’t the most appropriate design for a sign up process of an app. I wanted to keep it simple, but also build progression as the user works through the sign up process. I decided to keep the icons the same and show progression by building on the icon as the user went further along the process. At first, I explored the use of a “user” icon, to show a profile becoming more detailed with each step.

To take it one step further, I personalized the icon to the app, and built progression through real-life progress that a user would experience through the app: building their physique and adding on muscle mass.

3. Feedback

2/4 screens of the first iteration of the sign up page

I showed the first iteration (2 screens pictured above) of the sign up screens to 3 people. I got the following feedback:

  • Add in option to sign up through Facebook, as it’s standard practice and results in quicker sign ups and less drop offs since users have to exert minimal effort
  • Add in some indication of the number of steps involved. With the dial moving along with each step, it’s hard to know if the process has 3 steps, or 10.
  • It’s hard to tell that the dial can be scrolled back and forth, and may not make the most sense since a user would have no need to go forward without filling out the necessary fields (nor would they want to)

4. Final Product

Based on the feedback I received, I made the following changes to reach the final product:

  • Added in option to sign up through Facebook on the main screen
  • Instead of the second and third icons appearing once they’re scrolled to, I made all three icons visible from the start of the process. This removes the unnecessary functionality of scrolling through the dial, and let’s users see at the beginning just how many steps involved.
Final product for sign up page of a fitness app

Main takeaway: It’s tempting to roll out fancy features and functionality across the app, but not every feature/functionality will be appropriate for every interaction. In my case, I liked the idea of a dial and ended up building my design around that functionality vs. first identifying the task objective and designing based on what would work best.



Source link https://blog..io/daily-ui-challenge-001-sign-up-129faea1b945?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here