Melodi

This project was a pre existing design challenge. Melodi, a music streaming service, is shifting to a freemium model and wants to convert free users into paid subscribers.

‍

Roles: User Research, Information Architecture, UX/UI Design, Prototype, Testing

‍

Project Duration: 9 weeks

Process

Problem Space

Melodi has decided to change to a freemium model and aims to convert free users into paid subscribers. However, the existing signup flow does not currently have compelling reasons to upgrade.

Solution

1. Enhanced Signup Flow: Redesigned signup flow for a user-friendly experience with eye-catching prompts to encourage upgrades.

2. Subscription Calls to Action: Integrated strategic prompts throughout the user journey to showcase premium benefits and features, boosting upgrade consideration.

3. Iterative Design Process: Continuously iterated design based on user feedback and usability testing, using wireframes and prototypes. Identified and resolved issues to enhance user experience and increase conversions.

Melodi aimed to boost conversions by implementing redesigned signup flow, strategic prompts, and compelling reasons to subscribe. The improved user experience successfully motivated users to upgrade, leading to increased revenue and user satisfaction.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Try Prototype in Figma

Research

Competitor Analysis

Spotify

Likes:
Offers a dedicated tab for premium plans, provides a list of premium features.
‍
Dislikes:
Small pricing information, presence of "FREE" can be misleading.
‍
Action Items:
Prominently display "Go Premium" and signup buttons, include a clear call to action for upgrading to premium.

YouTube

Likes:
Ability to compare plans, clear pricing, explanation of features, premium tab in settings.
‍
Dislikes:
Lack of call to actions, difficulty in scrolling through information.
‍
Action Items:
Make the "Try for Free" button more vibrant, improve the scrolling experience.

‍

User Interviews

Interview Guide

After analyzing our competitors, I wanted to better understand the users. So, I conducted user interviews. To make sure I got consistent information from everyone, I created an interview guide with a set of questions. This helped me gather valuable insights from all participants. I conducted these interviews online using Zoom.

Interview Objectives

Understand the factors that motivate users to pay a monthly free for a product.
Explore the reasons why users choose to invest in premium subscriptions.
Investigate the factors that influence users to remain a free user.
Identify the key elements that drive users to continue using a product.
Examine the behaviors or factors that lead users to discontinue using a product.

Analysis

Personas

The insights gathered from surveys and interviews laid the foundation for creating Melodi's persona. These insights primarily revolved around identifying recurring patterns and pain points, which deepened my understanding and empathy towards users.

User Flows

To accommodate users like Jane and Nicholas, I developed user flows to illustrate the various routes they might follow within the app. These flows show the choices and actions they can make, helping me understand their decision-making and any challenges they may face. Analyzing these flows has given me valuable insights into user behavior and areas that need improvement, guiding me in designing solutions that meet user needs and goals.

Design

Low Fidelity Wireframes

Following the user flows, I created low fidelity wireframes using Figma. These wireframes emphasized functionality and content layout, enabling quick iterations and feedback. This process allowed me to uncover usability problems and enhance the user experience before moving on to detailed designs.

Design Systems

Following first round of usability testing, I created a design systems. The design system was developed to ensure consistency across the entire app. The chosen color palette consists of bold and hip pink and purple tones, which create a young and visually appealing aesthetic throughout the design elements.

High Fidelity Wireframes

Using the design system created previously, I created my high-fidelity wireframes before the second round of usability testing

Sign up / Purchase a plan

Paywall as a free user

Cancelling subscription

Test

Usability Testing

I did a round of usability tests with 5 participants using the high fidelity wireframes. Here's what I found and what I changed based on their feedback.

Finding: Confusion or lack of clarity regarding the duration of free trials.
Change made: Clearly indicate the duration of free trials during the sign-up process and provide reminders within the app. This will help users better understand the trial period and avoid confusion.

‍

Finding: Presence of "upgrade now" button when already a free trial premium member.
Change made: Change the wording to “View details.” This will avoid confusion and frustration for users who may encounter this button and expect it to serve a different purpose.

Finding: Difficulty in finding how to change the subscription plan.
Changes made: Make the option to change the subscription plan more visible and easily accessible. One possible solution is to add a prominent button or link on the profile page specifically for changing the subscription plan. This will make it easier for users to manage their subscription preferences.

‍

Finding: Lack of an option to easily cancel premium subscription.
Changes made: Provide a clear and accessible option to cancel premium subscriptions. Similar to the upgrade option, include a button or link that allows users to cancel their premium subscription easily. This will enhance the user experience by providing a seamless way to manage their subscription status.

