Page 1

Design

Process

SIMON LIWAG DESIGN 300.01 SUMMER 2019 INSTRUCTOR Heidi Dunkelgod


Design Process SIMON LIWAG DESIGN 300.01 SUMMER 2019 INSTRUCTOR HEIDI DUNKELGOD


Table of Contents

2 3-4 5-31

32-71


Introduction Table of Contents Adult Pop-up Book Introduction.....................................................................................................................6 Process Diagram............................................................................................................8 Brainstorm - Mind Map.............................................................................................10 Photo Collection..........................................................................................................12 Concept Selection.......................................................................................................14 Design Audit..................................................................................................................18 Iterative Prototype I..................................................................................................20 Iterative Prototype II ................................................................................................22 Final Pop-Up Book Design.......................................................................................24

SF 311 App Redesign

Introduction...................................................................................................................32 Process Diagram..........................................................................................................34 Competitive Testing....................................................................................................36 Heuristic Evaluation..................................................................................................38 Photo Study....................................................................................................................40 Project Direction, Scope and Limitations...........................................................46 Ideations - Competitive Testing II and Navigation Flow Diagram...........48 Low Fidelity Annotated Wireframe Sketches..................................................49 User Flow Chart...........................................................................................................50 Application Mood Board..........................................................................................51 Application Assets......................................................................................................52 Iteration I........................................................................................................................54 Iteration II.......................................................................................................................58 Final Design...................................................................................................................62


6 Simon Liwag / Design Process 2019


Adult Pop-Up Book “Press Play”

Adult Pop Up Book / “Press Play” 7


Process Pop-Up Book Diagram Brainstorm

Concept Collection

Mind Map

Choose a Theme

Start The Project Final Design

8 Simon Liwag / Design Process 2019


Ideation Field Research

Design Audit

Photo Collection

Iterative Prototyping II

Pop-up Construction

Iterative Prototyping I

Iteration Adult Pop Up Book / “Press Play” 9


Brainstorm

Brainstorming / Music Mind Map & Pop-Up Ideas

10 Simon Liwag / Design Process 2019


Brainstorming is the first stage in this pop up book project. I decided that I wanted music as the central theme of what my pop up book is going to focus on. After narrowing down my options, I started brainstorming possible pop-up ideas that relate to music. More pop-up ideas came to me as I undergo the field research / photo collection part of the project.

Adult Pop Up Book / “Press Play� 11


Photo Collection

My photo collection consists of photos taken of past concert and music festival experiences. I’ve been to plenty of shows some of which I traveled very far for. I love everything about it especially enjoying it with friends and making memories. Listening and enjoying music will always be one of my favorite things.

12 Simon Liwag / Design Process 2019


Adult Pop Up Book / “Press Play” 13


14 Simon Liwag / Design Process 2019


Adult Pop Up Book / “Press Play” 15


Concept Selection Early on I’ve decided that I wanted to make my scene to have something to do with music. Music is an every day thing for me. The first thing I do when I wake up in the morning is listen to music to get me started for the day. As an avid concert and music festival attendee I’ve decided to make my scenes about many of my experiences at a show. Fully immersed in the music, singing and dancing along to what’s playing live in front of me. The title “Press Play” is inspired by the first thing you do to listen to music, you press ‘Play’.

16 Simon Liwag / Design Process 2019


Adult Pop Up Book / “Press Play” 17


Design Audit The purpose of conducting the design audit is to research on techniques to make different varieties of pop-ups that I can apply to my own book. One of the pop up technique I used is called a “waterfall” pop-up. Other techniques that I used are called the “V-Folds” and pop-up flowers. There are a multitude of sources online and videos that gave me inspiration which I then applied to my book.

18 Simon Liwag / Design Process 2019


Adult Pop Up Book / “Press Play” 19


Iterative Prototype I This is the first iteration of the pop-up book design. Early in the process I wanted to keep my book’s dimensions around 8.5 x 11� which is the standard A4 paper size. This changed later on in the second iterative prototype. The yellow sticky note is what I plan to have to on what I wanted each of the pages.

20 Simon Liwag / Design Process 2019


Adult Pop Up Book / “Press Play” 21


Iterative Prototype II

22 Simon Liwag / Design Process 2019


