Category: Uncategorized

Central Park App_ Final Iteration_ Elly, Rosa

Concept

We are designing an app for Central Park which have the tour packages that can help people to explore the Central Park in different routes. For the app on iPhone, the three main pages are tour package page, explore page, and map page. On the other hand, for the apple watch add on, we focus on the function of navigation.

Main Functions

  • Choice on tour packages
  • Customize your own route
  • Introductions of the place
  • Central park map
  • Explore new place
  • Navigation

Scenario

 

Final Design

Three things we have changed:

  1. In apple watch, we put a DONE button instead of push over.
  2. In apple watch, when start navigation, we show the place “Central Park Reservoir”.
  3. In iphone, we fix minor graphic design and layout.

 

ThursdayApp_Liang

Mend-Breakup Trainer

Mend is an app targeting those who need help to recover from a breakup. It is creating an experience that feeling like a friend helping you through your breakup.

  • It features a conversational interface which can guide users through the Mending journey
  • The app offers an everyday audio guide to help the user get through.
  • Each day the user can get a task to do in the app such as writing. The app also asks the user to check in their emotional situation every day.
  • The app tracks the data like days since breakup and days since last EX contact.
  • The user can find much relevant advice and many stories as well.
  • The look and feel is very calming!

Central Park App_ Elly, Rosa

 

Wireframe:

 

 

In this final presentation, we redesign the icons and the tour packages graphics to make our app more attractive and clear.

For the flow in iPhone, the most thing we have changed is make the hierarchy clear in the tour package. Clearly states the distance and time people would have spend in each tour.

Also, We get rid off the function of bike riding. We replaced it to the function of exploring the central park by categories. And what’s more, we have the function of map which can show where you are, and what are the things nearby.

For the flow in Apple Watch, we get rid of the order number of the graphics and add the next stop under the bottom of the map. Also, we made the navigation bar clearer in words.

 

Digital Prototype on iPhone: https://marvelapp.com/45jb5hi/screen/28042385

Digital Prototype on AppleWatch: https://marvelapp.com/1i452eh/screen/28042730

 

What we have learnt in the final presentation:

iPhone:

  1. Is that possible to save the plan already done?

Apple Watch:

  1. cannot do back and forth (push over)
  2. add audio

 

Yummy Apple TV_ Elly Lin

For the Apple TV version. I took off the function of “create” personals recipes. I want people to focus on the function of explore and their collections in the profile page.

The paper prototype I have done in class:

Users’ feedback:

The bar on the top cannot do the sublayer such as Country and Author layers under the Explore bar, and Favorites and My Recipes under the Profile bar.

 

The visual version:

Feedback from class:

  1. need to tell more actions after clicking on the video.
  2. The circle icon is confused. Because it can be click on video and flag, but not on the country and authors’ icons.

# Thursdayapps 2_ Elly

Toca Lab

 

Toca Lab is an playable app game for children. Also, it can cultivate children interest and knowledge in Chemistry.

The periodic table can encourage children to collect all of the 118 elements, by trying out the functions of heat, wheel, freeze, waves, and blend.

The app shows a great collaboration of artist, programmer, technical artist, and play designer.

The reason that I love this app a lot is because I am interested in children education. I think this app successfully help children who are afraid of chemistry by those cute and funny animations. Also, for those kids that haven’t start to learn chemistry, this app will help them build in many interests.

Website: https://tocaboca.com/app/toca-lab/

 

Prototool_Group_Gunjan+Tong

RESEARCH QUESTION:

How might we build a mobile prototyping tool for designers to sketch & create rapid low fidelity prototypes to document and user-test?

CONCEPT:

Proto-tool is a mobile application that allows UI/UX designers to quickly sketch and document low fidelity prototypes. It also encourages designers to continue improving and working on their work through daily challenges.

PRECEDENTS:

Adobe Comp CC and Google Autodraw – works with machine learning sketching and prototyping.

MOBILE:

Quickly create prototypes and sketches on mobile to document process.

IWATCH APP:

UI Challenges with everyday Challenges.

TARGET USER/AUDIENCE:

