
Earn big, play hard!
Conversion or creativity? Why not both!
As a motion designer, I craft captivating 2D and 3D visual designs that help businesses elevate their sales and engage their customers with fun.
Connect with me:


Where it began...
My idea about this app came thinking about a drawer in my parents’ house, which contains probably more than a thousand old photos, which I would like to scan them in digital form in order to be able to sort them and keep them for the time being, without worrying to lose them someday, as well as to be able to share them easily with friends and family.
People may want to use their mobile phone camera to scan their old photos, or other different cameras or scanners. However, it can cost a lot of time and effort: for example, you will still need to crop and straighten all the photos, adjust them, and sort them in different albums.
MemoryPin is a mobile app to solve these inconveniences by enabling fast scanning, automatically cropping the frames and archiving without hassle. By minimizing, optimising, and automating operations such as cropping, using the app will allow the users to deal with a large number of photos with way less effort than using other scanning methods. Users are also able to create albums immediately and to archive them easily into local or cloud storage services such as Dropbox.
I began researching interviewing a few people. The first interview was with a 79 years old German man. He is suspicious about new apps with sharing functionalities linking to social media: he only uses emails to share the photos he takes with his family and friends. He has a digital camera, a smartphone, but doesn't use Instagram, Twitter, Facebook, WhatsApp.
The second interview was with a 36 years old woman from Taiwan working as a journalist in Berlin. She doesn't have many photos from old times, because her family is not a fan of taking many pictures, and because her family moved home three or four times so they ended up losing many photos. The thing she would care the most is the scan quality that can be obtained by a smartphone.
Finally, I interviewed a friend, who is very a very active Instagram user and uses several social media applications, creating and remixing images using several kinds of media.
Empathise & Define
Solution
Problems
-
Persona


The sketch of the app used to communicate with interviewees to explore their needs / Empathy Map

-
Customer journey map
I designed a customer journey map to predict how the user will experience the touchpoints of this digital service and his emotions, according to their personality, as well as to discover the pain points and have an opportunity to solve more potential problems.

-
Storyboard
The problem, and the solution, illustrated by some of my characters...

Ideation
Based on what I got from the empathy phase, I continued to explore deeper and develop more of the possibilities of my MemoryPin app.

In this sketch, I used the SCAMPER method. I asked myself many questions, such as if I could substitute or combine some of the features or if some features could be put in another use.
Could I reverse it? (It made me think about re-printing the photos into albums designed by the users).
How can I maximise the number of users?
(I came up with the idea of collaboratively editing and designing albums).
Also in this phase, it occurred to me that several features should be designed both for novice and experienced users, which have different needs.
-
Questionnaire
To discover which ones are the real needs I also created a questionnaire using Google Forms. At the moment I collected only a small number of answers (about 10) but it will be a further reference to evaluate the importance of the features to develop. At the moment, it revealed that many users would be concerned about the quality of the scanning and cropping, which is a technical issue. But we can also see the desire of a social media sharing feature. I will keep collecting more answers to further refine the perceived features relevance.

I decided to focus on two user flows, which are illustrated in the following image. The one on the left one is about scanning and archiving efficiently; the one on the right is for the more interactive feature of designing a custom album and slideshow using the scanned photos. Because the questionnaire showed people don't have a great interest in the album creation feature, I developed further only the scan/archive flow.

Prototype
-
Sketch
The following is the sketch I designed to develop the app's scan/archive feature.

-
Lo-fi Prototype
I used Balsamiq to do the low-fidelity wireframes, I am always excited to learn new software by myself. I hadn’t made an entire process of it yet, instead, I focused on the solutions for the needs of the user. Let me explain those steps:
Step 1: Start
For the first time users, there is a tutorial after the welcome page, but the app will be designed to enable the first-time users to use it directly without watching the tutorial!
The tutorial will be only 3 pages, (1) scan (2) save (3) share and fun features
For non-first-time users, they can choose not to show the tutorial again, under the ‘skip’ button.
Then the page will show directly the camera, a frame sensor will detect the frame automatically. When it detected the square/rectangle (the yellow frame), it will notify the user to press the scan button.

Step 2: (skippable for speeding)
The users have the option if they want to adjust the photo/edit information.
Cancel button enables them to return to the previous step if they just click to edit information or adjust but regret in the next second.

Step 3: Save to albums
In this phrase, I have 3 solutions for 3 different purposes:
(1) first-time user (2) fast–only 1 clicks (3) efficient filing.
After saving it returns to the scan/camera page very soon. But there is still 1-1.5 secs time to have options to view the albums (“scan more” icon is the default, users can also click if they don’t want to wait 1-1.5 secs.) and share it.
*The setting of (2) and (3) can be changed easily at setting. (2) is the default.
*The duration of the postpone should be researched soon.
(1) first-time user. After click either icons, the panel will show up and the keyboard with also show up in the meanwhile, so users don’t need to have another click( quick!) in order to name the first album. While done with the name, users see “where” to store their photos. (icloud, dropbox, google drive, or local storage). After connected with the account, it turns back and saves automatically.

(2) fast & more–only 1 click
After scanning, click the confirm button, the photo will be saved in the previous saved album, then return to the scan page for another photo!
HOWEVER, sometimes users may like to save in another album!
I considered with 2 solutions. I chose solution 2 finally. The 1st one, has more information, “I want to save in another album!” and a dropdown menu of albums. But finally the 2 solutions have the same click time, one click more and one more for choosing another album. So why not just use a simpler solution?
So, after click “I want to save in another album!” it will turn to the screen of album list in the next figure.

(3) efficient filing
After click icon 2 (save as…), users will be shown the album list (title: Save in…)
Click the album and it will be saved automatically.

Reflections
It is my personal motivation work for learning and practicing more about UX design and it is still ongoing! I enjoyed the process most of the time, and there are still many issues to explore and develop solutions. Due to time limitation, I focused more on the efficiency of scanning and filing. But I learnt a lot of the design-thinking process, which is not a linear flow but it is iterating and reflective. I would like to create some UI and graphic design and will do more user-testing when I finished my high-fidelity prototype.
Please feel free to contact me if you have any thoughts and I appreciate constructive criticisms to make me learn and grow in this field!