Design overview of the app

- [Instructor] In the first video for this class,I gave you a short preview of the applicationwe're going to be building.I mentioned that I wanted to do somethingwith machine learning, so I came up with an ideafor a site where users could log inand play simple games like tic tac toeagainst a mystery opponent who may or may notbe a machine pretending to be a human.But now let's take a step back, way backto the brainstorming and planning phase.Remember, our mindset for this course is gettingto MVP, minimum viable product.That means we need to keep our eyes on the prizeand pare way unnecessary complexity from our application.

We need to watch out for feature creep.When I say watch out for feature creep,I mean that we as application designers need to becareful that we don't continue to add small tools,features, and improvements to our applicationuntil the whole project becomes unwieldyand unnecessarily complicated.While we're planning our app, we're going to make sureour focus is on the application's core functionalityand we're going to be wary of potential complexitythat might make our application unnecessarily difficultto build.If you get a really good idea but think it mightbe a bit tricky to implement, you should write it downand hopefully you can get to it in a future version.

Here, for instance, are some of the featureswe're going to implement and some of the featuresthat I wanted to add but I'm afraid I'm going to haveto save for later.So when I think about the core features,I want my users to be able to have an authenticated login,I want them to be able to play against a simple bot,I want them to be able to guess if that opponentis human, and I want to store all this informationin a database.I also know that there's some ideas that I should savefor later.For instance, even though I want authenticated login,I probably should save Facebook integrationfor another time.

I also know that I need to save playingagainst a live person.Right now, writing a bot is going to be relatively simple.Getting our application to connect to a serverthat allows us to have player versus playercould be a lot more difficult.I'm also going to save this leaderboard ideafor later.I think having users interact with one anotherjust like playing, could be a little bit too complexfor our minimum viable product.Finally, I'm definitely going to wait on usinga real machine learning API.That could be a lot of work.To guide the first stage of our development,we're going to create two important sets of documents.

These will be our user stories and our wireframes.Let's start first with our user stories.Our user stories are intended to aid developmentby providing us with a linear, narrative style descriptionof a hypothetical user's actions as they utilizeour application.I can think of a few user stories.The first user story that I imagine is that of logging in.First the user can choose to create a new accountor login.Next the user enters their username and passwordand presses login or signup.And finally, the user is navigated to the site's homepage.

Let's take a look at what we want that to be likein practice.So here I am on my site.I press log in or sign up.I can create a new email,and great, I've been brought to the homepage.Let's check out another user story.The next user story I want to documentis playing tic tac toe.First the user chooses to start a new game,then the user is connected with an opponent,next the user plays through a game of tic tac toe,and finally, when the game is over,the user gets to guess whether or notthe opponent was a human or a robot.

Let's imagine what that would look like.I start my game, I get to play against an opponent,and after I win or lose, I get to guesswas my opponent human or robot.Finally, the last user story I want to documentis viewing and editing one's profile.I imagine that first the user may navigateto their profile page from the menu,that the profile page displays the user's information,and a record of their last games,and that the user may edit their personal information.

On my site, I want to be able to go to my profile pageand see a record of my games.So these three user stories, logging in,playing tic tac toe, and viewing and editingone's profiles, are the user storiesthat are going to guide our development.We'll take these as a base for the way we wantour users experience with the application to go.The next document we're going to createis our wireframes.Wireframes are visual, sometimes interactiverepresentations of an application, which often focusless on the application's specific graphic designelements and instead emphasize the layout,features, functionality, and broader user experience.

Let me show you an example of one wireframeI created for our homepage.Here you can see I don't focus too much on coloror the specific texture of individual buttons,but instead focus on what the layoutand general functionality of each of the toolsare going to be.Here I gave another wireframe, imagine how I wantmy pull-out drawer to look, and then here alsois a wireframe of how I thought our profile pagecould look.As you can see in my wireframe, I don't get intotoo much detail about what goes in the game records,I just put a box and say this is where the game recordswill go.

If you're not a graphic designer, don't worry.That's not what wireframing's about.And you also don't need to be afraid to usea pen and paper.There are also a number of other tools available online,many of them free.I used Adobe XD for my wireframes,but I've also used UXPin, Marvel App, and Balsamiq.Go online and check out what works best for you.Now we have our user stories and wireframesto guide our development as we move forward.Remember, it's okay to change things.We don't need to use these as a strict rulebook.Instead, they should be our guiding documents.

Resume Transcript Auto-Scroll

Author

Updated

6/26/2017

Released

4/7/2017

React—a popular JavaScript framework—boasts a number of developer-friendly tools that can help you quickly and efficiently turn your ideas into fully-functioning applications. If you already have a solid grasp of the essentials of full-stack JavaScript web development, this practical, project-based course can help you get acquainted with React. Follow Carl Peaslee as he walks through how to plan, configure, create, and deploy a scalable, full-stack React and Relay application. As Carl explains how to lay out a UX roadmap, construct the foundation of an application, implement authentication, and connect your app to a remote database, you can practice what you learn by building a site where users can play simple games.