Final Product

What I Learned

User-Centric Design Process: I learned the importance of conducting thorough research, including competitor analysis and user interviews, to understand user motivations and pain points effectively.
Iterative Design and Testing: Through continuous iteration based on user feedback and usability testing, I discovered the value of refining designs to enhance user experience and increase conversions.
Strategic Implementation: By strategically implementing improvements such as redesigned signup flows and subscription prompts, I realized how small changes can significantly impact user behavior and ultimately drive business objectives.

Try Prototype in Figma

PostUp

This project was a design sprint with a pre existing design challenge. I chose PostUp. PostUp is a startup that wants to make it easier for freelance and remote workers to find spaces to work.

‍

Roles: User Research, Information Architecture, UX/UI Design, Prototype, Testing

‍

Project Duration: 1 week

Timeline

Day 1 - Map

Problem

‍ “PostUp wants to make it easier for remote workers to find great public spaces to work.”

During interviews, users identified the qualities they desired in a work space:

WiFi
Noise level
Group seating
Busyness
Restrooms
Images of seating area

Constraints:

Locations must be already existing
Must be designed as a mobile app
PostUp wants to charge $5.99 a month

Persona

Possible end-to-end experience

After understand the problem, I took the knowledge that I acquired and mapped out some possible flows a user might go through using an app to find a space. Below is the three possible routes a user might take.

Day 2 - Sketch

Lightening Demo

Before ideating, I did some initial research into existing platforms with similar informative processes in place. The two I decided to research are below:

Google Maps

Having a map would be very useful to visualize where the place is located.
Google has a “popular times” chart which also informs the users how busy the location is live.

AirBnb

The filter is clear and separated into different categories.
Airbnb separates each room and lists what is offered in each room.

Crazy 8's

After the competitor analysis, I proceeded to do the crazy 8's.

The crazy 8's is an exercise that challenges people to draw eight ideas in 8 minutes. I thought that the most important screen would be where the users look at the details of the locations.

Some difficulties I ran into was that the time constraints made me really have to think quick.
To the right are the eight ideas that I came up with.

Solution Sketches

From the "Crazy 8s" exercise, I selected a single crucial screen: the one displaying information about the space. Following that, I proceeded to sketch both the preceding screen (the map view) and the subsequent screen (the navigation initiation screen).

Day 3 -Decide

Storyboard

Following the solution sketches, I created a six screen storyboard. By storyboarding, I was able to visualize, evaluate, and select the most promising idea generated from the previous solution sketches. It helped ensure that the solution sketches aligns with the user needs and project goals before moving forward with the final prototyping and testing stages.

Day 4 - Prototype

Low Fidelity Wireframe

On day 4, I used to Figma to create my wireframe of my sketches I created during storyboarding. The screens below are the screens before I performed a usability test.

Day 5 - Test

Usability Testing

After I created the prototype, I needed to test how user would interact with it. Therefore, I interviewed and tested 5 participants remotely. The participants had their own experience of difficulties finding places to work. All participants were asked some questions and to perform some tasks.

Tasks

First, could you tell me how you feel about this screen?
Let's say you want to look for a place to work by yourself at a location you’ve never been before you meet a client. How would you go about that?
How do you feel about how the information is presented to you?
Let’s say that you wanted to find a location near you. How would you go about that?

Modifications based on findings

Point 1: Participants emphasized distance as crucial.

Solution: Include distance from current location in the location details.

Made the image larger
Included the distance
Increased the size of the text
Underlined interact able address

Point 2: Participants mentioned it was confusing where the current location was on the map. Also mentioned the map felt cluttered.

Solution:

Removed the little tabs and added a “Search this area”
Added a button to get you back to your current location
Added a blue circle to show nearby locations
Removed the outline on the search bar

Final Product

Refelection

Consistency is key
- Even small subtle differences, while not immediately obvious, greatly impacts the overall design quality.
Popular platforms shape user experience
- Users bring preconceived notions from popular platforms, which shape their experiences.
Wording can affect user experience
- Different words or phrases can change how users perceive meaning.

Try Prototype in Figma

Visualist

Visualist, a cloud-based platform for managing images and color palettes, was in the beta testing phase before its official launch. At this stage, Visualist sought to redesign a particular feature on its platform: the block detail card.

Roles: User Research, Information Architecture, UX/UI Design, Prototype, Testing

‍

Project Duration: 4 weeks

Process

Challenge

Client Overview

