Mobile App Design


Project Overview

In this project, I created a mobile application from scratch for the desktop application ChatGPT that mirrored its features and general design aesthetics while still fulfilling my design goals. Focusing on goals like profile creation, querying, and social interaction I designed 13 pages in total for this platform. This was my first mobile platform construction project, and there were many things that I learned while creating this design that will allow me to create better interfaces in the future.

Project Details

During my initial interest in design an app, I opted to develop an app from scratch for a website without its own application, rather than a complete app redesign. This approach provided me an opportunity to address the goals and requirements of the application. Ultimately, I chose ChatGPT, a website with minimal features, as the platform for my project, given its newfound popularity and interest from the public. When initially designing the low-fi wireframe for the app, I had to ask myself: What is the Goal of this app? I realized that there were a few:

In the end, I created 13 pages to fulfill these needs and beyond; Login, Create an Account, Query, Query Result, FAQ, Upgrade to +, Profile, Message Board, Profile, About Us, Contact Us, Previous Search, and More Search Options.

To keep the visual elements the same I also created a style kit that included the color palette, fonts, and font sizing that was representative of what ChatGPT’s desktop website looks like visually so that both platforms were cohesive. This was an important feature for me to keep because of the lack of an app via ChatGPT so that users of the desktop website would see the familiar visuals and be more at ease with using an app version of a desktop platform. 

First Sketches

Low Fidelity Wireframes

High Fidelity Wireframes

View the High Fidelity Wireframe Live Link Here:

https://xd.adobe.com/view/21ddb11a-86e8-45e7-a682-322059bcd605-748e/

Challenges

Some of the challenges that I faced were less in the department of designing the wireframes or coming up with page ideas, but really in the application of Adobe XD itself. Having only a few months of guided practice, using the application on a new project with no direction proved to be a large hurdle for me initially. Once creating the low-fi wireframes, this mounting task seemed much more manageable, but the application of practiced skills was something that I did have to take some extra time to make sure I got right. Examples of this include components, scroll features, hover states, and toggle states. 

Having taken the extra time to practice and perfect the processes of all of those challenge items in my Adobe XD practice, I’m happy to say that I am much more fluid with my process of creating many of those elements. Even though some things still take me time to perfect, toggle, and hover states, I can still get them to work correctly and look visually appealing in the final product. 

Advice for the Future

The advice I would give to myself in the future if I was to continue this project would be to conduct user testing as soon as possible to better test the menu functionality that I had initially designed for real-world applications. I think that there’s something to be said about the desire to design something that looks unique and interesting, while still maintaining functionality within an application or website design. When I initially started this project I found myself working heavily to make the visual design as aesthetic as possible, and in the future, I think that a better way to approach it is to focus on designing from the traditional 5 planes of User Experience. Learning my faults in this design piece has taught me that I will have to make a point to focus on the scope and structure planes before even allowing myself to think of the skeleton or surface planes. Doing this direct distinction in the future I believe will help me mentally separate the ideas that they require, creating both a functional and beautiful design.