Summary
I supported in creating core features for a 0-1 Product, as the company wanted to create an MVP so that users can create digital products using words instead of programming.
Enhancing a Company App
Pre-seed Startup
Product Type:
Company Website
Our goal was to build a 0- 1 product to allow users to visualize digital products within minutes. The main goal of this project is to revamp the old website-application which was missing many essential pages.
For the purpose of this case study, we will be focusing on the project overview page and user profile page. The project creation process will not be touched on as it can be lengthy and confusing.
The Goal:
Provide missing functions to fulfill basic user needs and design the web-app to be more exciting and encouraging
UX Designer
Overview
Responsibilities:
Information architecture
Wireframing
Prototyping
UI Design
Visual Design
Role:
Some features I helped design
Core Product Features
Project Overview (My Projects)
Onboarding
Project Creation
Feature Creation
Wireframe Navigation
Administrative features
User Profile
Pricing Plan
Payments
In general, here’s how I approached the problem
Design Process
1. Understanding the problem
I attended requirements gathering meetings with stakeholders to acquire context so that I can understand the problems and features we needed to design solutions for.
2. Tackling design problems assigned
To work on my tasks, I referenced competitors to uncover how they tackled similar problems and design features. I also identified important heuristics that my UI designs need to achieve.
3. Designing & reviewing solutions
After learning from our competitors’ products, I applied what I learned into my designs in way that fits the context of our product. Following that, I would review with stakeholders.
4. Iteration & Testing & Iteration
Based on stakeholder feedback and from observing usability test sessions on my work, I refined my designs accordingly.
5. Developer handoff
After internal reviews with my senior designer, I handed my work to developers so that they can build the screens based off my designs.
1. Understanding the Problem
Gathering Requirements from Stakeholders
Features and problems were often discussed with a cross-functional team involving the Co-founders, Product Manager, design and development team. It was in these meetings that I gathered context into product and user issues.
Uncovering opportunities for product improvement
As I had fresh eyes into working on the product, I made time to explore and use the product. From there, I took note of things that could be improved upon to such as UI changes and user flows so provide a better user experience
Key Problems I helped identify
Project Overview page
There was no user profile page despite having a user profile icon. Not only was it misleading and confusing for users, users have no dedicated location to check and alter their personal details.
old project overview page | empty state screen
old project overview page | filled with projects
User profile page
Originally, there was no empty state screen when users start the app. This caused frustration and confusion because it looks like the app is loading when the users could have started on their projects
The original Project Overview page showed contents in a list view and did not have additional actions for users. The infinite scroll was inconvenient for users navigating pages with many projects
2. Tackling design problems assigned
Reviewing Competitors
As I’m focused on the project management page, I selected Google Drive, Webflow, and Miro. Although they are not directly AI-powered, they offer robust project management functionalities from which we can draw valuable insights and user experience best practices for our own project management page design.
Competitors analyzed:
Google Drive
Webflow
Miro
Mapping Heuristics
Different heuristics were referenced when designing the project creation page and user profile page.
Project management page
Prioritized Heuristic
I considered 6 heuristics but for this case study, I will touch on the 3 most prioritized 3 heuristics for project creation. Others that were considered were error prevention, match between system & real world and visibility of system status
Aesthetic & Minimalist Design
Keeping a page full of projects clean and organized was another priority to prevent users from being overwhelmed and frustrated.
User profile page
Prioritized Heuristic
As a user profile page has different needs and requirements from a project management page, I considered a different set of heuristics.
Flexibility & efficiency of use
When designing the user profile page, one consideration was to make it accessible and convenient for users from the navbar.
Aesthetic & minimalist design
I aimed to create a clean and visually pleasing layout that allows users to find their respective information effortlessly.
Consistency & Standards
By maintaining consistency across the project creation page, we ensure that users can easily navigate with confidence and familiarity.
Help Users Recognize, Diagnose & Recover from Errors
One of the app’s main pain points was a missing empty state screen that led to increasing confusions, which lead to considering this heuristic because it aligns with our goals
Error prevention
Through confirmation prompts and validation checks, I aimed to enhance user confidence and minimize the likelihood of user frustration
3. Designing & Reviewing the Solution
Creating Wireframes
LOFI | Empty state screen for Project Overview page
Project management Screen
LOFI | Project management
User profile page
New Screen | User profile page
New Screen | User profile page (edit)
Start Building button
‘Start building’ button was placed in the center of the screen so it it eye level for users. The intention was to get to make it convenient for them when searching for the button.
Page with projects
I changed list view to a grid layout because I wanted the view to be more visual. The thumbnails would use their progress or outputs as visual cues. By using visual cues, i hoped to decrease the visual burden of having to read through words.
Since users usually scan 4-6 grid items at a time, I decided 4 items per column was adequate.
Profile page
Designing a user profile page became a high priority so that users can have a personalized and accessible space for their personal details
Editing details
I considered error prevention w in designing this popup to minimize unintentional mistakes and frustration on the user’s end
Empty state screen
With heuristics in mind, I helped design an empty state screen to communicate to the user that there is no content and to prevent confusion. With an empty state screen, users would no longer have to unnecessarily wait
Side navigation bar
The top navbar was changed to side navbar for scalability and with consideration of more features being added in the future.
By focusing on flexibility & efficiency of use, access to the user profile was through the navbar to make navigation clearer and accessible for users.
New Screen | Hi fi of empty state screen
New Screen | Hi fi of project creation
User Profile Page
New Screen | Hi fi of User profile page
New Screen | Hi fi of edit profile
Image used
This image was used to evoke a sense of creativity and imagination. By featuring a globe, a symbol of exploration and discovery, alongside a person, we invite users to envision the endless possibilities and opportunities that await them within the platform.
New project button
The ‘New Project’ button was created to be a darker primary button so it would stand out more amongst a list of visual thumbnails, drawing user attention and encouraging them to initiate their creative journey.
Projects
I planned for projects to be organized based on recency to make it more convenient for regular users. Recent projects will be located at the top and next to the button and oldest projects will be at the bottom, allowing users to easily access and revisit their latest work and fostering a sense of progress.
User profile
User profile: User’s profile page had the most iterations as more requirements were provided by stakeholders to add company details, job title, industry and company size. We expanded the user profile page so we can gather user demographics and tailor the platform to their unique needs, enhancing the user experience and providing a more personalized service.
Edit profile
I discussed on allowing changes on all details consecutively to improve the the flow of information and make personalization more convenient for users, creating a seamless editing experience and empowering users to personalize their profiles with ease.
Iterating mockups
Using feedback from stakeholders, further iterations were made for to align with our goals.
Project management Page
Before
Project Overview - Empty State
Project Overview - Populated with projects
After
Key learning points
I learned it’s important to break down and prioritize tasks when taking on a large project. This is even more relevant for small teams that have to share more work load among themselves. Trying to work on all tasks at the same time leads to unfinished and and shallow products that did not take user needs into consideration.
Different features need to have a relevant structure and function relating to each other. it’s just like a human body - there are many different structures but their functions are integral to one another. For example a brain cannot function without a heart and vice versa. The brain needs oxygen and nutrients delivered from the brain while the heart needs relevant signals from the brain in response to the environment.
Being able to link different products would produce a stable and enjoyable product. However, it is easier said than done and I believe I still require more practice to achieve an enjoyable product.