Designing a responsive web app for an early-stage tech startup in the events/travel space
Rave Travel is an early-stage tech startup that was in the process of building an events/travel app for web that enables users to find events and book tickets along with flights and lodging, saving money when they bundle. I was tasked with designing a set of high-fidelity prototypes of Rave’s web app for mobile and desktop, building off a set of wireframes previously created by a team of UX students.
Project structure: 3 sprints of 8 days
Tools: Adobe XD, Illustrator, After Effects, InVision, Miro
Deliverables: Moodboards, style tiles, affinity diagrams, prototype
The main challenge of this project involved figuring out a way to engineer a visual design that could appeal to Rave’s target market while still staying true to the name and fitting the product type. The company defined their target market (albeit loosely) as millennials who are perceived to be “cultured, educated, and tech-savvy.”
Beyond this classification, however, my design had to appeal to the prospective users that would resonate with the core benefits that Rave was seeking to offer with their product. Given that Rave’s main value proposition revolved around their bundle-and-save model, this meant users with enough expendable income that they can afford to purchase flights, hotel accommodations, and event tickets all in one single transaction, but not so much money that price was no object.
I began by doing domain research into the travel and events industries. After gaining a deeper understanding of the space in which Rave was aiming to operate, I conducted an in-depth competitive analysis of the companies that Rave cited as their competition in our initial meeting as well as a few others that I perceived as being potential competitors, both direct and indirect.
Once I had a better sense of where Rave stood relative to their competition and what aesthetic choices those competitors were taking in terms of their product designs and general branding, I went to work on devising several divergent visual design concepts. I assembled several moodboards, two of which are shown below.The moodboards served as the jumping-off point for what would become two distinct design directions.The first one (“Multicolor Matte”) was inspired by a trend that I had taken notice of at the time: clever use of simple two-dimensional shapes and matte textures to create an aesthetic that was playful and unpretentious. As for the second visual concept (“n e o n”), this direction began as nothing more than an attempt to create an ambience that matched the name itself, Rave Travel. I drew upon what I knew about rave culture and incorporated imagery that was reminiscent of an underground party scene, evoking the sort of rapturous, unbridled joy felt by those clubgoers who live for nightlife.
When I presented these visual directions to the client, I was met with positive feedback. Rave really liked the high level of contrast in my designs that they felt made the colors pop. They encouraged me to move forward with my "Neon" concept, as they felt this was the most vibrant and fun. I took their feedback and moved into creating style tiles for each proposed design direction.
For this project, I conducted two rounds of desirability testing in which I collected attitudinal data regarding potential users’ feelings towards various components of my visual designs. These testing sessions took the form of user interviews in which I spoke with people that fell within Rave’s target market, usually for about 30 to 45 minutes.
The first round involved showing my style tiles to three interviewees who gave their opinions regarding elements of my designs like the typography and color palettes. We also discussed topics like product fit and how the mobile and desktop versions should match up.
In the second round, I sourced three new participants and asked a similar set of questions but put them in the context of the first round of high-fidelity screens that I had designed to go in line with the client's preferred visual aesthetic. After collecting feedback during each round of interviews, I put all of the insights on a Miro board and used them to make an affinity diagram, an example of which you can see below. The affinity diagrams were used to synthesize key takeaways that guided future iterations and were relayed to the client..
Once I implemented a number of changes to my original design in response to the feedback collected during desirability testing, I looked back over what I had learned so far and then did another round of prototyping, this time building out an entire task flow in which the user could go from finding an event on mobile and adding it to the native trip planning feature to bundling that event with a suggested flight and hotel accommodation on desktop, in the process seeing how much they could theoretically save by doing so. This user flow served as the basis for a round of usability testing that I conducted before presenting my final product design to the client several days later.I chose to test with this particular user flow because it served to communicate the central benefit of Rave’s value proposition and at the same time also demonstrated how the mobile version of the web app could work in tandem with the desktop site.
.png)
During testing, I overwhelmingly found that users’ preference regarding which version of the app they would actually use in a real world context was split. While some users preferred the desktop version because it allowed them to see all the relevant info at once (which some said was particularly important to them when navigating important tasks like booking trips), others preferred the app’s mobile experience, expressing that there was a lower cognitive load on any given screen relative to the desktop version and the information generally seemed more streamlined.That being said, there was some consensus on the relative functionality of both versions, with most users indicating that they generally prefer for the functionality to be identical between different device types.
Another key finding from my user interviews was that the client’s name, Rave Travel, conjures up very specific images in the minds in its target audience. When I showed interviewees my divergent style tile designs during the first round of desirability testing, virtually all of them expressed that there was a perceived disconnect between the name and the design with regard to all of the tiles except the neon one. To me, this suggested that the mental associations that people have with the word ‘rave’ seem to be rather entrenched, and all subsequent rounds of testing yielded results that confirmed this suspicion.Granted, my findings could also be explained at least in part by the fact that all of the users I interviewed were millennials based in a major metropolitan area, but given that Rave’s target market mostly contains people who also fall under that description, I advised that they give at least some consideration to this association.
In the four weeks that I worked on this project, I explored many different avenues and tried to view the unique design challenges of this project from every angle I could. Looking back on my process and what I learned along the way, the finer points of my final design solution can be boiled down to three main components…
With a platform as robust as the one Rave was building, one with which people can search for and book flights, hotels, and event tickets all in one place, there are bound to be many different types of users that navigate the interface in different ways and for different reasons. This was something I considered as I was peering through the wireframes for the first time and something that ended up feeding into my final design. I wanted to create a landing page that accommodated for users who already knew their destination and wanted to search for events as well as those who didn’t know where they wanted to go or what events they wanted to attend, if any.In terms of the mobile design this was accomplished by implementing a tab structure that allowed the user to select whether they were specifically looking for events or destinations, and on the desktop version I displayed event cards and city cards together throughout.
Another important change that I made in moving from the UX wireframes to my high-fidelity designs was overhauling the My Trips feature. Whereas the wireframes put forth this feature as a sort of Pinterest board for things like hotels, I saw it as having far greater potential in terms of its function and significance within the larger application ecosystem. Beyond serving as a repository for bookmarked content, I designed for it to showcase recommended flights/hotels/events that could be suggested based on what the user is planning to book, and beyond merely featuring a simple calculator function that could divide certain costs by the number of people going on a given trip, I designed for it to be able to actually split the cost of the grand total and indicate how much money the group was saving by bundling.
In engineering my design solution, I sought to create something that would showcase the app’s underlying value proposition and that also made sense with the name Rave Travel and its connotations. However, what I ended up with was not only a suitable visual design that accentuated the app’s core functionality but a potential retargeting opportunity for Rave—a site that they could use to specifically appeal to festival-goers.Why festival-goers? Well, to start, festivals are usually multi-day events for which people are more likely to travel long distances compared to one night only events. They are also typically quite expensive, so their attendees are usually individuals with expendable income that are able to drop hundreds, often thousands of dollars for the experience. These are the sort of people that have the means to purchase event tickets, flights, and hotel accommodations all in a single transaction, and therefore the sort of people that are able to benefit from bundle-and-save sites like Rave. Lastly, the name ‘Rave Travel’ seemed to particularly resonate with the festival-goer crowd. In my research, I found that the user segment that regularly attends festivals and the segment that had positive connotations with the word ‘rave’ tended to coincide.Another key advantage of narrowing the target audience to festival-goers is product differentiation. While Rave was fighting an uphill battle in trying to compete with more established companies like Expedia, making their platform appeal to a more specific subset of people would both allow them to stand out against their competition and possibly cultivate a more loyal customer base down the road. It would allow them to tailor their product to better serve the specific needs of the festival-going crowd by optimizing what type of relevant information is included throughout the site and perhaps even by going so far as to add unique features like a way for users to sort through notoriously convoluted festival schedules, work out what they want to see, and share their plans with friends (something that one of my user interviewees who regularly goes to festivals said would definitely make him a Rave devotee, if included).
When I gave my final client presentation at the end of the four weeks, my work was met with much enthusiasm from the team at Rave. Aside from the aesthetic choices that I made, the aspects of my design that particularly resonated with them were the UX changes I had implemented and the manner in which I had chosen to organize the site’s event information such as event lineups and details regarding ticket purchasing and travel options.
The client also appeared to be open to the prospect of exploring new opportunities in terms of their marketing and indicated that they were planning on rethinking their B2C strategy in the months that followed. As the project came to a close, they expressed that they would be incorporating elements of my design into the next version of their product, and we agreed to keep in touch.
