UX Updates

After a few weeks of feedback, I think it’s become increasingly clear to me that as I’m pitching Suckers as a UX design project, I need to do a much better job of explaining the much larger context behind it. Ultimately, it is important to note that I plan on continuing with Suckers as my capstone project, and as such have found a way to incorporate the project into many of my classes (from Interactive Docs, to Programmatic Design Systems, and even UX design). However, I think that because I can see the project so vividly, it has been hard for me to grasp what exactly it is that people don’t understand about my project from a UX perspective.

Because I think I’ve got a pretty solid visual aesthetic, and I’m pretty happy with the visual direction of the project, I’ve decided that in this final week I really need to focus on honing my original user story, but making a much higher fidelity version that can be adapted for further promotional material (think, game-play trailer). I’ve begun to write out an updated user story that attempts to really hammer home the essential details about this project, that it is:

  • Location Based
  • Low-Fidelity VR
  • About Vampires

As a side note, though also relevant when it comes to our impending poster deadline, because I’ve also focused on this project for Programmatic Design Systems, I think it’s important to note the crossover that this while have within my UX design! Essentially, I’m in the midst of creating an adaptive load screen that changes depending on what level the user has selected; however, in addition to that nifty feature, I’ve begun to devise a guerilla marketing plan that will incorporate the location-specific loading screens into mini, metro card sized “posters.” Here’s a rough, rough, rough draft that begins to show the early stages of the idea.



My first attempt to map my insulin pump’s interface. Also, as I was mapping it I found some other problems I have with this interface. There is only one button to click and there is no option to go back to the previous function if you accidentally click it too many times and you have to exit and start clicking again. I just remembered how much this always annoyed me so in the app I would like to have a swiping function that allows the user to go back to the previous function. There should always be a back button at every page.


The two pictures illustrate the possible functions when the pump is stopped and when it is not. Some is available only in one case, the once that need the pump to be turned on ( bolus) and the once that need it to be turned off( for example filling in the patron). The next step is to choose the ones I use all the time, the ones I rarely choose and there are some that I never touched and find it unnecessary.

testing wireframe

The whole week I was trying to reach the only real diabetic person that is my friend on facebook, but she seemed busy. I hope I can still do a testing with her later on until that I did it with my friend here describing the whole situation.


  1. log in
  2. set standard bolus to 5
  3. set temporary basal rate to 150test2

Suckers Visual Design

Over the break, I spent a pretty significant amount of time brainstorming my actual first draft of the visual design of the project. I found my main inspiration came from Vaporwave music and the accompanying visual aesthetic that normally accompanies it. I found myself using bright, desaturated baby blues and pinks and trying to loosely mimic the Windows 95 UI in a similar fashion as IACON did for the Nightwave Plaza app. I think overall combining that look with the more modern “flat” UI trend currently running the streets, I found something minimalistic enough to pass by most standards, but still seems unique enough that I know I’ll some day soon be fine with adding it to my portfolio. The one this I think I really need to nail down now is some sort of consistency between buttons in the actual viewer, as well as finding some good VR Sketch tools to make the mockup look more similar to how it really will appear in the phone.

Here the demo of my app can be found, and here my mood board can be found.

Week3: Wireframe of Lazy Diary(Updating)


My wireframe is base on the user flow diagram I did a few days ago. There were three parts in the user flow: one is past, where user can see previous diary, audio log, and comics generated; second is present, where user can make a new diary or audio entry, and a comics will be generated based on the entry; the last is future, where user can write a letter to himself/herself and make a simple to-do list. I sketched the interface roughly. You can find them below. However, after talking to Azure, I decided to delete the future part, because it went too far from my basic idea: generate comics from a diary. Therefore, in the wireframe, I only preserve “past” and “present”.

Then I started sketching my wireframe. During the process, I found it quite different from drawing the user flow. I needed consider so many details, such as the position of a segment, the grid, the exit button. Moreover, when I added a new button, several interfaces needed to be added. When adding one new function, a UX designer needs to consider a lot of thing.

You can get a general idea of my wireframe through this screen recording: ScreenRecording_09-26-2017-0020. For now, I haven’t create the user flow for the “setting” menu yet, Hopefully, I will finish all the wireframe and link all the pages properly after the national holiday.

Before the National Holiday, I interviewed several students, two freshmen, 1 sophomore, 1 Junior,  2 seniors and 1 staff (who is about 4 years older than me). Following are the pictures of my notes (in Chinese though).

The interviewees gave me several useful suggestions:

  1. The name of the APP need to be clear enough to tell the user that it is an APP generate comics based on your diary entry.
  2. The theme color of the app should be a warm an healing, instead of black and white. since it is an diary app in which people will express their negative feelings, using black and white may make them feel more upset. However, since different people have different taste, user can choose the theme color based on their preference.
  3. The section on the home page need to be refined. It is should to based on a timeline, instead of simply using present and past.
  4. The ‘adding a new entry’ button is not clear enough.
  5. User do not see that they need to input the weather and their mood before they make an new entry.
  6. There should be loading bar when generating the comics so that the users can know how long they need to wait. Moreover, it should be clear on the editing page that the next step will be generating the comics.
  7. About the voice input, it can be a short voice memo about 1-2 minutes long which can be inserted into the diary entry.
  8. Before generating the comics, let the user choose what kind of comics they want. There can be preview of what the comics will be like of each kind of comics. What’s more, user can choose they want the comics in black and white or in color.
  9. When a user is reading the comics, the gesture they use shouldn’t be scroll up and down but left and right.
  10. If the comics can be combined with the diary entry and the voice input somehow, it would be great.

Based on these suggestions, I refined my wireframe. You can see the screen recording here (There is some link errors).

Maybe I will be another user test to see how the refined versions works.





Here is a base draft of my Wireframe prototype. I didn’t want to include a ton of features, because I’m still on the edge about one of my personas (I’m thinking about switching the casual gamer for an urban explorer), so I wanted to focus on the base-base-base level interactions required for my app. When I got to work in sketch, I realized that when thought of like this, my app is actually pretty simple! It’s essentially just a 360º video viewer with QR code functionality. I like this simplicity, and I think I’ll stick to something this simple in the mean time.  https://invis.io/G9DNN2VM5

Sketch of App by Máté Mohos

Here are the sketches I made for my project:


My two characters I sketched up based on the two surveys I have conducted (I had problems with the website, sorry):


  1. Ryan

21-year-old college student from Southern California. He is a Music and Technology major, his work mostly involves coding and making digital music. He is frequently coming up with new songs, some of which have beats designed by him based on the algorythms he coded. Therefore, his protfolio is vast and consists of many elements, some audio, some coding-based. He has to update both his portfolio and CV rather often, because he is taking many internships and making new projects. He wishes for a space where he could do these both as fast as possible, because right now he has trouble keeping both his GitHub and LinkedIn profiles up to date, because he is so busy.

2. Sunshine

22-year-old college student from China, living in the USA. She is always looking for internships, but especially now she has trouble getting her head around the game. She finds the internship faire in college too crowded and unreliable, and reaching out to companies on her own is not a trustworthy method. She is tired of sending different emails with attached PDFs as her resumes, and pieces of her portfolio which is now quite unorganized in Google Drive. She wishes for a platform where companies interested in hiring university students could easily find all the neccessary data about her and could reach out.