As Optonetic, a B2B company, primarily focused on sustaining existing client relationships. Recently, their goal was to increase potential clients by improving their online presence. They aimed to achieve this by improving the presentation of their services and products on their website. The objective was to make it easier for potential clients to understand the range of offerings and encourage them to reach out for more information or to initiate business discussion.

Challenge

The existing Optonetic website was not able to clearly differentiate between its services and products. Outdated design elements and absent calls-to-action affected user engagement and was not able to effectively communicate Optonetic's value proposition to potential clients. Optonetic sought to address these issues and improve the overall user experience.

Proposed Solution

The proposed solution addresses these issues as follows:

Clear Differentiation: Separate pages were created for services and products to streamline navigation and improve content organization, addressing confusion experienced by visitors on the previous website.
Prominent Calls-to-Action: A clear and compelling 'Contact Us' call-to-action was strategically placed on the landing page to encourage visitor engagement and facilitate lead generation.
Modern Design: The website underwent a visual transformation with a modern design visual, featuring simple layouts, and intuitive navigation to enhance user experience and align with Optonetic's brand identity.

Research

Competitor Analysis

During the competitive analysis, I observed that many direct competitors had seemingly outdated websites. While their information was straightforward, the aging demographic of engineers in the photonics industry (56% aged 40+) highlighted the need for modernization.

Lambda, for instance, offered detailed product specifications but lacked a clear call to action upon landing on their website. Consequently, I sought inspiration from different manufacturing companies, particularly Caldera Manufacturing, which presented a clear call to action, utilized complementary colors effectively, and employed icons for streamlined information display.

Lambda

Lambda offers detailed product specifications, providing in-depth information about their offerings.
clearly organized services and products.
Lack of a clear call to action on the landing page, which may affect user engagement and conversion rates.

Clardera Manufacturing‍

The call to action on Caldera Manufacturing's website was unmistakable, encouraging visitors to easily contact or request a quote, fostering seamless interaction and engagement.

The use of complementary colors on the website was well-executed, enhancing visual appeal and aiding in intuitive navigation.

Caldera Manufacturing effectively utilized icons to organize and present information, ensuring clarity and ease of comprehension for visitors browsing their website.

User Flow

The redesign process started by mapping out user flows to guide users seamlessly from the homepage to specific sections like services, products, capabilities, and contact information. Services and products were clearly separated, while capabilities were split into two sections using a dropdown menu. This approach ensured an intuitive navigation experience for users.

Wireframes

Sketch

During the sketches, I adopted a "crazy 8s" approach to sketching, allowing for rapid exploration of various design ideas. This method helped me generate of diverse concepts and layout options for the website redesign, encouraging creativity and innovation.

Low Fidelity Wireframes

Following the sketcing session, I proceeded to create a low-fidelity design based on the sketch I selected.

Landing Page

I was exploring different options on how to make the landing page present the information in simply but informative fashion.

Services/Products/Capabilities Pages

I selected sketches that I believed would effectively showcase the products and coating services, focusing on layouts that accentuated Optonetic's offerings.

Design Systems

Design systems were established to maintain consistency across all website pages, including typography, color palettes, iconography, and 8px grid system.

Final Product

Mobile Design

Reflection

If I Had More Time

Given additional time, I would focus on conducting usability testing sessions to identify any pain points or areas for improvement and making iterative changes to optimize the website's performance. Additionally, I would explore implementing additional features or functionalities to enhance user engagement and conversion rates, such as interactive elements.

Key Takeaways

Consistency is crucial throughout the design process. Maintaining consistency in design elements such as typography, color schemes, and spacing ensures a cohesive and polished final product.
Collaboration with front-end developers is essential to address any potential issues during the development phase. Clear communication and adherence to design guidelines help minimize discrepancies and streamline the implementation process.
Documentation and organization are essential for effective project management. Keeping thorough records of design decisions, iterations, and feedback helps maintain clarity and accountability throughout the process.

Visualist

Roles: User Research, Information Architecture, UX/UI Design, Prototype, Testing

‍

Project Duration: 4 weeks

Timeline

Problem

The Block Detail Card

The block detail card is a component of the Visualist platform that presents users with an image accompanied by relevant information. It serves as a focal point for users to view and interact with content.

Problem

When the team was onboarded, we received feedback from previous testing indicating that users found the current block detail card cluttered. They expressed a desire for better note-taking capabilities and users were not engaging with certain features as much as they would like.

Proposed Solution

The proposed solution addresses these issues as follows:

Clutter: Reduce clutter the interface by introducing collapsible sections, allowing users to control which information they view at any given time.
Notes: Implement ways for users to add notes directly to the image, as well as longer notes to the side.
Engagement: By streamlining the interface, we make it easier for users to focus on the actions they need to take.

