How I Started With UI/UX -First Project Journey
There is a fundamental difference between UI and UX, as they are not the same. UI stands for User Interface, which includes how the product will look to the user (the visuals, buttons, etc). UX or User Experience, on the other hand, implies the working/interaction of the product whether it is an application, website, or a physical product. Think of it as a real-life example, what would you prefer for ketchup, glass bottles where we used to struggle for it to come out, or squeezable bottles with a nozzle which makes it easier to operate?
Thus, UX is all about, how it feels to use the product.
Below is an infographic succinctly showing my journey.
‘Beginning with an idea, and learning while building a project seemed like a practical idea to me.’
From brainstorming ideas and changing wireframes and the visuals again and again, to getting started with my first UX project. Here is the breakdown of my 4 weeks journey. Previously I wasted a lot of time online on so many courses and videos on how to get started in UX Design. When I was looking to start my journey, I came across Clique’s ‘Interestship’ post on LinkedIn in collaboration with Codess Cafe, Lotus STEMM, and IEEE Gujarat. Clique is a project-based community by the women, for the emerging undergrad women in STEM. It was a 1-month program, where you are paired with a mentor who will guide you throughout your project. Beginning with an idea, and learning while building a detailed project seemed like a practical idea to me.
Software Used — Adobe XD
Technical Skills Learned — Visual Design, Wireframing, Prototyping.
I created a User Interface targeting a specific user for an E-Commerce application — ECHO, a fitness clothing brand where users can shop their sports apparel. I used Adobe XD for designing and prototyping. That included-
- A Home Page
- Product Catalogue Page
- Product Details Page.
I read a bunch of articles and watched plenty of videos for a better understanding. You can find some of the resources that helped me during my journey at the end of this article.
Week 1
→ Created A User Persona And Learned The Basics Of UI/UX.
I designed a user-centric persona to map out what motivated our user, a 37-year-old working woman, to buy from ECHO. A persona represents a fictional user type describing their lifestyle, purchasing habits, buying experience, goals, expectations, and pain points among other things.
Below is an example of a user persona. I drafted this in the initial days.
→Produced A User Journey/Flow.
A user journey is a step-by-step blueprint of the experience of the user while interacting with the product. I mapped out all the processes and steps the user has to go through to find the desired products. For example, how will the user react on reaching the payments page along with the disintegration of their actions while browsing. Touched upon user’s pain points, emotional state, goals, and opportunities against every step.
After that, I sketched a user flow, depicting the physical journey of the user using flowcharts. User Journey and User Flow go hand in hand with each other.
Week 2
→Constructed Low-Fidelity Wireframes.
After all the elemental assets, I further jumped onto the low-fidelity wireframes. A low fidelity wireframe is a structural presentation of how the pages will look, defining spaces for images, texts, menus, etc for all the pages namely- the home page, and product catalog page followed by a product details page.
Above is the first iteration of what I created in Adobe XD
Week 3
→High-Fidelity Wireframes + Added Elements.
In the penultimate stage, the content application was performed. I added pictures, texts, breadcrumb text, and product details which included price, description, special care, and customer reviews. I transformed the low-fidelity wireframe into high-fidelity by iterating on it several times.
A high-fidelity wireframe is a result through which the user will be interacting. It is the advanced visual after applying all the necessary elements in the design at the end of the process.
After this, the process went swiftly and at a quicker pace.
Week 4
→ Prototyping And Final Visuals.
In the final step, I used the prototype feature of Adobe XD. This was a fun stage where I added animation to some of the interactions of the application. Watching the interactions working fine after playing with the animations was satisfying.
Conclusion
- To encapsulate, I designed a user persona, a user journey, and created low fidelity as well as high fidelity wireframes to produce the final visuals.
- During this one-month expedition, I acquired knowledge of UI/UX and built a project from scratch.
- Define the problem, ideate, design, and empathize with the users. In this way, I aimed to complete the process.
- I inculcated changes and added more features/pages to my prototype making it extensive.
- Additionally, I included -
- Payments and Order Page
- Login/Sign Up Page.
Bonus
As far as I have understood, UI/UX is for you if-
- You enjoy the process of learning and exploring.
- You like to find the path yourself rather than following conventional rules or copying others’ designs.
- Teamwork and communication are the keys.
- Researching and finding answers is something that intrigues you.
- Along with the visuals, you are equally concerned about the technicalities and functional aspects.
- You pay attention to the details.
Resources
Here are some of the resources that helped me in my journey, I hope this helps.
- Journey Mapping — https://www.nngroup.com/articles/journey-mapping-101/
- Material Design System — https://material.io/design
- How to wireframe for mobile in Adobe XD — https://www.youtube.com/watch?v=_OTev-M7leE
- Adobe XD Interactions — https://www.youtube.com/watch?v=sbBxmMwNDDU
- Usability Heuristics for User Interface Design -https://www.nngroup.com/articles/ten-usability-heuristics/
My beginner profile link to access my projects — Behance
