Spaces by Harvard University is an intuitive tool made for students (that could be implemented for faculty and staff too) that allows easy browsing, searching for, finding and reserving the perfect study spot on the university campus. It’s a streamlined, easy-to-use web product that I developed as a part of a 1 week hi-fi desktop-based MVP design challenge for a student think tank.

Design Process

Target Audience - University students

🔴 Wide range of interests, including sports, music, art, politics, and social issues, typically digital natives, comfortable using technology (smartphones, laptops, and social media).

🔴 They may have different learning styles, including visual, auditory, and kinesthetic and come from diverse backgrounds, with different cultural, ethnic, and socioeconomic backgrounds.

🔴 Focused on personal growth and development, building social connections, and exploring new ideas and experiences

🔴 May have limited time due to their academic schedules, extracurricular activities, and part-time jobs.

User Research & Competitive Analysis

I conducted quantitative and qualitative research in order to further define the target audience and place myself firmly in their shoes. I ran 30 surveys on UXtweak & conducted 8 online user interviews with students that are currently attending Harvard University. Parallel to this, there was the competitive analysis - 4 similar products from different universities were explored and compared.

User Persona

With many of the insights that I managed to gather, I crafted a pretty articulated User Persona. It truly did wonders for setting me up into a firm user centered mindset and decluttering me of some biases I had naturally procured.

Empathy Map

I needed to visualize a Harvard students attitudes and behaviors in an empathy map to help me align on a deeper understanding of the end users. The mapping process also revealed nuance feelings that I couldn’t connect with trough the means of research, projecting an even deeper understanding in me for the user.

User Journey Map

Persona: Laila Morris

Goal: Reserve a study space in order to buckle down and prepare for the exam in 2 days.

User Flow

Main App Feature - reserve a study space.

Storyboard

Storytelling plays a large role. A story captures attention, provides clarity, and inspires action. I wanted to iterate and elaborate further on that Harvard student so I constructed a few Big Picture and Close-Up storyboards. I’ve provided and example of one of the Big Picture ones here.

Sketches/Low-fidelity Wireframes & Ideas

All the tinkering during my research, interviews and initial concept exploration was starting to absorb into my thoughts. I soon had a clear idea in my head - construct a filtered approach in the first stage of the user journey. Kind of like going to a booking site and searching to rent an apartment. It was pretty simple, yet it stuck like a splinter in my mind. All pathways led to it in the end, so I just gave up and went exploring. Turns out it was a great idea - it not only gave the user precise control over the process, it was something that many users, especially young ones, were quite used to doing (booking apartments, trips etc.).

The more I explored the “filter -> search” solution, the more it warranted staggering sense to the idea behind it. I didn’t waste any time and simply went ahead and constructed some demo user flows for various functions and tweaks that could potentially work with this approach.I was liking the direction, but I needed feedback and verification, so I went ahead and pitched a rough concept to previous acquaintances that I had conducted user interviews with. The feedback was pretty overwhelming, even though the sample size (6 people) was not big. Everybody liked the general approach and even though I probed for bias there was pretty much none, they simply thought the same things that I had envisioned - user preferences and control over the process were the cornerstone of the whole ideas, and it was a satisfying concept.After confirming my hunch, I decided to go “all in” for the concept. Ideation had concluded, it was time to get things done.

Working Prototype

You can take a look at the MVP working prototype here: 🔗Working Prototype

From the moment I popped Figma open I knew exactly what I wanted to achieve. Pieces were already falling in place in my mind, which was a pretty good thing, considering I didn’t have time for much low-fi wireframing. I had to get the concept off the table in a timely fashion and develop it with all the things that I wanted to include and they weren’t few.

While laying down the grid and deciding on the “x” values for spacing and distributing content, I always found that I started drifting toward thinking about responsiveness and the eventual mobile implementation of the product. That is why I went ahead and compared values so that a logical mobile implementation could use some of them too. Concise spacing is the foundation of a good UI and hierarchy when distributing elements is paramount. Not that I always follow the rule by the book - I like to break it a lot, but it certainly has its beauty to the eye. It makes the UI legible, logical and easy to navigate.

Working Prototype - Filtering functions

🔴 Select Date

🔴 Select Distance

🔴 Select Building

🔴 Select Space Type

🔴 Select Desired Space Features

Style Guide

The color palette is derived entirely from the Harvard Crimson color (#A51C30) and a minimal compliment of white in order to achieve maximum legibility and contrast. I considered the legacy in order to preserve the brand foundation that an institution like Harvard has built so I went with a minimal, sleek and functional design. The font is considered along the same lines - a humanist sans serif, user centered and pleasing. Designing with accessibility in mind is always key. I made sure all the color pairings present in the design solution were compliant with all web accessibility standards. Beyond that, a good contrast is easy to read even if you don’t have a disability and improves the UX in a very significant way.

Considering Responsive

During the whole design process, the thought of a mobile implementation never quite left the back of my mind. The design challenge was meant for a desktop-based MVP, but it was constantly irking me, so I decided to dedicate a moment and consider how it would look like. All things considered, I went ahead and made the jump straight to a dedicated app. It’s safer, more comfortable to use by a digital generation, and can ship with a lot of extra features that the web can’t always provide. The displayed demo mockups are of a possible dedicated app implementation. I went ahead and produced a more iOS-like navigation, considering this is meant for Harvard University and the dominant platform in the United States is iOS. Beyond that, I tried to imagine how a responsive design would scale. Truth be told, the initial design I started tinkering with was meant to be scalable and easy to implement on mobile too, so I didn’t have any issues constructing it.

User Feedback

When I went ahead and started distributing the working prototype to university students, the commision and engineers I felt excited. I really wanted to see how things were developing. Initial feedback wasn’t bad. People liked it. Some said the design looked a little bit dummed down, while others praised it for it’s streamlined approach. In the end, I consider it a good implementation if you keep in mind that it’s meant to be in the spirit of a serious academical institution such as Harvard University. I feel it’s keeping to the brand of Harvard. UX feedback was pretty good too. People praised the filtering feature and thought that the filtering options were pretty good. Everybody thought the interactive loading “busy spaces %” bar was quite nice and a refreshing element in an otherwise clean and serious design.

Pain Points & Conclusion

What I envision as good preventative measures that I’ve implemented as thought exercises in the concept are: policing abusers with user interaction & reporting, demanding authorized Harvard ID login, controlling space reservation abuse with limitations, controlling overbooking with the same tool. Gardening a “user penalty rating” (a demo concept I’ve shown in the prototype when reserving a space) might seem fascist to some, but as a serious academical institution and for the benefit of the students I feel like it’s a good measure to keep tabs on potential bad actors. The concept certainly has a lot of potential. I feel like it’s a pretty good solution. It’s user-centered, gives the end user ultimate control over the flow in a sleek fashion, and integrates with known user behavioral patterns. There are a lot of features that crossed my mind, but I simply didn’t have the time to explore and implement. Improvement opportunities were coming along, and I thought some of them trough, other I implemented, but ultimately it was a design sprint, so I sprinted.