Journey to fullstack engineering - Week of Design.

#ux #programming #design

This is article is part of the journey to full-stack engineering series, My journey in building whole products as a one-man team — Hopefully.

2 weeks ago (review)

2 weeks ago I began this process of trying to create full products taking to view all aspects of the product development process, My aim is to simply build useful applications and encourage other engineers to have the entire product in mind when trying to build applications, be they part of a team of a one-man army.

Like I explained in the last article, I’m just a curious soul who happened to enjoy the process of learning and building software, therefore, I never really stuck to any particular aspect of development with a strict label, therefore I love to take on any aspect I have to. thus, code wrangler here. From the last weeks' article I decided to create a product, so here’s a brief overview of what the product is. I got a cool code name for it though, I like to call it Spectre — Like the James Bond movies.

A deployment management system for developers and teams to manage the deployment of code from the repository to the server.

Essentially spectre is quite equivalent to Laravel’s envoyer, but in our case, we would handle deployments for many different stacks and project types. e.g create-react-app projects, vue-cli projects, laravel projects (obviously), express projects, over time (with this entire thing being successful) I aim to integrate more stack types to the project.

Last week ( Design all the way )

So this week was focused on design and app structure, this is pretty much the very first step in developing applications for me. It gives me insight into how users would use the product and how it would flow with respect to performing its designated actions, for more user-focused applications like social networks and eCommerce, this process would pretty much be proceeded by process and sessions focused on customer analysis and user profiling, but in this case I didn’t follow through on those cause I pretty much know who my target users are — platforms and developers looking to push code and manage seamless deployment, without much technical overhead.

So with all set lets have a look at the proposed application structure.

I usually manage projects using trello to create broad overviews of weekly features and then using todoist in placing these into daily activities and development sessions be it code or design.

Homepage designs.

Homepage and landing pages are usually the places to really do conversion, and I wanted to create something beautiful, but at the same time simply and get the message across fast and quick, I intended to create a gif though which would display a sample of the app in use as part of the page setup but I didn't have that yet, so at the moment I settled for illustrations.
My skills with illustrations are pretty rusty though but I think I pulled some decent work on those. getting better with practice. here’s a preview, most of the designs for the project are available on dribbble

I think its still a bit rusty, speedy work here, but the home/landing page is going to be undertaking lots of changes as the project goes along, therefore I’m not trying to have everything in there on the first go.

Up next is the login and signup sections.

Login and signup

With login and signup, I wanted to have a different set of illustrations and go with the central card design, I think not many developers oriented products focus on design concepts like this so I wanted to do my best or whatever I’ve got rather in pulling this off.

For the most part, I think its okay, but there could be several adjustments and Improvements to be made to these sections, I’d love to get some engagement from designers in the house and see what they can make of these, hopefully getting some ideas of ways to improve on the concept.

For the most part, I’m going for a minimalist concept, the next section is the Home Dashboard where users can get an overview of their projects which are being managed by the platform.

Dashboard

This page would give the user a quick overview of their project or projects and help them get a broad overview of things, form the design, I intend that the dashboard handle on project overview at a time, as projects would handle servers and have collaborators, manage deployment hooks and offer consistency checks using heartbeats.

Although I think this page too could need some improvements and upgrades, for the most part, this is a basic overview of what it would entail, I’m working on improving as I go along.
next is the project settings.

Project settings

The above is the settings page for the projects, This section would allow users be able to manage their project details and change certain information and variables with respect to the project, same as the rest of the design process, it’s aimed to be minimalist and straight to the point.

This is the Project’s Server management system, this manages the servers the project is connected, it would allow users to be able to add, remove and update servers with new keys when needed.

This section would manage the collaborators of the project would the owner account have supreme control over the project, with the permissions to both delete a project, assign admins and limit other users access to the project.

Work in progress

At the moment the design process is still in progress and I aim to integrate whole functionalities into the project in order to have really usable products.
Other designs upcoming with relation to the project include the following sections.

Profile / Account management
- Profile Management
- Billing and Credit management
Project Settings
- Creating new server modal
- Adding new collaborator modal
Errors and Toasts
Improvements on
- Home page designs
- Dashboard designs

Conclusions

At the moment I’m still working the design phase, as a designer, it’s more about getting a feel of what the user experience using the application and making as intuitive enough as possible for them so they have a less steep learning curve in using the app.

A lot of these would come down to getting into the mindset, at the moment I’m predominantly thinking as a designer and usually, it’s usually a revealing process. For the most part, though I work on designs during the morning sessions, I have better energy during those sessions, focusing on code-based sessions during the late afternoon sessions. My primary design tool is Figma, not an advocate or something like that, I just really fancy the tool and actually rated it as a 10 in designing cool UI/UX experiences.

By the end this week, all designs with relation to the profile management would be completed and It would be a deep dive into the development processes involved in building out the solution.