Our Target Audience are User Interface and User Experience designers who love to prototype on the go, on mobile or just paper prototype/take photos to document work.

SOFTWARE:

(Made with Sketch, Framer, Principle and After Effects)

LATEST PROTOTYPE:

 

 

 

Click here to see our latest Prototype (Made with Marvel)

LATEST APP MAP:

LATEST IWATCH PROTOTYPE

3 THINGS WE LEARNED FROM DIGITAL PROTOTYPING: (to improve on our prototype)

  1. While we prototyped on paper, we thought the wheel interface would be effective. Once we implemented it digitally and tested it out – we were wondering about how effective the wheel interface for timeline/projects would be. We started asking questions such as: What if a user had too many projects? Can they search through the wheel? This digital prototyping session and user testing session helped us understand our needs and functionality better.
  2. We also realized that High fidelity prototyping would be too detailed to perform on the iPhone.. The main functionality of the the application is to mark ideas and prototype low fidelity screens. High fidelity would require attention to detail which can be tiny on the iPhone. So we are sticking to low fidelity prototypes + sketches with Daily UI Challenges and hotspots.
  3. Explore/Community functionalities not necessary

3 THINGS WE LEARNED FROM PAPER PROTOTYPING:

  1. We learned the importance of hierarchy and functionality of every icon. We prototyped, sketched, designed digitally and came back to the drawing board and paper to paper prototype again. The main idea was to understand each TAP, each function and also understand how clear the icons were.
  2. Would the timeline be week based, day based or project based?
  3. Enabling less number of taps and more interactions while sketching, etc.

Watch prototype:

https://marvelapp.com/22jg28j/screen/28043174

PRECEDENTS + DESCRIPTIONS

  1. ADOBE COMP CC

2. GOOGLE AUTODRAW

USER PERSONAS + INSTANCES

USER SCENARIO + STORYBOARD

App Interaction videos:

homepage from gunjan raheja on Vimeo.

delete from gunjan raheja on Vimeo.

daily UI PAGINATION from gunjan raheja on Vimeo.

daily ui challenges_1 (Converted) from gunjan raheja on Vimeo.

LATEST VISUAL DESIGN + HERO SCREENS:

VISUAL DESIGN 1:

LINK TO MARVEL

LINK TO PRESENTATION

User testing & Learnings:

  1. Thinking about the hierarchy and main navigation – What elements are most important? We wanted to experiment with the idea of being able to document work process. We came out with various solutions that could reflect our concept, such as lists, groupings, and narrowed down with organizing projects through a timeline. A problem with this approach though, is that it would be more difficult for users to be able to refer to previous projects. For instance, what if one user prefers to work on different prototypes for different projects at the same time? It would be preferable to organize projects through different names. Would the timeline be week based, day based or project based? 
  2. Another issue that rose from this prototype was the iconography and language that was employed. Some icons were misleading and difficult to understand, causing the users to get lost when using the application.
  3. User flow was also another issue that was not worked on well in this prototype. The UI gave more emphasis for users to record their prototypes with the phone even though the sketching option was equally as important.

 

POINTS WE NOTED DOWN AND CHANGED IN THIS STAGE:

TIMELINE – Design use, Main Navigation and Hierarchy, Date on Header and UI Tips to UI Challenges

WIREFRAMES + FIRST PRESENTATION:

Link to Marvel

Link to Presentation

User testing & Learnings:

  1. While we prototyped on paper, we thought the wheel interface would be effective. Once we implemented it digitally and tested it out – we were wondering about how effective the wheel interface for timeline/projects would be. We started asking questions such as: What if a user had too many projects? Can they search through the wheel? This digital prototyping session and user testing session helped us understand our needs and functionality better.
  2. We also realized that high fidelity prototyping would be too detailed to perform on the iPhone. The main functionality of the application is to mark ideas and prototype low fidelity screens. High fidelity would require attention to detail which can be tiny on the iPhone. So we are sticking to low fidelity prototypes + sketches with Daily UI Challenges and hotspots.
  3. Explore/Community functionalities with including themes might not be necessary as most of the cases designers would not want to share their prototypes with the community.

SCREENS:

Thank you 🙂