Designing the 1stDibs iPad App Experience
1stDibs is a global marketplace home to some of the world’s most exquisite furniture, art, fashion and jewelry.
In May 2021, we released the first version of our iPad App to 1stDibs shoppers. The design and development process spanned over a year and was done remotely with team members in three different time zones during the pandemic.
Opportunity: Providing buyers a robust iPad marketplace experience
The first version of our iPhone app was released over six years ago. Today, we maintain a 4.9-star rating in the App Store. Most features we offer to shoppers on our site are also supported on our iPhone app, and we devote additional resources to developing app-specific features as well.
Before the iPad app, 1stDibs had a growing engagement with iPhone app usage on iPads, as well as with tablet web usage. The iPad user base consistently demonstrated a higher rate of conversion, and as a result, we decided to focus more strategically on tablet.
1stDibs website on a tablet
- Functional but prioritized for desktop and mobile phones
- Smaller form factors, especially in portrait mode
1stDibs iPhone app on an iPad
- Functional but not designed to an iPad resolution
- Portrait-only orientation
- Letterboxing and pillar-boxing
To better serve our iPad users, we began working on a universal iPad app in spring 2020.
Discovery: Leveraging exploratory development work
Before we started designing, the team did baseline research into universal apps. Universal apps have many advantages. What we found most compelling about the universal framework was that it meant that there was one single codebase to maintain (between the iPhone and iPad experience) and that we would have the ability to leverage size classes. This helped us define and target instances where the layout of the iPad screens would be unique to the iPhone layout. Our iOS engineering director took an initial pass at seeing how this framework could be leveraged, combining mobile views in panels to create initial iPad views.
Research & Strategy: Observing industry patterns and creating design guidelines
Based on our discussions, findings thus far, and competitive analysis, we approached the design process with these principles in mind:
- Translate the content to a wider scale, without changing hierarchy or functionality
- Use larger imagery to keep buyers visually engaged
- For screens that are easier to use at a reduced width, show the content in a modal view closely resembling the iPhone scale (e.g. Checkout)
- Create custom layouts if the content warrants it (e.g. Homepage)
- Support both landscape and portrait orientations
Scoping, designing and building an iPad app is no small task, so these guidelines were useful in helping us decide what updates would be considered for MVP versus as a follow-on.
Design: Transitioning from Sketch to Figma
Next, with a clearer path forward for designing, another designer on the iOS team and I created wireframes in Sketch of the general layout of the major platform areas: home, search & browse, product detail pages, message center and account. From there, we reviewed the layouts with product, design and engineering stakeholders to gather feedback before proceeding with higher fidelity mockups.
By the time we were ready to kick off high-fidelity design work, countries were entering lockdown due to COVID-19. Like many businesses, we moved to working remotely. To ensure we were effectively collaborating, our design team decided to transition from Sketch to Figma. Figma is a cloud-based design tool that allows multiple people to view and edit designs simultaneously.
After deciding the general structure of the major platform areas, I started to build up the fidelity of all the screens by touchpoint. This meant defining the design of key components within the iPad experience that deviated from the iPhone, like carousels.
As I built up the fidelity, we held several reviews with the engineering team where we discussed the progress of screens, workshopped where certain patterns needed to be updated and discussed technical implications.
Reviewing & Testing: Partnering with engineering to execute the designs
Once we had the main screens and flows designed out, we began building the app. As with any project this large, questions and smaller edge cases came up during the development process. For example, we had a fair amount of discussion around split view behavior under certain circumstances.
Throughout development, design, product, QA and engineering reviewed several iPad test builds. We created a spreadsheet and process where we documented issues for team visibility, provided design recommendations and prioritized fixes.
Once testing concluded, we were ready to release our app into the world.
Introducing our iPad App
Homepage and Product Detail Pages
Both the homepage and product detail pages are examples of where we leverage a two-column approach above the fold to better feature imagery. These layouts deviate from the iPhone app interface.
Search & Browse and Favorites
Search & browse and favorites, which leverage the same item grid layout, are two platform areas that look similar in structure to the iPhone screen. The key difference is the additional real estate to show up to four items per row on an iPad.
Message Center
Like many messaging apps, our message center is a two-panel design where buyers can access their full Inbox in the left panel while reading and replying to an individual message in the right panel.
Checkout
Checkout is one part of the platform where we decided to consolidate the interface into a modal. This enables the user to scan details more easily and perform actions on the screen at a scale that more closely resembles a phone. This also helped us leverage existing iPhone views.
Next Steps
Throughout this process, our team sampled new tools, learned how to define an MVP for a project this large and welcomed five new team members.
Since the release, we’ve seen steady growth in new iPad users and sessions. Most importantly, we’ve increased engagement from our iPad users across the board. We are excited about where this will take 1stDibs in 2022 and beyond.
You can download the iPad app here.
Special thanks to the iOS team at 1stDibs, Michael Petry, Amy DeCicco and Ken Worley.
