Outdoor Apparatus – Responsive Web Project

Coding is like math! it is really addictive and you cant get off your computer until you solve the problem. I’m really excite with this project, it is one of the most challenging project this quarter but I’m happy with my first website look. Another cool thing, this is also a responsive site. So if you wanna see how it looks like on tablet or mobile phone, it should still looks decent 🙂

Please visit edison.seattlecentral.edu/~swilso25 to check it out!

WIREFRAME

MOBILE WIREFRAME

 

FINAL LOOK AND STEP BY STEP CLICK THROUGH

HTML & CSS

It is so exciting that we are learning them this quarter, this is one of my exercise look of designing with HTML & CSS… it’s like designing with a different language…challenging and fun!

SHAPESHIFTER (Final Design)

The last process of creating an app, is the most fun of all, now we get to design it!!.

FINAL TASK : CHOOSE 1 from 3 taskflows for final skin.

We chose a taskflow where we take user to start a strength exercise that are already designed for him, in the process he would add an exercise you his exercise list. Ladies and Gents, we present to you SHAPESHIFTER.

01. HOMEPAGE

02. EXERCISE HOME: in this page user will be greeted with his goal, progress and log for exercise.

03. STRENGTH: Coming into strength page, user will see list of exercises that either already designed for them (Shapeshifter Route) or repopulate based on popularity (Personal Route). They will be able to see video of exercises to see a correct form in exercising. They will also able to adjust the intensity of their exercise (changing rep and weight).

04. ADD/EDIT SHAPESHIFTER WORKOUT : in this pop up page, user can add a new workout to the list by simply clicking on any muscle parts of the blue man and it will delivered them list of workout based on that chosen muscle group. When user’s finished editing their updated workout list, they can click the save button and it will bring them back to STRENGTH page so they can start working out.

05. MOTIVATIONAL POP UP: user will see this pop up page everytime they are finished with their workout.

Shapeshifter – Ipad Fitness Apps

Alright here come our big project for UI/UX class. This was a group project, with Riva Davis and Megan Harris, we worked together for 7 weeks to build a new fitness apps for ipad.

WEEK 1

Task: Research.

This part of the process can be exciting but yet overwhelming at the same time. This is an infographic I made for our research presentation.

WEEK 2

Task: Use your research and create 3 user persona for your apps

This part is pretty fun cause we got to create a character and their story to imagine the type of user for our apps.

WEEK 3

Task: Create taskflow for each persona and a sitemap for your apps

Creating sitemap is like playing with puzzle, but then again the designer have to get rid of their subjective mind and think that we’re not the USERS. A card sorting system of asking people who are user target is a good way to map out the site.

We decided to give personal and professional approach on using our fitness apps SHAPESHIFTER. For user who’d like to have a designed diet and workout they can take the shapeshifter route when they’re signing up for a new account.

To save up some space, the highlighted line is the taskflow that each user took on our apps.

WEEK 4

Task: Create 2 wireframe for each taskflow

Okay so in this process, we kinda got carried away and created more than what was expected. I guess it is hard to just focus on several parts while the other part of your apps are screaming for questions and more explorations.

HOMEPAGE : Overview of diet, exercise and social feed of user account

PROGRESS: check out and update progress in strength, bodyfat and heart rate

FOOD: diet log and cheking out nutritional breakdown of food user had or planned to have

EXERCISE : Strength (overview of workout video, and logging exercise)

EXERCISE: CARDIO (logging cardio workout, synching it with user’s iphone while working out, your ipad can also be used as a live gps of your location and performance data of when your exercising outdoor)

Skinning wireframe-Petpal

UI/UX is one of the most challenging and exciting class last quarter. It is completely beyond designing in aesthetic approach. User is the KING, every single parts of design and interface has to be based on user needs and behavior. Before we headed to our big project for the quarter, we were introduced to the steps of UI/UX work process, one of them was skinning wireframe.

In this training project, we were assigned to design over a wireframe of a photo sharing apps for ipad. I decided to make it into a pet adoption photo sharing apps. The cutest dog on the drop screen is my dog, MAMITA…but she’s not for adoption people!!