UnivCam - Case Study & Design Process
Album & Image sorting application
UnivCam is an application for college students who want to sort and classify their albums and images in clean and intuitive way. I want to share my experience of this project’s case study and design process from start to publish on iOS App Store and Google Play Store.
Main Concept
We(Developers and I — Designer) started this project in June, 2017. The plan of very first step for this application was to design an application for college students to sort and classify albums and images that they taken in their college classes, in clean and intuitive way. Nowadays, lots of college students take a photo in their lectures to record or keep it in their smartphone to study and for their convenience. Image below is the research I had from Google Forms.
Ideation
The problem of existing gallery applications was simple. They also have albums, but their main purpose was not about ‘study’. We wanted to make our users only focusing on ‘study', no other pictures or images like daily photos and meme images in their local storage. We don’t wanted those images to jumble with ‘study-related’ images. We want to distinguish and classify them with UnivCam application.
Problems - from users
1. In class or lecture, screens of presentation are pass by so fast, so it’s hard to take notes or record about them
2. Taken photos in lecture are easy to shuffled with other daily images in one’s local storage due to lots of images and their small thumbnail.
3. It’s too hard to reorganize or sorting shuffled images between daily photos and images from lecture
Some screenshots of common college student’s gallery — It’s hard to distinguish between daily image and pictures from lecture and classroom
Design Challenge
It can be an ordinary album sorting application that is no different than usual gallery application currently available in the App Store / Google Play Store. If then, there is no reason to use UnivCam.
How to solve?
1. Provide widget on user’s home screen for quick-access to UnivCam’s camera(images captured with UnivCam automatically saved in UnivCam’s album, not in user’s local storage)
2. Design user experience optimized for organizing and sorting albums/images
3. Design user interface with using less color and less graphical components to make images from lecture more stand out
4. With #1, #2 and #3, make users to save their images from lecture to UnivCam, not their local storage
Start Off
Our main target is very clear. College students who want to sort and classify their ‘study-related’ images in clean and intuitive way. I created some persona of potential UnivCam user based in online researches and experiences of my friends who usually take photos on their college lectures. Here’s one of it.
Job Stories
I wrote some Job stories to regulate our service a better image recording tool for users who want to keep the contents from their lecture.
1 .When I’m in a classroom, I want to take pictures of the contents from lecture with my smartphone, So I can review them later anywhere with my smartphone.
2 .When my professor’s presentation pass by so fast, I want to capture it with my camera, So I can keep it in my smartphone to review it later.
3 .When I take pictures in my class, I want to classify them as I want to, So I can study with them more efficiently without interruption by other photos in my smartphone album like screenshots or daily pictures.
User Flows
I made a chart for User flow before I get started to make sure the plans and strong wireframe. The most important feature of this application is to divide local storage’s pictures and UnivCam’s Images, and making users to fully focus on those images — UnivCam, to have a great studying experience using smartphone. Sorting and classifying is basic, and making helpful functions like quick-taking photos on UnivCam, directly saving in UnivCam’s album to remove annoying steps — save it again from local storage to UnivCam.
Lo-Fi Sketches
I sketched some rough wireframe on paper before I getting started with Lo-Fi graphic wireframes. I decided to follow one of the most popular UI design trend nowadays — Complexion Reduction. Bold texts, less color, more white spaces. This concept fits for UnivCam application due to excluding decorative elements as can as possible, and as a result, user can fully concentrate on the main contents of UnivCam — Images and albums.
Wireframing
Based on the above sketches, I created a quick lo-fi concept wireframes. The main purpose for this step is user testing, so I didn’t spare much time for details. I used Marvel to test these wireframes on online for unspecified testers, and shared it on Facebook’s secret group. I created clickable prototype, and collected some feedback via Google Forms.
Pain Points
Based on collected feedback, I redesigned some features and screens. There were some critical pain points, and I’m going to explain them and tell you how I solved them. Images below are some of them.
Pain point 1 : There were unclear messages on ‘Album selecting’ screen, And that made users confuse to select an album on their purposes.
Pain point 2 : Users don’t know how to add folder. It takes usually more than 10 seconds to find the ‘Add album’ button for first-time users.
Pain point 3 : By clicking ‘Favorite’ button on ‘Favorite Album’ screen, It looks like clicked album get removed from the application. And ‘Add Album’ button on ‘Favorite Album’ screen makes users confused — ‘Does this button makes favorite new album, or just new album on main screen?’
Validation
With revised design above, I had one more user testing with the same users. The table below is result of redesigned wireframe’s user testing. If user can perform specific mission without struggle, I recorded it as ‘succeeded’.
With revised design above, I had one more user testing with the same users. The table below is result of redesigned wireframe’s user testing. If user can perform specific mission without struggle, I recorded it as ‘succeeded’.
Share Details and Todos
I used Trello to share my tasks and details of design with developers. After I design each screens, I post them on Design board and let developers know what to do with details. I used 2 boards for design part, one for design descriptions and one for Todo lists. On Todo board, I only post rough designs there and developers move them with their progress status.
Hi-Fi Prototype Design
With sketches and wireframes, I designed this Hi-fi prototypes on Adobe Photoshop. In this step, I used Zeplin and it’s plug-in on Photoshop and integrated it on UnivCam’s Slack channel to co-working with developers. We shared our working status and steps each by each on Trello and Slack.
User Testing with Prototypes
Pain point 4: I had user tests for several more times with the prototypes above. One of the biggest problem on this test was about Tab-bar on Album detail screen. User was not able to distinguish photo that taken on this screen will be saved on which album. So I removed Tab-bar on this screen, and added Camera button on top navigation bar on this screen.
Clickable Mockups - Adobe XD
Based on Hi-Fi prototypes above, I created clickable mockups with Adobe XD(Experience Design) for next user testing and developers. I really like this prototyping tool because of the visible user flows with blue line on the image below. I made more detailed mockups with Marvel app on next step.
Sample Prototype
UnivCam
I designed this application with my college application circle’s developers during Summer vacation, and Hope to help many college students by this application. You can download UnivCam on Google Play Store and iOS App Store soon, I’ll note below after this application registered on the store.
Thanks for reading my article. If you want to contact me, visit my LinkedIn or just send me an Email to ghsspower@naver.com. For more UI/UX design that I’ve worked, visit my portfolio or Behance. Hope you enjoyed my article!
Click here to watch source files on GitHub (iOS)
Click here to watch source files on GitHub (Android)
Click here to watch source files on GitHub (Android)
Featured on Muzli blog
Watch full design of UnivCam on Behance
Read this article on Medium // my portfolio