For this iteration, I’ve changed the dimensions of the book again. This choice ultimately changes as some of my pop-ups doesn’t work well with the new size. I’ve applied some of the pop-up practices that I’ve learned through my design audit to the second iteration. This gave me a better idea on how to apply and perfect the techniques for the final version.

Adult Pop Up Book / “Press Play” 23


Final Design

“Press Play” 24 Simon Liwag / Design Process 2019


In this final design, I reverted back to my original dimension for the book which is 8.5 x 11”. The title of the book represents the first thing you do when you listen to music which is pressing play! It’s a fitting title for my book. The cover features a CD on a flat black piece of heavy card stock. The first page is an interpretation of a sound wave. The photo behind it is of a band playing music. I wanted the cut out to represent where the sound is coming from.

Adult Pop Up Book / “Press Play” 25


The second page is the “Coachella” page. I’ve attended it four times now always enjoyed it. This page features flower pop-ups and the background spread is made up an old line-up set times pamphlet. 26 Simon Liwag / Design Process 2019


This page features a photo of an art installation at the Coachella Valley Music and Arts Festival. The page is of the butterfly during the day. The pop-up features the butterfly in it’s evening setting.

Adult Pop Up Book / “Press Play” 27


This page doesn’t feature any pop-up mechanics. I put this page in because this day holds a lot of memories for me. It was taken during an Excision show at the San Francisco Bill Graham Auditorium. Overall, I had a really memorable time attending this rave and it’s an event I’ll remember for a long time...

28 Simon Liwag / Design Process 2019


This is the center spread of the book. It is supposed to make you feel like you are watching a show! The visuals and the middle of the stage are popped up. The things on the sides are the lasers in full effect.

Adult Pop Up Book / “Press Play� 29


This page features a flat black & white photograph of the San Francisco band, “No Right� preforming one of their songs. I added a green translucent sheet to give the page color! You can pull it back to reveal the whole image.

30 Simon Liwag / Design Process 2019


This is the last page of the book. My favorite part of it is the ticket wheel carousel which is activated by pulling down on the tab. The CD on the next page is a mix tape CD of my current favorite songs that you can take out and listen to.

Adult Pop Up Book / “Press Play� 31


32 Simon Liwag / Design Process 2019


SF 311 App Redesign

SF 311 App Redesign 33


Process SF 311 App Diagram Pros & Cons

Research

SF 311 App Redesign

34 Simon Liwag / Design Process 2019

Competitive Design Audit

Final Design

Field Research

Test drive the app

Color Skins Iteration II


Ideation UxD Research

Competitive Testing

Heuristic Evaluation

Color Skins Iteration I

Lo-Fi Computerized Wireframes

Lo-Fi Wireframes Annotated

Aesthetics Research Photo Study

Flow Diagram

Project Direction

Scope & Limitations

Iteration SF 311 App Redesign 35


UxD Research:

Competitive Testing NYC 311 The NYC 311 app is what I chose to do my competitive testing on. This app contains a lot of features that I adopted into my SF 311 redesign. Overall, the app layout is very simple and clean. Color choice is very eye catching and the app is very user friendly.

2. Startup Starting up the app, it takes you to the “Today� tab. Yellow color scheme to get a sense of the sea of yellow taxis in New York

1. Loading/Splash Screen Attention to detail, big and bold font. Good color choice Medium Gray/Yellow/Black

3. Requests Made Easy Requests are labeled with an image representing the request. 36 Simon Liwag / Design Process 2019

4. NYC Real Time Alerts The city posts and notifies us on real-time traffic delays and other city advisories.


5. Informative Alerts Briefly explains the who, what, when and other information on the alert. It’s very detailed and it also offers plenty of translations.

6. Contact with NYPD Some of the options on the ‘Request’ list are sent directly to NYPD. This helps prevent spam and other useless requests.

7. No Settings The settings only allow you to set your basic information. Also inside the settings tab, you can see redirects and more information about 311.

8. Request Example Pothole request example shows you the many details you need upon reporting a pothole on the street.

9. Dated Alerts In-App Calendar lists about Parking, School and the Garbage schedule. Highlights today’s date in red.

8. Keep Track of Requests You’ll see the request ticket number and the status of requests here.

