This digital startup needed a complete brand overhaul and a friendly, approachable user experience for a web app on both desktop and mobile.
This project coincided with a personal desire to experiment with incorporating AI into my design workflow.
To no one’s surprise, it was incredibly helpful to my process and I was able to provide far greater value to a client on a startup budget.
Below is an informal case study of my process in roughly chronological order.
"AI isn't going to replace [designers], but designers that use AI are going to replace designers that don't." -- me paraphrasing something smart I heard --
SURE.social approached me to do an initial pass at their overall branding and app design in an effort to get VC funding. This coincided with a personal desire to experiment with incorporating AI into my design workflow, since it’s dramatically changing the landscape of the tech industry (or so my nana tells me).
Having already built most of the back end, SURE needed a brand look and feel, a logo/icon, and a friendly, approachable user experience for a web app on desktop and mobile. I agreed to the project under the condition that I would be utilizing AI to aide in the process wherever I could.
To no one’s surprise, from start to finish the combination of ChatGPT and Midjourney was insanely helpful to my workflow. Below is an informal case study of my process in roughly chronological order.
This project coincided with a personal desire to experiment with incorporating AI into my design workflow.
To no one’s surprise, it was incredibly helpful to my process and I was able to provide far greater value to a client on a startup budget.
Below is an informal case study of my process in roughly chronological order.
Color Palette and Typography
I leaned into Midjourney for visual ideation, creating far more choices and variations for the client than ever would have been previously possible, and in a fraction of the time.
ChatGPT afforded substantial time savings with things like list automation, but was especially useful for making fast, data-driven decisions, turning hours of design research and prep into minutes of prompting.
Logo and Icon
Utilizing AI for ideas and imagery, I was able to generate, visualize and iterate on dozens of ideas within a matter of hours. This not only translated to substantial time savings, it also enabled me to provide the client with more choices that had a wider breadth of creativity/diversity.
In relatively short order I was able to get approval from all the stakeholders on the most challenging and ambiguous aspect of the project.
Logo and Icon
Utilizing AI for ideas and imagery, I was able to generate, visualize and iterate on dozens of ideas within a matter of hours. This not only translated to substantial time savings, it also enabled me to provide the client with more choices that had a wider breadth of creativity/diversity.
In relatively short order I was able to get approval from all the stakeholders on the most challenging and ambiguous aspect of the project.
User Flow and Wireframes
After some creative prompting with ChatGPT, I was able to produce an outline for the website that was 90% complete, which in turn sped up the creation and approval of the user flow considerably. From there, creating the wireframe prototypes in Figma was fairly straight-forward, albeit not yet AI-automated, unfortunately.
Overall Design
SURE.social aims to change the way people approach online identity verification altogether. In line with this, the client wanted their brand identity to stand out and make an impression. One major way I accomplished this was by employing a dark theme with bold, retro colors in an otherwise light-themed, corporate, green and blue industry.
Overall Design
SURE.social aims to change the way people approach online identity verification altogether. In line with this, the client wanted their brand identity to stand out and make an impression. One major way I accomplished this was by employing a dark theme with bold, retro colors in an otherwise light-themed, corporate, green and blue industry.
Homepage User Experience
One of SURE’s biggest challenges is succinctly explaining what they do and what sets them apart from similar services. On one hand, the homepage needs to be easily understandable and not overwhelm the layperson. On the other hand, things need to be detailed and specific enough to appease curious and tech savvy users. To provide the best user experience for both, I employed a combination of tooltips and use cases.
Drastically reduced the amount of text we initially hit users with, in an effort to make content approachable with the option to explore details.
Use cases are a good way to provide the user a hypothetical situation they can insert themselves into, without having to understand everything about the product. By detailing out the top 3 use cases, we are able to target 95% of unregistered homepage users with information about why SURE is right for them on a personal level.
Homepage User Experience
One of SURE’s biggest challenges is succinctly explaining what they do and what sets them apart from similar services. On one hand, the homepage needs to be easily understandable and not overwhelm the layperson. On the other hand, things need to be detailed and specific enough to appease curious and tech savvy users. To provide the best user experience for both, I employed a combination of tooltips and use cases.
Drastically reduced the amount of text we initially hit users with, in an effort to make content approachable with the option to explore details.
Use cases are a good way to provide the user a hypothetical situation they can insert themselves into, without having to understand everything about the product. By detailing out the top 3 use cases, we are able to target 95% of unregistered homepage users with information about why SURE is right for them on a personal level.
Dashboard Design
The conventions material design uses to effectively communicate depth/elevation in a dark theme was just the right starting point for the dashboard design pattern. When combined with uniform type scales and color ramps, a consistent visual hierarchy naturally developed.
Everything in Figma was responsive, based off an 8x pixel grid, with breakpoints for mobile and done with auto-layout for an easy handoff to the developer.
Dashboard Design
The conventions material design uses to effectively communicate depth/elevation in a dark theme was just the right starting point for the dashboard design pattern. When combined with uniform type scales and color ramps, a consistent visual hierarchy naturally developed.
Everything in Figma was responsive, based off an 8x pixel grid, with breakpoints for mobile and done with auto-layout for an easy handoff to the developer.
Developer Handoff
Handoff included a Figma combination design pattern/component library/brand guideline master file. This included things like final deconstructed designs, widgets, UI buttons and components with variants, text styles, type scales, color styles, color ramps, effect styles, etc.
In this manner, the rest of the app could then be designed without having to pay me to pixel push every page (startup = on a budget). The app is currently in development.
Final A.I. Takeaways
It’s safe to say I’ll be using AI for a long time. (Pictured left, me fondly remembering the screech of a dial-up modem.) I’ve only scratched the surface, but even in this initial foray the value it provided me was game-changing.
I can’t say exactly what the future of AI in design will look like, but I can say that in an age where it’s becoming impossible to tell the difference between people and AI bots, verified online identity SURE is going to become important. ; )
Final A.I. Takeaways
It’s safe to say I’ll be using AI for a long time. (Pictured is me fondly remembering the screech of a dial-up modem.) I’ve only scratched the surface, but even in this initial foray the value it provided me was game-changing.
I can’t say exactly what the future of AI in design will look like, but I can say that in an age where it’s becoming impossible to tell the difference between people and AI bots, verified online identity SURE is going to become important. ; )