User Experience Project 1: Login and Registration

Allison Varady
4 min readOct 23, 2018

Project one for this class was creating login and registration screens for an app. In order to accomplish this, I had to learn about all the steps it takes to get to a functioning app. In order to finish this project, I had to create user flows, wireframes, a low fidelity prototype, style tiles, visual comps, and a high-fidelity prototype. The purpose of this project was to get the class thinking about all the steps it takes to get started designing and creating an application. Thinking about the user, and how they would use the app while also applying design that was user friendly.

Part One: The first part of this project was thinking about how users interact with logging in and signing up for an application. In order to do this, I read the article “37 Signals Shorthand for User Flows” then created my own user flow based on what I thought a person would see and do while singing up for and logging into an app. Before reading the article, I had never given any thought to what it takes to make login and registration screens.

User Flow for Login and Registration Screens

Part 2: The second part of this project was actually applying the knowledge I gained from part one and creating wireframes. In order to do that, I had to think about what I wanted my app to look like. Did I want something out of the box or typical? Did I want it to be minimalistic or have a lot going on? I decided on an app that looked like typical login and registration screens because users are familiar with simple login and registration screens and I did not want to make the users search and have to think about how to sign up or sign in.

Basic Wireframe for Login and Registration Screens

Part 3: The third part of this project was getting into Sketch and create low fidelity prototypes. This enabled me to place information, buttons, and text to see where I wanted the pieces to go. I liked this step of the project because it let me think about where I wanted to place the elements of my app without worrying about the content. If you want to check out my low fidelity prototype, click here.

Low Fidelity Prototype

Part 4: Creating a style tile was probably the hardest part of this project for me. I wasn’t in class when style tiles were created and talked about, however, I did hear that everyone created style tiles and the had to swap them. So, I had another design student create a sort of style tile for me and that is what I used to create my project. The only reason I had trouble with these is simply because I was gone from class that day. However, I do think they could be fun to create for projects because that is when some of the creativity comes into play. If you want to check out my style tile, click here.

Style Tiles

Part 5: Part five of this assignment was combining our wireframes and style tiles. I was a little confused for this part of the assignment because I thought this was basically creating our high fidelity prototype. For our next project, I will now be able to understand the difference between a high fidelity prototype and a visual comp. If you want to check out my visual comps, click here.

Part 6: I enjoyed part six of this project a lot. It was the part of the project where the login and registration screens came to life. I used Sketch and InVision to create prototypes that changed screens when tapped on. This was the most exciting part of the project for me because in the end, it looked and acted like a real app. That was pretty cool. If you want to check out my high fidelity prototype, click here.

High Fidelity Prototype

--

--

Allison Varady
0 Followers

Visual Communication Design student at Eastern Washington University.