SF 311 App Redesign 37


UxD Research:

Heuristic Evaluation SF 311 The San Francisco 311 app is the app we were assigned to redesign. This app needed a lot of improvements. I’ve noted plenty of ideas in order to improve this app and make it stand out better than it does right now. Overall, the SF 311 app gets the job done for many users.

2. Multiple Request Options Making a request is easy with plenty of categories to choose from. No search bar. Some items are hidden in sub-categories.

1. Main Screen Easy to read icons. Very dull blue color scheme. Nice silhouette of San Francisco’s Skyline. It adds character to the simple main screen. Notifications appear on the bottom of the screen.

38 Simon Liwag / Design Process 2019

3. What’s Happening Now? This pages shows reported requests around SF. Quality of reports may vary but it updates frequently.

4. Map View of Requests This app provides a pin-pointed location for each of the requests listed. It also informs you of your own location.


5. Image Wall The app features a photo feed of requests made on the app. You can browse at what other people are posting in your area.

6. Request Sample This shows the description and photo of the request. The ticket number is on the top banner and the status is on the bottom of the details.

7. My Requests This section shows you the status of the requests that you’ve made. The requests status are color coordinated and time stamped.

8. Request Example Making a request is very easy. You take a photo and describe the nature of the request and then hit submit.

9. Valuable Information This page lists advisories that are currently going on in SF. When you click one, you’ll get more information.

10. More Advisories This page duplicates the items on the information page. SF 311 App Redesign 39


Aesthetics Research

40 Simon Liwag / Design Process 2019

Photo Study San Francisco

For the aesthetics research of this project, our goal is to capture photos that depicts San Francisco without it being cliche. Most of my photos are taken while exploring downtown SF. Other places include my area of residence which is the Bernal Heights district.


Downtown San Francisco never ceases to amaze me. There is always something going on in the city. The city has many things to offer.

SF 311 App Redesign 41


The city’s architecture is really one of a kind. The buildings vary from old to new buildings. The city is always changing it is hard to keep up sometimes!

42 Simon Liwag / Design Process 2019


I was roaming the city all throughout the day capturing photos. Through this research, I’ve came across new places in the city.

SF 311 App Redesign 43


San Francisco is also known for their parks! My favorite park is Mission Dolores Park.

44 Simon Liwag / Design Process 2019


These are photos I took around my neighborhood of Bernal Heights.

SF 311 App Redesign 45


Project Direction Sf 311 App Redesign Project Direction Home Screen

The home screen is the first screen you see when you open up the app. This page is important but it currently only has a couple options with dull icons. The layout is user friendly and easy to navigate and I should take this into consideration when redesigning the app. Why make a new iteration more complicated? I plan on implementing a loading screen that will show when the app is loading up. Because the home screen is the most important screen on the app, I plan on integrating a more appealing UI (User Interface) by adding more color. I want to add a navigation bar instead of the default dull icons. I also plan on removing the ‘Alerts’ option as the contents is repeated in the ‘Information’ option. Another improvement I’m adding is a carousel of images that changes overtime. These images will be of my own photos and will represent San Francisco.

given request. I plan on integrating a way to group or categorize the different SF districts that way you can choose to see what’s happening in all of SF, in certain neighborhoods, or around you. There are too many requests happening on one screen; I want to limit it and also change the ‘Status’ of the requests to a simple color coordinated dot. Upon clicking a request, I want to add the ticket number in the description as well and change the font and sizing of the photo since there’s a lot of dead space.

User

