Wireframing for Once Upon
Ironhack UX/UI Challenge #2
Dear audience, here comes my response to the second prework Challenge for Ironhack’s UX/UI bootcamp. First of all, I am going to present to you my app-choice and explain why I chose this app. Secondly I will guide you through my selected user flow. Thirdly you will see the task analysis of my user flow. After that I will present my wireframes to you and the Figma prototype. Have fun!
Once Upon — Photo books
While preparing all kinds of Christmas gifts for my friends and my family this year I used an app called Once Upon. This app helps users to create books with photographic memories about their lives. I already used this app before: Holding the actual printed copy in my hands was always a pleasure! The quality of the binding and the paper, the sleek and minimalist design of the book, its typography and page layout — all correspond with my taste. The process of putting the photos together and designing the pages in the app is user friendly, easy to follow and makes total sense to me. Overall it is a fine app and it delivers a high quality, beautiful haptic product that lasts!
User flow — How to add a new page to an existing book project?
What is the most important thing to do, when you want to design a book? Right, adding some pages :-). So this is why I decided to follow the user flow when adding a page to an existing book project. The typical user flow contains six steps and here you can see the screenshots for this user flow:
On the basis of my low-fi-prototype I’d like to guide you through the selected user flow:
- Screen_1: Select the project (book mock-up) you would like to continue working on.
- Screen_2: Go for the option of adding a new page and push the “new double page” button.
- Screen_3: Now you need to select photos for this double page. So therefore push the button “select pictures”
- Screen_4: If you are a new user you will be asked now to give your consent to the app using your photo library. Since I already gave that consent prior, in my case this step was skipped. Now you can proceed and select which photo library you would like to select pictures from (your own on your iphone or google pictures etc.) and you can start to select up to 6 photos for the double page by clicking on “select up to 6 pictures” .
- Screen_5: Each photo that you select will be marked with a little number (green; pictures you have already selected before in that project are marked with a little check) and displayed in a bigger dimension on top of the others, so you can double check if it is alright and you want to continue with it. Once you have selected the amount of photos you would like to have on your pages you can proceed by pushing on to “continue with (x) pictures”.
- Screen_6: Now you will see your selected photos in a suggested layout on the double page. From here on, you can either change the layout by clicking on “change layout” or you can “select more pictures” (if you have selected less than 6 or want to change the existing ones), you can also add a title and some text to the page. But in my case you are content with the layout and want to proceed to creating another double page. Therefore you click on “save the double page” and you will be redirected to Screen_2 where you can see all of your double pages that you have created for this book project so far.
- Now if you are ok with the amount of pages and everything else in this project you can return to the main page (Screen_1) by clicking the little back arrow in the left upper corner. From the main page you can continue with ordering/buying your book, getting other information, or creating another project by clicking on the button “creating a book” at the bottom of the screen.
Task analysis — Adding a new page to a book project in Once Upon
Let’s now work through an example to illustrate how you might undertake the goal of adding a new page with photos to a photo book with Once Upon using your iPhone, Tablet or other portable device.
Goal:
- Adding a new page with photos to an existing project in Once Upon
Subgoals:
1.1 Opening the app
1.2 Opening an existing book project
1.2.1 Creating a new page/double page
1.2.1.1 Adding pictures to the page
1.2.1.2 Adding a title/text to the page
1.2.1.3 Either keep or change the layout of the page
1.2.2 Saving the page to the current project
1.2.3 Closing the app
As part of a bigger goal — “creating a new photo book” in Once Upon — “adding a new page” to your project would be a redundant step until you have enough pages and would like to order the book. The next visualization shows the user flow of “adding a new page” in a bigger context:
While going through the steps and analyzing the flow of the goal (adding a new page) I could not discover any difficulties or redundant steps. The process seems sleek and clear to me and I could not find things I would like to change, make less complex or more convenient to use. So in my opinion this flow functions really well and is a well designed example of a user flow for such a subgoal.
Wireframes and Prototype
Here we are. These are the wireframes for my selected user flow inside the Once Upon app.
I used the size of an iPhone XR (414 x 896 px), because I am currently using such a device. As you can see there are many images in the app and consequently many image placeholders in my wireframes. I also left some room for the UI-designers to decide which shape the buttons will have therefore I only suggested their size and place on the interface.
Here is a closer look:
Let’s continue with the user flow…
Here is a short animation of the user flow and a link to my Figma prototype:
Conclusion
Overall I found that this was a fun challenge and I learned that I really like working on the task analysis and working with Figma. Since I am quite proficient in the Adobe programs it was quite easy for me to find my way around and use its features — there are many similarities in handling tools and shortcuts.
