Overview
I was brought in to help with the rapid release of Airloft that included a website for the product, a short video commercial and a marketing campaign to secure pre-leases for the bed’s 2021 release. The intent of the fast release was to generate buzz around the product and to use this to help Starcity fundraise for the next venture capital round.
Background
Starcity is a venture-backed startup that develops and operates multifamily buildings with shared spaces, defined as coliving, with the mission to “make great cities accessible to everyone.” Starcity has been in the news recently for its $30M fundraise during the pandemic as well as its acquisition of coliving competitor, Ollie. Currently, Starcity operates roughly 1,500 units in 9 cities.
Airloft is a patented product that is the first of its kind: an automatically transforming bed and couch hybrid. For Starcity, the coliving experience involves small private spaces with larger shared common spaces that allow members to socialize. The private spaces can be as small as 150 square feet with most of the space taken up by the bed. Airloft allows members to easily transform their bed into a couch by pressing a button. With Airloft in couch mode, members then have space for a desk to work from home or to exercise.
Duration
Vol 1:
1 week
Vol 2:
2 weeks
Role
UX designer
UX researcher
Copywriter
Storyboard artist
Tools
Pen
Sketch
Invision
Photoshop
Project
Client project
Design Overview
The project began when…
I met with Starcity’s product team to discuss their goals, expected deliverables, and timeline for the project. I learned about Starcity’s high-level goal of making great cities accessible to everyone and where the release of Airloft fit in the big picture.
Design Process
Due to the tight schedule, I narrowed my focus to only the business goals and user goals. I then decided I would iterate my designs over two sprints.
Business
— Generate excitement around the release of Airloft
— Explain the benefits of owning an Airloft for Starcity members
— Use Airloft pre-orders to raise money for an upcoming venture round
Users
— Understand the product and be able to judge its quality
— Learn how their own room can be changed with an Airloft
— Have a way to reserve an Airloft to be received in early 2021
Sweet Spot
After understanding the business and user goals, my goal, as a UX designer, was to hit the sweet spot and satisfy both parties.
Research
My first step was to conduct User Interviews with two potential users that were Starcity members. I also did a Competitive Analysis of two inspirational companies that have comparable technology products with BumbleBee Spaces and Tesla. Finally, I did my own Background Research concurrently to make sure I understand the context of the company and potential users.
Target Market
The immediate target market would be current Starcity members. Starcity members are often in their twenties or thirties and are transplants into the city. They may not have a car or have friends or family nearby so they live at Starcity because it is central to city amenities and it comes with a social circle.
Ideation
I worked with my clients to brainstorm ideas on how to create a story for a commercial as well as the aesthetics and contents of the website design. For the video, early ideas were to film one shot that would be a day in the life of a Starcity member with Airloft.
Storyboard
The storyboard imagines a man going about his day in his Starcity apartment in San Francisco. It was important that the commercial have an inspirational and upbeat tone because we knew this would not only be a commercial for Airloft, but would reflect on Starcity as a company and the coliving experience.
Then the magic happens
The storyboard got the Starcity product team so excited that an official commercial shoot was planned. Enjoy!
Vol 1 - Final Design
Website
Wireframe
Commercial autoplaying in the background
Describe Airloft’s bed and couch modes to help viewers understand how it works
Adding a section on Airloft’s unveiling at the opening of a Starcity building to generate excitement
Outcomes
This was the end Volume 1 of my work with Starcity. We successfully shot a commercial and I handed off my wireframe. At this time period, Starcity wanted to release Airloft in less than a weeks time so rather than hiring a web developer to create my website, they were forced to use a simple website builder as a temporary solution.
Vol 2
Redesign
A few months after Airloft’s release, I was contacted by Starcity again. Starcity’s goals of securing pre-orders were not being met and they asked me to return for a website redesign.
Challenges
In the kickoff redesign meeting, the team shared to me that conversion rates were low on the website and email marketing campaigns were not resulting in pre-orders. The few pre-orders Starcity had were based on customers viewing a live demo.
How might we increase pre-orders?
Testing, Testing and Testing
Landing page
First I asked for data analytics on the website to understand how viewers were navigating the site. The result was that email blasts were leading to spikes in viewership but not in pre-orders.
Users complained that the language on the website used hard selling terminology that repeatedly asked for them to make an Airloft reservation
They wanted to see more pictures about the product and learn about its functionality rather than seeing repeated segments of the commercial.
With Starcity being an unknown brand, they did not trust the product’s quality and safety.
Product page
80% of the users said the page is too overwhelming with too much information.
Opportunity
The issues of the website were becoming clear.
Users want to see more information about the product because the product is new to them and the company isn’t well-known yet
Users want to see and experience the demo in person before making a reservation and are not sure how to do so
Users are put off by the hard sell language and feel like they are being forced to making a commitment before they are ready
Solution
With my understanding of the problem, I selected my final three key design changes for the website.
Design Changes
Key Change A
Improve overall visual presentation and rewrite content
The current website is lacking pictures and instead uses repeated segments of the longer commercial or videos from the same shoot. Therefore, I replaced the current pictures with stock pictures to show the mood and the quality of the product I believe should be strived for and that would match Starcity’s brand.
I also worked with the team to rewrite all the content writing, the goal shifted from selling to educating the viewers about Airloft. I also added iconography to simplify the design and create a friendly way to convey the product’s features.
Key Change B
Add an appointment option to see a live demo
One of my key insights is that 75% of the residents reserved an Airloft after they saw it in person. However, the viewings were done sporadically when the client happened to walk into a showroom. Based on this finding, I then designed an appointment feature to allow potential users to see a live demo.
Key Change C
Organize Information for easier navigation
The current product page contains an overwhelming amount of information, 70% of the users commented that they didn’t want to read through the information and 50% of user said that they still didn’t know or trust the product enough to reserve it. I reorganized the product page content by segmenting into three sections rather than showing all information on a single page. The three sections are as following:
Overview: Describes the product’s quality by showcasing the engineering that went into its design.
Dimensions: Uses an appealing product picture to show the actual size
Features: Uses iconography to show the benefits and the uniqueness of the product
Final Designs
The final design incorporates all my key changes and incorporates Starcity’s official fonts and colors. The high-fidelity prototype is shown below.
Landing Page
Product Page Flow
Next Steps
Starcity has again reached out to me to implement my high-fidelity prototype by pairing me with their in-house web designer. My next assignment includes setting up a photoshoot of Airloft to match the mood conveyed by the stock pictures in my prototype. I have been told that Starcity’s next goal is to release Airloft to the general public, beyond its members, so the website will need to be ready for a much larger release.