Project Overview

Note: if you are using an iPad in the landscape view, you might feel the layout of this page looks strange. For the ideal reading experience, please use the portrait view on your iPad or use a laptop, I'm sorry for the inconvenience.

As a product designer, my biggest dream is to design and build products/features with a nice user experience to help end users with their work and life.

Luckily I've got a developer friend to work together on some of our ideas. Agora is the newest project I'm working on. We are aiming to create a multi-platform application to help our users better manage their digital lives. Currently we have finished the MVP design and released beta testing versions for both the iOS and Web platforms. And we are constantly making UX improvements to Agora.

Interested in the making of Agora? Let me walk you through the design journey of Agora.
Duration

Dec 2020 ~ Present

My Role

Product Designer
Project Manager

Platform

Mobile App (iOS-based)
Web App

Colleagues

Solo Designer, 2 Developers

Context

Partnership

Previously worked together, a designer and a developer. We both love designing products.

Personal needs

We installed many apps on our phones, use many digital services,  it’s cumbersome to manage different apps and services, can we just make it simple somehow?

Industry Trends / External Factors

Widget support since iOS 14 and macOS Big Sur
The popularity of New tab in Browser extensions increased

Initial Design Direction Emerged

Design & build a virtual product to help people better navigate through their digital lives.

opportunity / challenge #1

Questions we asked ourselves

Before committing to the actual project, we asked ourselves a few questions to make sure we were on the same page.

Design Direction

How to make sure we are in the right direction?

Business Strategies

How can we differentiate our product from competitors?

Technical Constraints

What features should we offer and why?
Which platforms should we target and prioritize?

Process overview

I use the double diamond diagram to guide my design process, it works pretty well in this project.

secondary research

Study products tackling the similar problems

We studied several apps within the categories of Widgets Apps, Shortcut Apps and, New Tab Extensions.

During the secondary research, we also tried to collect User feedbacks from other apps, including the most complaints, and the most requested features, we've got a lot of insights from this process.

We took these questions in our mind when analyzing competitors:

What can we learn from similar products?
Why some products are not doing so well?
Who are our target users?

primary research

Research Question / Objective

Get a basic understanding of average users' opinion towards customization on their digital devices and the need for productivity improvement.

Demographics

- Due to limited resources and budget, we conducted 10 quick user interviews with our friends, and colleagues
- Age from 21 ~ 35 years old
- Relevant knowledge about apps and web browsers

Interview Questions

We asked our interviewees about the notion of “Widgets” and “New tab extensions”, their thoughts about it, and their willingness to use widgets and new tab extensions on their devices; what pain points and suggestions do they have if they use similar products

synthesize / insights

Key Takeaways from Research

The design direction is solid/doable.
The need for customization is more desirable than the need for productivity, but they are not in conflict with each other.
We should find a balance between features we’ll provide and the development cost, aim for higher ROI (Return over Investment).
Reduce Opportunity Areas

Virtual Hub/Dashboard
Improve power users’ productivity
Offer average users simple customizations

Target Audience

Not only Power Users
Users who want to customize their Home Screens
Users who care about productivity

Product Scope

Multiple Platform Support: mobile (iPhone & iPad), Desktop
Essential Productivity enhancement
Light Customization options

Business Strategy

Pricing
Quickly Release MVP to validate our product

How Might We

empower users' digital lives by improving their productivity
and offering customizations on their digital devices?

ideation & Prototype

What our competitors are not doing well?

In which ways can we improve?

Define the “Essential information”

What digital information do users use most often?

Concept Exploration

Small & Medium widget: 3 components maximum
Large widget: 4~6 components

Data Integration

Which apps/services can we connect with?

Quick Validation

Willingness to use, Initial impressions, Feedbacks

Core Concepts

Widget with essential information

Desktop version

Mobile version

challenge #2 / Constraints

Bruno's concern

“I don’t know if we should build the iOS app now”

Bruno is an expert in back-end development, but he doesn’t have much experience in front-end development and Mobile Development.
Should we prioritize desktop over mobile platforms?
When & How can we build the mobile version?

challenge #3 / collaboration

We hired a freelance iOS Developer Vadim, that's great! But,

Bruno doesn’t want Vadim to know much about our design, so Vadim doesn’t quite understand what we are trying to build, what can I do to help?

When Vadim joins the team, we have this simple user flow for him to understand the concept of Agora, but he is confused because he doesn't have the same knowledge and context as we have.

So, I asked Bruno to work with me together to make a video prototype showing Vadim the concept and the interaction of Agora, which worked out really well for him.

Outcome / prototype

Beta testing version for both mobile and desktop platforms released.

For me, the biggest fulfillment of design is when people actually use my design and appreciate it.
During our beta testing, one user said this:
“I’ve been using it daily and ignoring the bugs and layout issues, I actually find it quite useful”
That made my day.

Note: we are working on private beta testing right now so I'll just share a preview of the screens, but I'll be happy to show you a complete demo or even invite you to the beta testing group if you are interested :D

Mobile app screenshots

Desktop app screenshots

Desktop prototype preview

For the ideal visual experience, please use the Figma link below:
https://www.figma.com/proto/9kCPwq

What I've learned

Project Management
Asynchronous Collaboration
UI guidelines / components
etc...

Next steps

Complete the design system, and maintain a consistent UI for both platforms
Public beta testing
Quantitative data analysis and iteration for UI/UX optimization
iPad version

Thank you for watching!

If you are interested in learning more about Agora or you'd like to join our beta testing group, let's get in touch!

Say Hi