Laxis is the next generation of AI meeting assistants. The company aim to capture meeting notes with accurate transcriptions to help everyone benefit from more effective meetings, then automatically analyzes the transcripts so users can provide actionable insights across all their conversations. Before developing the iOS application, I created this motion graphics promo video to introduce the features of our current web application as well as our google extension.
I was responsible for designing the key function pages which are conversation page, user profile, my plan and pricing page for the iOS app. Below is the current web application for each page, I came up with four opportunities on how I can translate the web to mobile experience:
1. How might we help users to sort their conversations by updated time, name, duration and date?
2. How might we combine the important information of users in the profile page?
3. How might we use a more visual appealing way to show their plan status and meeting available?
4. How might we design different user experience flow to improve user engagement based on their different pricing plan?
I started from competitive analysis, content strategy to prototyping of the key function pages. Our task was to think further than the screen and to solve for the system as a whole. I separated my plan and pricing plan to different pages to first give an overview of their subscription status and added a more engaging way to visualize their current data. The solution is an interactive application that's more accessible for users than the web application.
I first did some research on how iOS device upgrade/downgrade their plan in their system. I found out users need to go to Apple store to cancel or change their subscription instead of using the app itself. The user flow is also different depending on if users upgrade their plan on iOS app or web application. After the discussion with the product design team, software engineers, and CEO about potential solution for user’s pricing plan, I designed this user flow of a step-by-step process of upgrading and downgrading their plan to improve the users’ needs. This allowed me to understand the whole information architecture that need to be developed and think more logically of how the platform would work system-wide.
Before we began iterating the fidelity of our prototype, we created a design system followed the material UI guidelines to ensure consistency and clear hierarchy across the iOS design.
For the color palette, I choose the brand color blue as the primary CTA color as well as the icons. I added two different shades of blue as the secondary colors throughout the app.
We followed the same font as the company's guideline. Roboto was our primary font, with different sizes and weights to indicate information hierarchy.
With the design system in place, I was able to overcome those challenges and create a high-fidelity design with color and typography in hand. I created an interactive prototype of these key features to meet both the users needs and the business needs.
Adding a sort feature in the conversation page can help users easily sort their conversation by updated time, name, duration, and date. The down arrow next to updated time indicates the conversation is sorted from most recent time to oldest. Users can also search the conversation by entering the keywords or meeting name in the search function.
If you like what you see and want to work together, get in touch!
jane@portfolio.comIn the profile page, users should be able to see their current subscription and their personal information. I embedded an upgrade button next to their subscription so it will remind users to upgrade if they want more meeting transcription. Having an updated button on the right can help users immediately see their changes after finish editing their profile information.
If you like what you see and want to work together, get in touch!
jane@portfolio.com
Since the user plan and the pricing plans are all in one page for the web version, I wanted to make it clear for users so they can see their plan status and how many meetings are left. If they are on basic plan, they can choose to upgrade their plan to Premium and swipe to see the available plan for both monthly and yearly. There'll be a pop up window telling users to visit apple store to change their subscriptions.
If you like what you see and want to work together, get in touch!
jane@portfolio.comBefore we launched laxis on Product hunt, I created the visual design illustration for our product hunt page. These illustration highlight the main features of the web applications including before, during and after the meeting. Users can set pre-meeting topics and agendas, take notes and get real time transcription during meetings, and get valuable conversation insights after the meetings. Check out our page here: https://lnkd.in/g8R54wVD
During this process, I've learned how iOS system work and apply material UI knowledge in creating the mobile design system. It was a unique and valuable experience for me working with key stakeholders because it allowed me to learn how to communicate with my ideas effectively and convince them to take this concept forward.
This is my first time designing an iOS device and I was able to think more systematically. If I have more time, I would do more research on the UI elements on mobile device and iterate as much as I can. Due to the limited resource and time, I didn't have the chance to do enough research on the user problem, I would do more usability testings in order to get more feedback on our published app.
