How to design more objectively (UI case study)
Designing a new website with a process-driven UI flow.
As designers, we want to be purposeful with our design, not rationalizing them after the fact. But how can we do this with visual design? I mean, take colours for example. There are 16,777,216 colours on digital display (and more with retina), and we’re expected to explain why we chose these three colours instead of the rest?
I didn’t know how to do this until I took a UI design course at RED Academy, where I learned a process-driven UI design flow. In the case study below, I will share this process with an example project.
Task: Design a website to encourage people to travel to Vancouver, Canada.
Before jumping into design, I first needed to understand why this project/website is needed. I did a competitive analysis to answer two questions:
- What’s missing from current Vancouver tourism websites?
- What’s special about Vancouver (compared to other cities)?
I found that most Vancouver tourism websites provide a broad introduction, without focusing on any particular aspect of the city. I also found Vancouver is one of the rare cities in the world that enjoys both majesty mountains and glory beaches. From here, I decided:
- Project Goal: highlight the nature beauty of Vancouver to attract tourists
- Website Goal: provide information and generate leads
- User Persona: young travellers looking for adventures
To decide on an art direction, I started from the user goal and answered three questions:
- Why would someone use this website?
- What mood would facilitate for these needs to be fulfilled?
- How can I communicate this mood through visual language (colour, shape, space, movement)?
From here, I developed moodboards, which are possible design themes of the website. For this project, I considered two alternatives:
- Calm & relaxing: my initial direction, as this fits with the laidback culture of the West Coast
- Exciting: my final decision, as this resonates more with the user persona
Exploration & Iterations
I started out planning to create an engaging experience by taking the audiences through an “illustration tour”. Not only this would make the website stands out, it was also a good personal challenge as I had never done illustrations in the past.
However, I soon realized illustrations cannot communicate the nature beauty as well as real images do. I pivoted to use both illustrations and real images.
At the idea exploration stage, you sometimes forget the design direction set out in the planning stage. This happened to me here. There were many attempts between these two iterations that by the end of it, the design had lost the focus on both engaging experience and nature beauty.
This is why having a process is important. I took a step back and revisited the project goal. As the moodboard was quite vague, I created a style tile to define the visual language in specific elements.
Contents & Wireframes
Contents are usually decided at the planning stage with inputs from the client. However, as this was not a real project, I left this task till after exploration, when I had gotten a good understand of what and how the website will communicate.
One way to structure the contents in a landing page is through “story arc”. Many websites are structured this way, and if you need some inspirations, Land-book has plenty good examples.
Another thing to consider with contents is web copy. While truthfully I have not mastered this skills, I tried to give the website a friendly voice (if you’re interested, this article of how Google do UX writing is gold).
Finally, wireframes illustrate the layout of the contents. I created wireframes on a desktop screen size, but you can also follow a mobile-first approach.
The final step is putting all the art direction, contents, and wireframes together. Below are my prototypes in desktop, mobile, and tablet (mobile and tablet show only the homepage).
After completing the prototype, I took it to my friends to ask for their impression of the page:
- What mood does this make you feel?
- If this website has a personality, how would you describe it?
This simple test ensures the final design reflects the project goal. I didn’t ask questions about functionalities or call-to-action, as these were not my targeted users.
Brand styleguide is a summary of the things that make up your website personality. It provides guidelines for future design initiatives and updates.
Process can sound like a fun killer in design, but through this project, I found it to be the opposite. With a process setting boundaries upfront, I can explore ideas more freely, and recognize problems quicker before getting committed to an idea. Moreover, a strong process gives rationale for design decisions. Instead of relying on my feelings, I can design more objectively.
For UX designers, learning UI also helps me understand how to handoff a UX project to the UI team. For instance, I learned what research information would be more useful for UI than others.
Thanks for reading! I hope the article was useful to you. Give it a👏 if you liked it and I’d love to hear any thought and ideas you have.
If you want to chat more about UX/UI, shoot me a message at: email@example.com