UX/UI practice review

Website redesign process explained — Exercise 1

Let’s start by asking questions Why? How? and What?

Why? — Why I do this ? 🤔

Honestly, my way through UX/UI design is not like smooth at all. I’ve been tried to get inside this industry with lots of struggles in life. I didn’t have proper design background and received enough educational resources when I was younger.

Basically, I taught myself through articles regarding what’s UI/UX design and get some experience through volunteering and internship as an UX designer. However, because of lack of proper resources and opportunities, it’s been a while I’ve struggled at the same positions without too many breakthroughs.

I think it’s time for me to make some improvements and changes 🥸.

At the same time, I assume there are also some designers who struggle themselves at the beginning. Maybe it would be the chance for us support and grow up with each other. 🤝

How? — How to approach the exercise? 🎯

There are already tons of tutorial/courses about ‘how to become UX designer from 0 to hero’ in the market, and I was one of those who tries to go all the way down till the last minute of the course. However, obviously, I’m not yet “Hero” ☹. The main reason I guess is that by following through those tutorials, one can only get a sense of how things work, but never get to deeply practice our muscles by getting to know “why it doesn’t work”.

There may be only one way to success, but lots of way to fail! And everyone has their own methods to experience failure. But only when we conquer those failures, we can grow up to a different level. 🚩

So, I decided to make my own plan for practicing on a regular basis. My plan is definitely not perfect but the message I’d like to convey here is :

Develop our own plan and stick to it → you will meet lots of surprises 🌟

What? — what should I do for exercises? 🏄🏻‍♀️

As we know, before getting into design anything, we need to set up the persona first, I’m now here to design a grow-up package for myself (probably someone has similar experience). Here is it:

Now that we have the persona, we can tell that she has a goal for developments, but the biggest obstacles here are:

• Lack of motivations → Procrastination.
• Lack of mentors & methods → Feeling unconfident, don’t know where to start.

So the solution I came up with is :

One can never reach a goal without running away from a starting line. 🏁

Before, I kept browsing unlimited design inspirations from Dribbble, Behance and Awwwards ect… But I barely start to exercise myself. Maybe things will start becoming different when I try out.

So I made the rule for the exercise :

1. Make a topic myself every week and only focus on that during the week, so I will be more focused without too many distractions.
2. Set time limits for each exercise to prevent procrastination.
3. Deconstruct bigger topics to smaller ones, so it’s easy to do time management.

I was kept asking myself one questions:

What to design?

In order to answer that question, I kept asking why until I got the answer:

1 Why: WHY we need design? what’s the purpose of design → Design is the creation of a plan or convention for the construction of an object or a system.

2 Why: since design is a form of creation, then WHY we need to create? → I assume there must be something not working or fail to meet our expectation.

3 Why: WHY we know something fails our expectation? → Because the existing solutions are not solving the problem(efficiently).

That’s it ! How about I find something NOT working, and try to redesign a solution to solve it !