This screen holds your contact information such as your first & last name, e-mail and phone number. The current screen is very basic with 4 text boxes to input information. Although it’s important to have contact information when submitting reports, this page is very lack luster and doesn’t even give you the option to register an account. I plan on integrating a profile system where you can see your New Request favorite requests and the requests you’ve made in This is another most frequent used page as it is used a grid. Although staying anonymous is an option, I for what the app is designed to do. Currently, the also want to add a way to register an account page works just as it should but I feel like it can get instead of having to find the log in which is currently better. There are plenty of options for users to choose under ‘Information’. from. The options are also split into categories, which are in bold and all caps. I plan on adding suitable icons Information to the many options on the ‘Choose Service’ list. I’m The ‘information page’ holds valuable information also integrating a search bar that way it’ll be easier to such as current and ongoing advisories and a list of submit a request. I also plan on redesigning the page most requested information in California and San where you submit a request. Francisco. Upon clicking one of the advisories, you can see a dated memo about it explaining what it’s Recent all about. The ‘Most Requested Information’ is also The recent page is where you can see the multitude of helpful to the user and it has plenty of categories. requests around you. It has 3 options on viewing the Instead of having an In-App browser for the web recent requests: List mode, Map mode, and Photos. page that the ‘Information’ tab displays, I plan on This page is important because it shows users what’s redesigning the UI. Instead of having a list of needed to be fixed/picked up/etc. This page is also everything, I want this page to have split tabs of useful because it color coordinates the status of the ‘Advisories’ and ‘Most Requested Information’. 46 Simon Liwag / Design Process 2019


Scope

Scope & Limitations

I started out by doing UxD Research in competitive testing with the NY 311 app. I took down notes on the pros and cons on the features of the app. I used what I liked/disliked about the NY 311 app and applied the changes to the SF 311 app. I also did a heuristic evaluation on the SF 311 app and took down notes on what I can further improve on the app and things I wanted to remove all together. The research also includes peer responses of other 311 apps of their choice. This project includes sketches of low-fidelity wireframes and color skin iterations before the final design.

Limitations

Due to time restraints, I will not be able to do a full app redesign. I have chosen to only work on the following screens: Home Screen, New Request screen, Recent Request screen and the Information Screen. I am able to work on a Loading screen for the app as well as a Sidebar or “Hamburger� menu. I am also not making a fully working prototype of the app, simply just redesigning the UI as a concept design.

SF 311 App Redesign 47


Ideation

Competitive Testing II This part of the process is where we compared our competitive testing with our fellow colleagues in the class. The purpose of this is to create a flow chart and to discuss on certain features of other 311 applications. This research is important because it gave me inspiration on what to add to my app redesign. 48 Simon Liwag / Design Process 2019


Lo-Fi Wireframes

Annotated Wireframe Sketches I wanted to redesign the app with more functionality. I’ve annotated the things I wanted on the side. One of the things I did was add a sidebar or a “hamburger” menu at the top left of the screen. Another thing I added is a ‘Loading Screen’ that shows up when you start the app. I’ve also created a new logo for the SF 311 app but kept the name of it the same. I’ve also implemented a navigation bar.

The main screen gets a full refresh compared to the original app. The new request page now features icons on each of the choices and a search bar at the top. The recent request page now has a static map of where you are currently located by using your phone’s GPS system. The User page now features a photo wall of requests the user has made. The information page is kept simple SF 311 App Redesign 49


Flow Chart Loading/Splash Screen

Sidebar Menu

50 Simon Liwag / Design Process 2019

Main / Home Screen

New Request Screen


Information Screen

Recent Request Screen

User Screen

SF 311 App Redesign 51


App Mood Board

52 Simon Liwag / Design Process 2019


App Assets

SF 311 App Redesign 53


Iteration I

Loading Screen I wanted to add a loading screen when you open up the app. This will make the app more appealing! The logo will be there in the middle, the background will be photos of San Francisco that changes every time you open up the app. Logo is designed by me.

Loading Screen 54 Simon Liwag / Design Process 2019


Main Screen

Sidebar Menu

Main Screen

Sidebar Menu

This is the first iteration of the main screen for the app. I wanted to have an informative interface with traffic, BART, and MUNI information! Current temperature and weather is also implemented. Another thing that was added is the sidebar menu and a static navigation bar that you will see on most screens of the app.

I wanted to add a sidebar for easy navigation throughout the app. It’s accessed by tapping on the “hamburger” icon. The icon is present on most of the screens. This is a useful tool to get a lot of information quicker without having to navigate back to the home menu. SF 311 App Redesign 55


Iteration I New Request Recent Requests

New Request

Recent Requests

This screen is one of the most important screens as this is what the app is intended for. I’ve implemented icons to separate each of the requests options. I’ve also added a search bar at the top for faster navigation through this screen. Upon submitting a request, you are greeted with a confirmation and a “Thank You!”

