UnivCam - Case Study & Design Process

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.

UnivCam Icon

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.

Research I had from Google Forms
Research I had from Google Forms


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 daily 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 was 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.

User flow

User flows - Click image to enlarge

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.

Lo-Fi Sketches
Lo-fi sketches - Click image to enlarge


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 MarvelApp 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. (Click image to enlarge )

Pain point 1 : There were unclear messages on ‘Album selecting’ screen, And that made users confuse to select an album on their purposes.

Select Folder

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.

Add a new album

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?’

Favorite albums screen


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 any 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. (Click image to enlarge )

Final output
Final output
Final output
Final output
Final output

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.

User Testing 4
Click image to enlarge

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 MarvelApp on next step.

Adobe XD

Completed UI Design

You can see more details about UnivCam’s design on my Behance.



Play with Prototype

Clickable prototype is also available on MarvelApp


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 UX/UI design that I’ve worked, visit my Behance. Hope you enjoyed my article!

Click here to watch source files on GitHub (iOS)
Click here to watch source files on GitHub (Android)

Featured on Muzli blog:
TOP 10 Most Interesting UX Design Case Studies To Inspire Your Service Reinvention In 2018


UnivCam - Case Study & Design Process
Click here to watch on Medium
Click here to watch full design on Behance
Clickable prototype is available on MarvelApp

Featured on Muzli blog:
TOP 10 Most Interesting UX Design Case Studies To Inspire Your Service Reinvention In 2018

Title : UnivCam - Case Study & Design Process
Date : August 11, 2017 (12 Weeks)
Tools : Adobe XD, Adobe Photoshop, Adobe Illustrator, MarvelApp, Trello, Zeplin
Designer : Hyouk Seo (Spemer)
Developer : Seunghyeon Kim, Chaeeun Lee, Junyoung Jo, Junsang Lee, Youngmun Jo