Welcome to Angler Reading App Documentation Site!
I did a reading app can run on tablet or phone and can interface with other external devices (sensors, watch, etc). After iterating concepts & designs, I create a very interactive clickable mockup with actual visuals, and use that mockup for formal usability testing.
Step 1. Planning and Research
Planning
Reading app.
This app facing to 16 - 35 age people who love reading and want learning. You could have group chat with you friends or random people talking about books.
Main nav(At bottom)
1.My books
2.Search / section
- Different reading section (such as children, science, art, design, novel…)
- Top three popular books in last week / Book Sale / Events (finished reading one art book in this month could win 10 points.)
2.Group chat with friends
3.Reading Setting/ My account
Eat randomly
You can: 1.This is so hard to decide what to eat for every meal. This app will give your suggestion.
2.Find Restaurant/ Want Cooking
3.How many people
4.Allergy / favorite foods
5.eat there/ take to go - what you should buy/ How to cook
Stay Focused, and collect different cats
You can: 1.Put down your phone and focused your job/ homework/ family/ for 25 minutes.
2.Open this app, set what job and how long you need focused. This app will lock your phone until you touch it. Cats will visit your garden when you start focused. If you touch you phone between the focused time, the cat will run away. After the time you set for, you will get the cat's information. You also can add friends in this app.
Research
Step 2. Scenarios
I created 5 personas different people who will want use this app
Part 3 – Functions
1.Read Books in App
2.“Bookstore” for Ebook, Hardcover, etc.
3.Monthly/Weekly Challenge: Category of book (History, Fantasy, etc) and # of words/chapters from book
4.Each book have a group chat
5.Have to make an account
6.First 3 chapters free, keep reading anything to get points, buy more chapters
Part 4 – Wireframes
After the research and analysis phases, it is the time for wireframe. I began useing paper "storyboards"/wireframes of each page.
Clickable Wireframese
Part 5 – user testing & revisions
Once the interactive mock-up was complete in uxpin, I start several times user testing to see which process still confusing people and revisions these problems.
Questions
1. You want add your textbook at this device, download that book from cloud.
2. Your friends told you the Web Design With HTML by Jon Duckett is really popular and you should read it. Search that book.
3.You really like the first comment by Janus Varmarkenon, you want to know what other comments he did.
4.After check his page, follow him.
5.Before buying, you want read few free chapters. Check chapter 3
6.You like the second paragraph at the second page, highlight it.
7.After you read the free chapters, you want keep read chapters 4, use reading points to buy chapter 4.
8.After bought that chapter, you want know how many reading points you have left.
9.You already have Don't Make Me Think this book on your device. You want listening 30 minutes before sleep. Use Audio Setting to set up.
Results
1.Make size bigger
2.Make it more like iphone design
3.Change his name size
4.Change button to "Follow"
5.Change all buying option to one button
6.Make the instruction more clear
7.Make the point page more clear
Part 6 – Mockups
Invision Mockups
Part 7 – Process Videos
I did the Process videos based on user testing questions.
Part 8 – Final User Test Revisions
At the final user test, I did not encounter any major issues. Some people have a hard time to get the option bar. I think I need make the introduction for whole page so maybe people will read.