The recent request screen now features a static map of your current location at the top portion of the screen. You can scroll through recent requests made in your neighborhood along with the status, timestamp and how close or far you are to the request. You can also filter through the requests.

56 Simon Liwag / Design Process 2019


User

Information

User

Information

The user screen gets a full UI update as opposed to the 4 boxes you put your name and contact information in on the original SF 311 App. This features a profile system and a photo wall of the requests you’ve made with the status of the request indicated with a colored dot.

The Information screen now features a search bar at the top. It also gives you information on current advisories going on in the city as well as information on the MUNI bus times, holiday parking meter enforcement and events planned or currently going on. SF 311 App Redesign 57


Iteration II

Loading Screen I’ve added color to the app icon. Images on the loading screen will change every time you open the app.

Loading Screen 58 Simon Liwag / Design Process 2019


Main Screen

Sidebar Menu

Main Screen

Sidebar Menu

The image you see at the top will change every 10 seconds as long as you stay on this page. I’ve added a background to the text box of Alerts and Traffic information

The sidebar menu now has icons corresponding to their titles. This makes the app easier to use and easier to locate things.

SF 311 App Redesign 59


Iteration II New Request Recent Requests

New Request Icons are now put into place and represents the requests category. The search bar at the top has the words “Search” in orange to fit the color scheme of the app.

60 Simon Liwag / Design Process 2019

Recent Requests I’ve added the colors for the status indicators and colored the text of the neighborhood you’re currently in to orange.


User

Information

User

Information

You now can see the photo wall of requests you’ve made and it’s status. Upon tapping one, you go to the request page and you are able to record the ticket number and see the photo and description of the request.

Nothing much has changed here besides the banner color being orange. I plan on color coordinating the subheaders and colorizing the search bar text to orange.

SF 311 App Redesign 61


62 Simon Liwag / Design Process 2019


Final Design Sf 311 App The purpose of this app redesign is to make it more user friendly and more appealing for the user. I’ve added plenty of features in my final design that will encourage the user to use the SF 311 app frequently. I’ve designed it to be able to navigate throughout the app with ease.

SF 311 App Redesign 63


Final Design

Welcome to the new and improved SF 311 App!

Loading screen features multiple pictures of San Francisco that changes every time you open the app welcoming the users.

64 Simon Liwag / Design Process 2019


Information At your Fingertips

The Home screen now features the current weather and temperature, MUNI and BART information, city alerts and traffic information all in one screen! The implementation of the navigation bar at the bottom makes it easy to use the app.

SF 311 App Redesign 65


Final Design

Sidebar or Hamburger Helper

Sidebar helps users navigate throughout the app with ease. It features most of the tools you need at the press of a button.

66 Simon Liwag / Design Process 2019


Organized and Fun

The New Request screen features the city services and requests lists. Icons make it easy to find the category for your request. The search bar also helps users navigate through this page faster than ever. Upon completing a request, you are greeted with a confirmation screen that thanks the user for submitting.

SF 311 App Redesign 67


Final Design

Location Services at your Service

You are now able to see requests based on your current location! You can scroll through the list of requests which now features a time stamp and how far are you relative to the request.

68 Simon Liwag / Design Process 2019


No Need to Register You can remain anonymous while using the app! Registering will only give you user benefits such as keeping track of your requests!

SF 311 App Redesign 69


Final Design

Find What you Need The Information page holds a lot of info. You can view current city advisories, MUNI Bus schedules, current events, and Holiday Parking meter information. Search function also helps you find what you’re looking for.

70 Simon Liwag / Design Process 2019


SF 311 App Redesign 71


72 Simon Liwag / Design Process 2019

Photographed by Reeni Stee


SIMON LIWAG CONTACT INFORMATION INSTAGRAM: si.mon EMAIL: simonliwag@gmail.com Thank you for reading!


Profile for s. l.

Design Process Book by S. Liwag  

Process book for DES 300.01 Instructor: Heidi Dunklegod ------- For this Process Book, the design elements and the font is based on my insp...

Design Process Book by S. Liwag  

Process book for DES 300.01 Instructor: Heidi Dunklegod ------- For this Process Book, the design elements and the font is based on my insp...

Profile for sliwag
Advertisement