Rendition
Optimizing an AI based code generation application for more intuitive use.
role:
UX Research
UX Design
team:
Robert Nowell - Rendition CEO
Irene Pham - Product Designer
CONTEXT
Renditions ease of use impacts customer retention
Rendition is aiming to speed up web development time by leveraging AI to generate code for components. They seek to stand up from their competitors with both a superior generative model and an intuitive user interface. However, their current UI is unintuitive to it’s users and lacks consistency.
This sparked the question: how might we design an intuitive and consistent experience for developers?
DISCOVER
User Persona
Next, I looked to understand Rendition’s user base.
About
Age: 20-35
Role: Beginner level front end programmers including: Indie developers, start up founders, product designers, and product managers
Motivations:
Quickly develop MVPs, prototypes, or projects from ground zero
Pain Points:
Not experts at react or styling front end components. Limited time.
Observing User Interactions
I spent time observing users as they navigated the site and used Rendition to convert a Figma component into code. Below are samples of feedback received.
"Forking is really cool! But where did the forked version go?"
"Cool you can share! Alright I think that copied the link to my clipboard? Yeah I guess it did."
"I’d expect the Profile tab to lead to settings, not my projects."
"What does this “@combine assets” message mean. I’m just a newbie at Figma"
DEFINE
Our Goal: Improving Consistency and User Feedback
Based on user interviews 2 key insights and areas of focus were gained.
1) Rendition lacks consistency within the application and with design patterns commonly seen in other apps
2) Rendition has gaps in providing user feedback which often leaves users confused or unsure.
DEVELOP
Ideating: Wireframing a New Homepage
Next, I ideated on how to improve consistency and user feedback based on observations from usability test. One major area of inconsistency was the design of the homepage. Rendition users are familiar with tools like Figma and gDocs where the homepage shows their files. Rendition currently shows their prompt to code feature on the main page which is inconsistent with user expectations.
DELIVER
High Fidelity Prototyping
Here are changes I made to increase consistency and user feedback in Rendition’s user experience.
Personalizing the Homepage
Before
Users expect to find their files on the home page. Only examples are shown.
After
I modified the homepage to include the users recent generations for quick and easy access.
Clarifying Share Button Behavior
Users expected the share button to open up a panel to enter the email of the person they wanted to share the generation with. Instead, when clicked the share button indicates success and copies the link to the clipboard but doesn't indicate that to the user.
I added a notification after the link was copied to ensure the user understood the effect of their action.
User's Profile vs User's Projects
Originally, the profile page contained the user’s projects. However, users expect the profile tab to contain their personal information and were confused.
The page was renamed “My Renditions” to make it’s content more clear.
User's Profile vs User's Projects
Originally, users don’t know how many credits were being consumed each time they regenerated the component leading to feelings of confusion and lack of trust.
I added the number of credits to the "regenerate" button to make the cost clear to the user.
User's Profile vs User's Projects
Originally, the profile page contained the user’s projects. However, users expect the profile tab to contain their personal information and were confused.
The page was renamed “My Renditions” to make it’s content more clear.
User's Profile vs User's Projects
Given that users tend to be indie developers and not expert Figma users, directive to use @combine was confusing. I removed the hint so as not to confuse them.
Next Steps!
The team is currently implementing the changes and refining the code generation model as they continue to discover the best use cases for the technology.