But considering I’m no longer a full-time student, I cannot commit too much time for it every day :( . So the redesign exercise must be excused in a feasible method.

First, I should start chop down the redesign process into small pieces:

1. 👀 Look for websites that need to be fixed, I happen to come across this list:

Bad Websites - The 40 Worst Websites on the Web

Some of the website really blow my mind, I cannot believe those websites still exist 🤯 :

Real time screenshot from https://www.art.yale.edu/ at writing time

2. 🔍 Do some desktop research regarding how other similar websites look like with popularity. Here, I use similar web to do some competitive research, it’s really helpful for me to spot the similar competitive with popularity around the world easily:

You can either find the exact website and compare it with potential competitors, or just simply browse the competitors within specific fields.

3. 🎨 Get inspired from top designers :

Dribbble - Discover the World's Top Designers & Creative Professionals

Search projects | Photos, videos, logos, illustrations and branding on Behance

Awwwards - Website Awards - Best Web Design Trends

4. 📝 Summarize the takeaways from competitive analysis and design inspirations.

5. ✍🏼 Sketch out Ideas, in Lo-fi, as many as possible within a time limit.

6. 🏆 Choose the potential idea to develop.

7. 🛠 Hi-fi Mock up. (I use Figma, a very cool free online design tools :)

8. 🧠💬 Seek for critics and make adjustments accordingly.

After setting up the framework, it’s time to put them into a more practical manner → how much time needs to be spent for each session?

After examining by reality, the Actually time spent on each category is double more than what I thought…

Time Sheet plannings

The reality is not like the plan most of the time, so I reflected what I have done:

It won’t take too much time to decide which website to redesign, I took the 1st one from the bad websites example:

The problems start with - the second process: 🔍 Do some desktop research :

In order to analyze how other website did, I have to take screenshot for each and highlight some points from similar web, for each it needs at least 10 mins(including clicking, website refreshing, long page screenshot, put them into the table ect), and I took for 8 websites, so 1.5 hour that’s it !

For the part 🎨 Get inspired from top designers, I checked around Dribbble and Behance popular websites within the same category, screenshot them and take notes for the ones that I like and think would be inspiring. It took me 1 hour mostly because I was too attracted to the details for each design,which I need to work on it later. I screenshotted around 13 web designs, each of them takes around 5 mins.

After that I 📝 Summarize the takeaways from competitive analysis, I made some ground rules so that my design needs to:

1, Separate information sessions clearly.

2, Maximize the space usage.

3, Place the functions that most relevant to the customer at the top.

and design inspirations and ✍🏼 Sketch out 6 ideas:

For the part, I didn’t exceed the time limits, which is 30mins.

And the tricky part is for 🏆 Choosing the potential idea to develop, I tried to marked down the prominent features for each mock up and compare which one has the most potential:

Fist thing first, I need a persona here to remind myself what’s the goal for the redesign: Tom wants to rent an apartment and look for informations aound his places. It’s his first time to go to the website.

I chose the one which has most features as the design framework, but there should be some adjustments:

Finally, it comes to the last part: 🛠 Hi-fi Mock up. The real process is:

1 — Set up Information Session Blocks (5 mins)

Before everything begins, it’s crually to know the size of the website you are designing: here I use HD Desktop as Frame (1440*1204)px.

Then I created the Information Architecture Blocks (in the one-page redesign, I left out the interaction part) in 5 mins:

Information Architecture Blocks

2 — Create Layout Grid and Typograpghy Scale (5 mins)

I found that the foundation for awebsite is its skeleton, which are The Grid and Typography. Therefore I set up the typography scale and tried to place each session elements within the Grid Layout I set. My plan was using 10 mins for this, but it actually took 25 mins, I found there are some useful study materials for Grids:

UI Grid Best Practices

and for the typography scale those articles are worth to read:

A Visual Type Scale

I refered to the Material Design typography scale:

Material Design

Web browsers calculate the REM (the root em size) based on the root element size. The default for modern web browsers is 16px, so the conversion is SP_SIZE/16 = rem.

🖍 It’s important that Text color should also be applied in this stage.

3 — Reuse Wireframe Components

I made a wireframe template to speed up the process so that I didn’t have to draw the component one by one:

Wireframe Library

4 — Construct LEGO Blocks (40 mins)

For Grids I used:

and here is original wireframe with the Grid layout :

Original Wireframe for Hi-fi Prototype

5&6— Set Color Tone → Create Color palette → Apply Color Theme, Fill Photo & Text Details (60mins)

For this part, I was confused, and I throught maybe I can just use whatever color I think it’s a fit. I was originally use this colortone to make it feel more like informative and comfortable:

However, it ends up with this 😰:

arez1st version for the Hi-fi prototype

I found that when I start working on the real mockup, I was caught up with details, like what color I should use for this block. I always feel like the original website is too “boring”, so I tried to add colors/photos to make it feel “full”. However it just leads to chaos.

As designers, we always know that “Less is More” and “Don’t overwhelm users with informations” at the very beginning. Irocally, I fell into definition which is called “bad design”.

Just after finishing the design, no need a third eye I can tell there are something needed to be changed.

1, The photos behide each category is absolutely distracting.

2, Top categories is mixed with the gradient background.

Nevertheless, I still feel something not right, so I decided to reach out to 🧠💬 Seek for critics from some slack design communities, I was lucky enough to get one reply. I was pointed out that by trying to make the text more visible, I make it interfere in what the user is looking for. And the icons on the back of each category may not be necessary.

And I’d like to point out that it’s NOT EASY to get feedbacks from group:) I posted on several communities and only ONE reply. So I would like to form a community later for those who also want to practice on a regular basis and support giving feedback to one another 🙌🏿.

7 — Make changes based on feedback (IT’S NECESSARY) (1h or less)

I really like to look at my work with fresh eyes. I did help when I came back to evaluate work after couple hours or a day :).

I made some changes based on feedback:

→ 1. Make the design more forcused by bearing in mind that the gola is to help user to find the information easily.

→ 2. Simplify the color theme, I chose the original color as emphasized color.

Takeaways

Even though the design is still far from perfect but here are the takeaways from this exerice:

• Plans always cannot keep up with changes. Embrace the uncertainty.☺
• Chop down big tasks into smaller ones.
• Set timers to force ourself to finish within limits.
• Reflect, Reflect and Reflect! Most of us finished thing and leave them behind, but it’s important to get back on it with the original goal and see what’s NOT WORKING, so that we can improve next time.

Next Step

Because currently I have a full time work in the day. So the ideal senario is to spend no more than 4 hours after my work to do exercise. However, after the real practice, I realize it’s not possible that I can spend continuously 4 hours to finish this exercise.

But it’s possible I spit it into 2 days 😀.

For doing desktop research & getting inspired with other designs, it would take 1 day at the break time at work.

For sketching out ideas and choose potential one to further develop into hi-fi prototype, it would take another day.

After finishing the pratice, the other day, I can go back to what I’ve done the mark down the important takeaways for improvements.

To be continued …

(Please feel free to leaves comments and share your ideas, we always learn from each other :)

Reference Links:

Web Design Tips： https://torquemag.io/2018/07/web-design-tips/ (Don’t Use Tabs)

Persona building tool: https://www.hubspot.com/make-my-persona

Information Architecture: https://xd.adobe.com/ideas/process/information-architecture/information-ux-architect/?scid=b602673c-ad1e-4691-9c8b-6744a2084dbc&mv=social&mv2=owned_social

Grids Pratical Rules: https://blog.prototypr.io/ui-grid-best-practices-efd6c4f9d16.

Apply Grids to Design System: https://medium.com/swlh/design-system-based-on-the-8pt-grid-2473ca5f0ae1

Typography Scale: https://type-scale.com/

Material Design Icons System: https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes

Figma Plugin — Iconscout: https://iconscout.com/icondrop/for-figma

Figma Plugin — Color Designer(Auto generate color scale): https://colordesigner.io/tools