Research

Competitor Analysis

We analyzed two competitors that , Milanotes and XTiles, which offer services similar to Visualist.

Milanotes

There are tailored templates that cater to various needs, such as event planning, academic organization, and more. These templates streamline the users tasks and adapt to your specific requirements.
Able to navigate effortlessly between different boards using familiar tab-based navigation, reminiscent of platforms like Google Chrome. This intuitive system ensures seamless organization and easy access.
Gives a Pinterest-like feel with the addition of small, visually appealing notes directly on the board. These notes serve as handy reminders and markers for the content.

XTiles

Navigation and all features are neatly labeled for easy access.
The ability to collaborate, share notes, ideas, and comments in real-time enhances productivity and teamwork.
The ability to sketch and draw on the space simplifies the process of adding annotations, highlights, and markups. This is especially useful for providing feedback and collaborating on visual materials.

User Flow

We started by mapping the current user flow of the Visualist product to identify its problems. Using this analysis, we simplified the process by removing clutter and overwhelming features. Then, we developed a new user flow for our redesigned product.

Wireframes

Crazy 8's

Now with a good understanding of the space, our team conducted a Crazy 8's session. This fast-paced brainstorming exercise allowed each team member to generate eight quick design ideas for the block detail card in just a few minutes, providing fresh perspectives. Below are the four sketches I drew.

Low Fidelity Wireframes of the Crazy 8's

Following the Crazy 8 brainstorming session, I proceeded to create a low-fidelity design based on the sketch I selected.

Sketch

After the brainstorming session, the team decided to create a sketch combining all our ideas. We simplified the user experience by removing unnecessary features and consolidating all information into a single, unified view. Instead of having separate tabs for Properties, Stickies, Edit, and Related, we aimed to enable communication through the use of 'stickies,' essentially functioning as comments on the image.

Low Fidelity Wireframe

Using the sketch, we created a low fidelity wireframe. We introduced multiple options for users to declutter the card, such as the ability to minimize the color palette and hide comments.
Additionally, we placed the information to the bottom of the card.

High Fidelity Wireframe

Prototype

Try Prototype in Figma

Test

Usability Testing/Findings

Now that we had a interactive prototype, we moved onto usability testing. We tested 5 participants all closely related with the interior design industry. Below is the feedbacks and suggestions we received from the participants.

Negative Feedback

Neutral Feedback

Positive Feedback

Solution

After project

With the updated insights, our team received a revised version of the block detail card. Even though the project was completed, I decided to create a final solution independently, based on the revisions. Here is the resulting image, which includes the following changes: moved the color theme to the right to maintain visual coherence.

Moved the color theme to the right to maintain visual coherence.
Adjusted the appearance of notes to resemble comments, enhancing collaboration.

Relocated the hide/display stickies and kebab menu off the image.
Retained the collapsible sections while altering the direction of the arrows.

Reflection

During our collaboration with Visualist, our goal was to refine the block detail card for an improved user experience.

What I learned:

Effective Communication Matters: We faced challenges due to communication gaps with the client, resulting in unnecessary delays. Clear and consistent communication is essential to avoid such issues.
Efficient Time Management: Given our tight schedule, I had to carefully allocate time for each task to ensure maximum efficiency and meet deadlines.
Task Delegation and Trust: This project taught me the importance of delegating tasks and having trust in my team members to successfully complete their assigned responsibilities.

Key Takeaways:

Research is Fundamental: In-depth research is the foundation of effective design. It helps us understand user needs and challenges.
Collaboration Fuels Creativity: Brainstorming and sharing ideas within a team spark creativity and result in innovative solutions.
Iterative Process is Key: Design is an iterative process. Constant refinement based on feedback ensures a user-centered outcome.

ExpireTrak

Introducing Expiretrak: Your solution for managing skincare product expiration dates. With vague labels like "expires 12 months after opening," it's easy to lose track. Expiretrak sends timely reminders so you never forget when you opened a product.

‍

Roles: User Research, Information Architecture, UX/UI Design, Prototype, Testing

‍

Project Duration: 12 weeks

Process

Empathize

Initial problem discovery...

Buying a variety of personal care products caused confusion of when the products were purchased or opened. In turn, caused confusion of the products expiration date or PAO (period-after-opening).

Test Prototype in Figma

Create a mobile app that can offers a user-friendly platform that empowers individuals to easily organize and track their personal care items, ensuring they are used within their safe and effective shelf life. This can be accomplished by:

