overview
Soul Machine’s core customer-facing product, Digital DNA Studio, a platform for creating custom AI avatars, historically had large corporations as its primary user base. However, when I joined the company, Digital DNA Studio was undergoing sweeping changes to its UX and UI to break into the creator market. A dedicated landing page and login flow would allow potential customers to explore the product and its features.
What Did I Build?
I designed a new landing and login page for Digital DNA Studio. I made the language accessible to users without previous knowledge of Soul Machine’s products, and I made the visuals express a sense of multi-dimensional space. Call-to-actions placed throughout encourage users to seek out information about Studio beyond the landing page. Micro-interactions engage and direct users' attention.
the problem
Digital DNA Studio was originally built for internal use and thus was constructed without much thought for users who were not already familiar with the product and terminology. Soul Machines did have a website, but the page for Digital DNA Studio lacked context and was tucked away in the “products” tab. Support for new users was minimal, and they had little way to find out more about the product and its features with the tool’s barebones design.
The old login and website looked outdated
Goals
I wanted the new users to easily discover and digest information about Digital DNA Studio, and for Soul Machines to successfully shift from enterprise to consumer customer segments.
design audit
I identified many areas of improvement through a design audit I conducted on all of Digital DNA Studio’s features and pages. But after talking to some team members, I discovered that Studio uses a 3rd party authorization platform, Auth0, for the login. After researching more into Auth0, I began to grasp its limitations. I could only customize certain features of the login page, such as alignment, background image, and colors. Thus, I began to narrow down my design ideas and readjusted my focus to designing a landing page, as I had much more flexibility there.
It is difficult to tell that Digital DNA Studio is the core product
Barebones login screen not updated with new Auth0 features such as password preview
Jargon geared towards enterprise customers instead of our new customer segment
Wireframes
After figuring out the main structure of the page, I was only halfway there. I spent most of my time making small design and verbiage changes. Since Soul Machines did not have a designated copywriter, I took it upon myself to devise a new tone of voice for the website. Crafting compelling copywriting was the most time-intensive part of designing the landing page, as it was brand new to me. The writing needed to be scannable, concise, and catchy. It took many iterations to reach that snappy tone.
visual Design
A designer on my team, Sonia, created a Digital DNA Studio brand identity concept, which guided my landing page visuals. Throughout the page, I incorporated the genome sequence element and vibrant color story whilst maintaining consistency with Studio by using the company design system. As I added color to text, I consistently checked and tweaked colors in accordance with Web Content Accessibility Guidelines (WCAG). My manager encouraged me to go bold with the graphics, so as to set a visual precedent that can be scaled back later if needed. Thus, my final prototype included full bleed images, GIFs, and animations.
FInal Solution
Reflections
If I had more time, I would have completed the mobile and tablet versions of the landing and login pages and gotten more design and usability feedback from non-Soul Machines employees. Nonetheless, my time as an intern at Soul Machines was delightful, and I genuinely appreciate the opportunity I got to learn and grow my skill set.
key takeaways
1) Seek feedback often. It was eye-opening to hear other’s opinions on my designs. The longer I stared at my work, the harder it was to see opportunities for improvement. The more frequently a fresh set of eyes viewed my designs, the easier it was to implement their feedback. I benefited greatly from weekly chats with my manager and the other designers.
2) Impact first. When I conducted a design audit of Digital DNA Studio, I noted many small imperfections–misaligned pixels, minor bugs, etc. However, at an early-stage startup like Soul Machines, it was not practical to expend resources on fixing minute issues with minimal impact on the overall user experience. It was better to focus on overarching problems.
3) Storytelling is everything. From creating the landing page, to writing this case study, storytelling is at their heart. People want to feel immersed in an experience. Each piece of information you add needs to serve a purpose.
Impact
A year after my internship, Soul Machines has a sparkling new website where the impact of my work is clear. The graphics are modern, appealing to a younger, tech-savy consumer base. The navigation is streamlined, and where there were previously 20+ links, only five remain. Additionally, the written content is now accessible to new users, replacing the confusing company-specific jargon. It is incredibly rewarding to have made an impression on Soul Machines and our new customers!
