Project Overview
As part of my work with Specter Technology as a freelance UX designer, I contributed to the ground-up UX design of an in-development mobile application, AutoBio Forge, aimed at facilitating autobiography writing using AI technology. I conceptualized new visual design ideas for AutoBio Forge, including new UI wireframes and branding.
Timeframe
Ongoing
Role
UX Design
Wireframing
Logo Design
Platform
Mobile
Final Screens
Problem
AutoBio Forge is a mobile application that is in the early stages of development. As such, there was a need to create UI concepts, as well as improve the current structure of the app. The target audience for the app, as outlined by the client, was older, less tech-savvy users. Therefore, they needed to ensure these users were being catered to in the app's UX design.
Further, as there was no current ideas for AutoBio Forge's branding, such as a logo and brand colors, there was also a need to define these aspects for the application as well.
Goals
There were three major goals to complete:
1. Identify areas where UX improvements could be made to improve the user experience, based on the target audience's needs
2. Create new UI concepts for the app using the findings from the UX analysis
3. Create a logo for AutoBio Forge and define a color palette for the brand
Competative Analysis
I conducted a survey of UX from other apps that use AI technology for text generation before I set out to work on the branding and UX concepts. From my research, I found 3 commonalities between popular apps in this space to work off of:
Commonly, plain UI focusing on text
Dark mode common, but light mode apps are white with simple colors for hilights
Colors palettes are reminiscent of modern chat software like Discord
While I did want to ensure our app looked like it belonged in the space, I also wanted to make it stand out from other apps like it. So, I took note of these trends, but also used them as a launch-off point for improving upon the types of designs that are common for AI text-generation apps.
Defining our UX Principles
Before I began my full UX analysis on the current state of AutoBio forge, I first defined what UX principles I though we should emphasize based on the kind of users the client wanted to target, namely older, less tech-savvy users. I identified 3 UX principles to focus on in order to create an optimal user experience for these users, and then identified how these principles could be realized as in-app features.
Discoverability
It is clear and concise what actions are possible on each screen. For less tech-savvy users, we want to ensure they do not get frustrated with not knowing how to proceed as they go through the application.
​
How to Implement:
-
Clear labeling of buttons and sections
-
Users should know exactly where they are and how they can traverse the app.
-
-
Good use of Call-to-action (CTA)
-
Attention-grabbing color palette so eyes are easily manipulated to CTA
-
-
Strong visual hierarchy
-
Keep all options visible on screen, don’t obscure them in menus
Feedback
Clearly communicating to users when their actions are recognized. Lack of response could lead to confusion or frustration.
​
How to Implement:
-
Components like buttons visually change after users have interacted with them
-
Loading icons when system is buffering, loading or saving
-
Indication when progress has been saved
Constraints
Restrict the amount of interactions on each page to reduce the cognitive load on users (spread things out).
​
How to Implement:
-
Allow space for each interaction in the app, such as the areas where users will answer questions
-
Explore what other structural options we can use for screens to allow for a more digestible experience
UX Analysis
Using the aforementioned UX principles as a guideline, I then looked at the current screens for AutoBio Forge, and identified areas where the user experience could be improved. These changes would then later be added to my design drafts. In its current state, the main screens of the app were all formatted the same but with different content on each screen pertaining to what information the user would be providing, so there was only a few screen formats to focus on.
Log In Screen
Story Screen
UX Design + Screens
Using the findings from my analysis of the app's current screens, I then set out to design new design concepts for AutoBio Forge's main screen flows. Since the app is still in development, I was asked to create concepts just for the current screens they had identified they would need, namely the Log In screen and the Story screens.
Log In Screen
Maintained content of initial design but cleaned up the interface.
Click image to expand
Story Screen: Chapter 1
One question takes up the majority of the space on the screen, but we can see there are more questions below if they scroll. Scroll bar on the side indicates how far into the page they are, and bottom navigation allows them to go back and forth between chapters.
Click images to expand
Story Screen: Chapter 2
Progress is shown using the bar at the top of the screen. Here, we can see the user has completed 1 of 6 chapters, and is now on the second one.
Click images to expand
Branding
Color Palette
Click image to expand
My initial ideas for the color palette was to lean into the "techy" green and purple palettes that were common in the other AI text-generation apps I surveyed, but to make the colors a bit more saturated so as to feel "futuristic". I opted for a blue instead of purple, so as to create a bit of definition from the trends of the space. Text was kept to neutral blacks and greys for readability, and red was added as a contrast color for items needing attention.
Lastly, before finalizing the palette, I checked that they complied with color blindness and contrast accessibility requirements.
Fonts
Specter's UX design guidelines asked that their freelance clients use google fonts for their projects. I decided on using a mix of Poppins for headings and titles, and Nunito Sans for body text. I chose these fonts for their ease of readability, as well as their sleek look, which went well with the image the client wanted for the app. I then created a font usage guide based on the styles I intended to be used in particular areas.
Click image to expand
Logo
Once I had the color palette and font style for AutoBio Forge set, I then moved on to creating a logo draft. Specter had asked that I provide a logo concept for them to work with along with their branding. From the image that was on the log in screen of the app's initial design, it was clear to me that the client wanted to emphasize the "written" aspect of the app through the use of pen and book imagery.
Screenshot from the initial AutoBio Forge Log-In screen
My first attempt at creating a logo, I added imagery for a pen tip to the end of the "e" in "Forge", and placed a book behind the text. However, I decided that the addition of the book made it feel too much like a literary app, so I oped to remove the book and place the text differently. Lastly, I added a low-opacity streak to the pen-tip "e" to make it look like the "pen" was "writing". I felt this also aided in adding dynamicism and a futuristic feel (think: Tron bikes). I had added a streak to the other side of the text as well to try and create balance, but ultimately decided to remove it and center the text as I felt it was too much.
Initial design with book imagery
Removal of book imagery and addition of streaks
Final Logo Design
Click image to expand
Conclusion
I recieved positive feedback from the client on these initial screens and branding items, but we are yet to move on to the next stage of making changes to these items. I will continually keep this page updated as more rounds of designs and changes are made.