Responsive Web Design (Coursera)

Responsive Web Design
(Coursera)

The next assignment was a follow up from the previous prompt. We had to design a Responsive Web App for the "Movie Theater Seat Reservation" App

Role: Lead UX Designer

Goal

- Empathize

- Ideate

- Design

- Prototype

- Test

The goal for this class project was to create a Responsive Web App for the Movie Theater Seat Reservation App from the previous course. Designing a website, Ipad, and Iphone version of the same application across all systems

Research

Expanding off of our previous assignment, I wanted to look elsewhere for ideas and ultimately decided to use HBO's homepage design as an influence. This would give me the chance to show my skills of building off a previous design’s foundation and implementing my own creativity while keeping the users in mind.

Users

The Users were ages 25-60 years old

3 Male

2 Female

4 Employed

1 Retired

SiteMap

This was a Hierarchical Design for easy navigation. We were designing with Graceful Degradation in mind. Designing from large screen to small screen.

Paper Wireframes

Here I designed the desktop homescreen and then designed homepages for the Iphone and tablet designing from large to small screens. I also designed the follow up screen for movie theater selection.

Digital Wireframes

Following the creation of my paper wireframes, I transferred them over to digital wireframes.

MockUps

Once I was happy with the lo-fi wireframes, I started adding text, icons, and color for a hi-fi mock up.

Prototypes

I created different actions for the website, Ipad, and Iphone versions because each device presents a different visual aspect when moving from screen to screen and can affect user experience.

Final Polished Designs

I'm very happy with the final design. It’s simple, but gives a lot of information. I used HBO's homepage as a reference and made the following screens my own. I made sure to subtract certain text or icons and rearranged the layout as the devices changed size while keeping the 4 C's of consistency, continuity, context, and complementary at the forefront.

Results/Outcomes

The results came out positive. With ease and a good color scheme, users found the design easy to use, pleasing to look at, and intuitive.

What I learned

- How components appear from system to system and screen to screen greatly affects how an individual views and operates the app.

- Using the 4 C's will greatly improve the user experience.

What's Next?

- I would like to work off this design a bit more and build out multiple screens and flows.

- I would also like to implement more design systems and interactions to allow for a more professional feel (ie. timed carousel, autoplay, autofill)

- More use of Auto Layout for efficiency and time management

- Learn how to use "Material Theme Builder" for consistency in color

-Be more efficient with sticker sheets.