MeetingSpace

Note: As this was a short course focusing on UI, I didn't interview or survey potential users, and did not conduct any usability tests.

Brainstorming the Problem

User Flow

To start off, I looked into other meeting room schedulers as well as hotel booking sites, determining expectations for user flow.

‍

I wanted to allow users to browse for options without having to sign in first. This would build trust with users, and they would be more likely to create an account if they were able to find a space that fit their needs. In order to book a room, we would require users to register or log in to keep track of their preferred locations and payment methods.

‍

As a frequent traveler who also has plenty of experience booking study rooms at my university, I was familiar with plenty of personal pain points.

My focus:

Multiple large images of spaces
Ability to filter search results by location, room type, pricing, room features, office space facilities, and transportation options
Incorporate a price breakdown so users would be aware of exactly how costs were calculated

Putting it onto Paper

‍

I wanted to design an app with no frills, as most users would not want to spend too much time using this app. Therefore, I chose to use 4 main navigation icons:

Explore: allow users to browse for options based on location, pricing, amenities, et. cetera
Maps: allow users to easily see distance from freeways, airports, hotels, et. cetera
Bookmarks: allow users to save potential meeting spaces and narrow down options, returning to this page when ready to book
Profile: allow users to update their personal information, payment methods, or notifications

‍

I usually start the design process by sketching out low-fidelity wireframes following the user flow, guiding a user through sign-up, filtering and browsing their options, and finally to booking. This is the way I iterate through many design options quickly.

‍

I transferred the wireframes onto Figma to create mid-fidelity prototypes.

I used a mobile-first approach for my design, making sure I stayed consistent in my approach. Due to the larger screen size, I adjusted some of the formatting, but the overall flow and hierarchy stayed the same.

Style Tile

I chose to keep things simple with a monochromatic color palette. For fonts, I chose Montserrat as a safe choice for body text, and Exo to make my brand stand out a little more.

High-Fidelity Prototypes

Mobile

I changed the navigation bar to give it a more modern look and adjusted the process of creating an account so users wouldn't feel overwhelmed with the amount of information they had to fill in.

‍

I adjusted for more white space, softened up the lines and borders, and labeled the icons.

‍

I also updated the cards so they wouldn't show the full address or accommodation limits, as too much unnecessary text in the cards was overwhelming.

‍

Web

I designed with a mobile-first mindset, so most of my changes for my web design reflect the decisions made to my mobile design.

Future Iterations

UX

First, I would take my navigation bar and buttons and design multiple states. Then, I would include labels and placeholder text for form fields to increase accessibility. I would adjust the sizing of icons for my sign up screen and navigation bar, keeping in mind touch space recommendations. I would get rid of dropdown menus by replacing them with different controls, such as segmented buttons, cards, or radio buttons. In fact, my Filter page is not the most user-friendly due to the combination of dropdown menus and small touch spaces for checkboxes.

UI

I would be more consistent with my buttons and icons (they were all over the place!). In addition, there are some minor issues in terms of alignment and grouping, so I would decrease the spacing between grouped items (ie. the user profile). Also, I would make use of the whitespace and add watermarks or other design elements to make the design more engaging.

‍

Despite these flaws that I have learned to see, the work looks relatively clean and passes the "squint" test. Learning is a continuous process, and I'm glad I have learned even more in the few months after I completed this course.