‍Product Inventory: Users can create a comprehensive inventory of their personal care products within the app. They can input essential details, such as product name, brand, and purchase date.
Expiry Reminders: Allow users to set personalized reminders for each product, ensuring they never miss an expiration date.
Customizable Categories: Users can create personalized categories to better organize their products and improve accessibility.

Research

Secondary Research

First, before touching anything related to design, I wanted to dive into the market and exposure of personal care products.

White paper research

175.04 million Americans bought personal care products in 2020.
The personal care segment has a market volume globally of US$44billion in 2023.

Competitive Analysis

Since this space of expiration date tracking did not seem too saturated, I wanted to explore what was currently working and what could be improved.

To start, I began with a competitor analysis to assess the existing products in the market. I evaluated three apps with similar functionalities based on Nielsen's heuristics. The evaluation focused on consistency and standards, aesthetic and minimalist design, and recognition rather than recall.

The competition lacked intuitive design...

User Interviews

With the newfound information from the secondary research, I wanted to get first hand information from my target audience through user interviews.

Interview Goals

After the competitor analysis, I conducted a series of 5 interviews to gain user insight on tracking expiration dates for personal care products.

Goals:

1. To understand participants' habits and behaviors related to personal care product usage, including their awareness of expiration dates.

2. To identify any challenges participants face in tracking expiration dates and their attitudes towards using expired products.

3. To gather insights into participants' preferences for potential solutions or apps that can help them manage personal care product expiration dates more effectively.

Interview Findings

Analysis

Gathering insights

After collecting the recordings from the user interviews, I conducted affinity mapping to synthesize the pains identified. I organized these problems under common themes.

Persona...

Using the findings from the user interviews, I was able to create a persona with the themes from the affinity map.

Scenario...

I created a scenario that Jennifer (the persona) would encounter while keeping track of personal care products.

Design

Sketches and Guerrilla testing

With the solutions for the pain points that I have discovered, I created some sketches to layout my ideas. With these sketches, I created a prototype on Marvel and conducted a guerrilla test through ballpark.

Sketches to Lo-Fi Wireframes Revision based on Pain Points

Paint Point: Users expressed confusion regarding the sorting of products.

Revision: The addition of a “Sort By” function, allowing users to manually sort the products as desired.

Paint Point: Confusion distinguishing between expired products from non-expired products.

Revision: To address this, a new page specifically dedicated to expired products was introduced, enhancing user organization.

Paint Point: Confusion about the top X and check. Also, not enough options for images.

Revision: Removed functions that caused confusion. Also, implemented a new feature allowing users to take photos directly within the app, offering greater flexibility and convenience.

Design System & Style Guide

I established a comprehensive design system to maintain consistency throughout the entire project. Emphasizing a clean and simple interface, carefully selected colors were incorporated to ensure a cohesive and visually appealing user experience.

Test & Iterate

Revisions to the Design

With Design System in place, I created high fidelity wireframe and a prototype to test the design.
- 5 participants
- Primary goal: assess and understand the challenges users faced while using the app.
Then, with the pain points and made revisions to the final product.

‍Revision #1

‍Pain Point: The image was too small and the information was unclear due to the horizontal layout.

Revision: Revised the layout from a list format to a card format, featuring a larger image with text displayed below for improved visibility and clarity.

Revision #2

‍Paint Point: The placement of the information (date opened, period-after-opening, etc.) was difficult to see which date/text was associated with which title.

Revision: Changed it so the dates were under the title and made the color of the dates/text a lighter color from the titles.

Revision #3

Paint Point: Text was difficult to read because the text was too squished.

Revision:

Created more white space between the title and input text boxes.
Made a border around the text boxes to make it easier to distinguish
Removed the background color and border of the ingredients and notes text boxes for a cleaner interface.

Solution/Reflection

Final Product and Solution

Organize and Categorize

Have all of the user’s products in one place, a digital inventory.
Ability to categorize according to personal needs.

Product Information

Users are able input any necessary information about the product that is needed.
Personalized notes based on users’ needs (ex: Really liked the skincare because there was no fragrance).
Ability to see the ingredients.

Reminders+ Notifications and Calendar

Receive personalized reminders.
Have past reminders in the notifications, so that users won’t simply forget after getting rid of reminders.
View upcoming expiration dates on a calendar.
Straightforward which dates have passed or upcoming.

Sort and Filter

Be able to sort products in date order.
Filter products by category.

Reflection

Focus more on how to improve notifications and reminders through usability testing.
Always remember to design with intention.
I learned that I should always think about intention and how every element of the product could contribute to the end result.

Try Prototype in Figma