Labels

Application Design I / Project 3: Lo-fi Prototype

01/07/2024 - 29/08/2024 / Week 11 - Week 15
Iman binti Kamarudin / 0364014
Application Design I / Bachelors of Design (Hons) in Creative Media
Project 3: Lo-fi Prototype
INSTRUCTIONS


For the redesign, I wanted to stay mostly faithful to the current Wattpad app since it's navigation was mostly clear and easy for users according to the survey. I also didn't want it to be too drastic and different since, realistically, it would put off long-time users.

I designed the prototype according to Iphone 14 Pro Max dimensions. I started by creating the main pages (Home, Search, Library, Write and Account) and then went on from there like the sub-sections in each page.

Fig 1.1 - Splash Page & Login/Sign Up

Fig 1.2 - 5 Main Pages

Fig 1.3 - Sub-pages

Afterwards, I created all the pages for my usability testing which is the purchasing process, creating a new reading list process, book information and reading books, and getting a book to be suggested less in your feed. I also created frames for resetting your password but I didn't end up using it in my tests.

Fig 2.1 - Purchase Process Pages

Fig 2.2 - Save To Reading List, Book Description & Reading Book Pages


Fig 2.3 - Tap and Hold and Create New Reading List Pages

Fig 2.4 - Reset Password Process

After making all the frames, I went on to conduct my usability testing and then refined my prototype according to the the feedback. I also added horizontal scrolling for my carousels in the homepage.

Fig 2.5 - Homepage Layout

In the end, I ended up with 36 frames total.


USABILITY TESTING

The scenarios listed below are what I used to conduct my usability testing. Each participant was assigned one scenario. Afterwards, they would be free to browse the rest of the app and its features and give their feedbacks and suggestions on it.

1. Scenario: You’ve just recently downloaded Wattpad and want to try reading the paid stories. You go to the Wattpad shop and want to purchase a set of coins. Redeem a voucher and select credit card as your payment method

2. Scenario: You browse through books on the homepage and select one to view more information on. Then, add the book to your library. Afterwards, create a new reading list and add a user as a collaborator.

3. Scenario: You are a frequent reader who likes a specific genre of books. Log into Wattpad. Then, tap, hold and drag on a book to suggest it less on your feed. Afterwards, pick a book and read it.

Video 1 - User Testing Scenario 1

Video 2 - User Testing Scenario 2

Video 3 - User Testing Scenario 3


USER TESTING FEEDBACK

Scenario 1: I was a bit confused at first because I didn't know the app. I also didn't know that the shop was in the top left in the homepage. I thought the books with the 'Paid content' you had to click and buy there. Maybe can move to top right and add a label. The layout is pretty neat and simple and easy to familiarise yourself with. It's just the symbol for the shop, I didn't recognise it as a coin. The symbol could be a card, I mean maybe if its coloured the coin could look recognisable but a different symbol could also work. The purchase process and pages were straightforward.

Scenario 2: I think the scenario process is okay and quite simple to use. It wasn't really difficult and I feel like it's pretty easy to navigate. For me personally, I would prefer the notifications and activity feed to be together, instead of separated. The continue reading part is fine but  I would rather if you click on it, it would immediately open the page instead of the book information. The browsing part is okay and fine. I like the search page, it's very organised. The library is nice as well. The writing page is fine to me and looks straightforward, I don't have much to say on it. For your profile, I would rather you just have everything up until 'Your Works' and remove the reading lists to save space. The settings is good, I like how everything is categorised, makes it easier to navigate. It's not as cluttered as the actual Wattpad app, so this is good.

Scenario 3: Logging in takes me to the homepage which is good because I get to see my continue reading right at the top. There's also a browse section right below it so if I want to find something new I can. And then dragging to get the menu out, I imagine it works better and smoother on an actual phone compared to a computer/laptop. I like that there's also more than one option like 'Read', 'Suggest less' and 'Share' so if you accidentally do it you can just straight away read from there. I think everything seems to be faithful to the original Wattpad app except for the profile. I think they got rid of it or changed it, so I'm glad to see the account here (in the navigation). I like this new review feature because I like looking back at stuff that I've read or commented on so it's nice to have the history there. It's nice that the notifications is in the homepage because as a reader I don't really use the notifications tab that much so if its in the home its kinda out of the way.


UI Kit



Final Low Fidelity Prototype




Walkthrough




FEEDBACK

Week 11
Specific Feedback - The current design is straightforward and simple. However, it's essential to prepare at least 3 scenarios for usability testing where users must accomplish specific goals. All these steps and processes should be reflected in your wireframe. Please add a few more pages. Here are some feature suggestions for your consideration:

1. Organized Library: Allow users to categorize their books by genres, favourites, and recently read items (considering the existing reading history feature).
2. Highlighting and Notes: Enable users to highlight text passages and add personal notes.
3. Bookmarks: Implement a feature for users to bookmark pages and easily return to them.
4. Recommendations: Provide personalized book recommendations based on users' reading history.
5. Social Sharing: Allow users to share their favourite books and quotes on social media platforms.
6. Adjustable Brightness and Contrast: Include settings to modify screen brightness and contrast for improved readability.
7. Offline Access: Enable users to download books for offline reading.
8. Purchase or Subscription Options:** Integrate functionalities for users to purchase or subscribe to books, ensuring accessibility to both free and paid options.

Here are some scenario suggestions for usability testing:
1. Redeeming a Voucher and Accessing Exclusive Content
2. Purchasing and Reading a Book
3. Managing the Library and Tracking Reading Progress

These suggestions aim to inspire your design process. Incorporate your own ideas and insights while ensuring continuous improvement based on user feedback from Project 2.


Week 12
Specific Feedback - Make text size from 24 to 22 (Log In). Make tasks bigger. Search page make categories aligned in centre. Create 3 scenarios. 1 scenario, 1 user.


Week 13
Specific Feedback - Adjust your prototype according to the feedback. Refine and polish then create your high-fi prototype. Can follow YouTube tutorial for horizontal scrolling as well. Maybe change the 'Paid Content' to 'Pay to Read'. Put the coin/logo first in the top left and the notifications on the other side. Also make it slightly bigger/more prominent.


REFLECTION

My experience with this task was quite positive. It was tedious at times having to create multiple pages with slightly different options and linking each button together but overall I enjoyed this task, especially compared to the previous ones haha. 

Through this assignment I learned a lot about Figma and also different user interactions that you can play around with. It was really satisfying seeing all my research actually accumulate to something in the end. Though there's still a lot more I could learn, especially with the interactivity.
Labels:

Comments

Post a Comment

Popular Posts