top of page
Writer's pictureSong-Yi Feng

Turning the current design into a mobile version | Dacreed



Introduction

I'd like to share what I've learned over the 10 weeks of working on this product at Dacreed. It's fascinating to reflect on the journey. While I need to protect the IP due to confidentiality and the project's ongoing nature, I can highlight some key points of the design process.

I'll present this like a series of slides, each with a key prompt and a brief description with some links to other related articles or tools. I hope to fully reveal my design insights and share them with everyone in the future soon.

I like to keep it brief and simple since I have a bit of dyslexia or visual tracking issues, and English is my second language. Anyway, I hope I have delivered something valuable to you in my very first article. Cheers!


 

Project Scope
Project Scope

 

1 Goal

For this internship, I'm aiming to turn the current web-based desktop design into a mobile app. I'm a big fan of having a clear, simple scope laid out right from the start. Plus, I heard there's a chance this product could actually go live if everything works out. Talk about an awesome opportunity to kickstart my UX career! I'm pretty pumped about it.


Some UI fit web-based design pretty well but not the same case for most mobile devices.
Some UI fit web-based design pretty well but not the same case for most mobile devices.


1 Current Product

It's quite challenging but also exciting being the only UX person in the company. I know I have to work at a very fast pace to hand off my designs so the developers have enough time to build them. At the same time, I need to familiarize myself with the product and identify key features and potential pain points.

A straightforward way to do this is by treating myself as a new user (which is true) to fully explore the product. I write down everything I find along the way and then check my notes against UX design principles and laws. Some useful links below:


 

A good IA/User Flow can help the devs structure backend folders
A good IA/User Flow can help the devs structure backend folders

Some Analysis

I thought that drawing up the website structure would be quite helpful, as it maps out the flow more clearly. I remember feeling quite confused by the complexity of the structure at first. However, I highly recommend this step, as it was crucial for me. It helped me understand the hierarchy, organize the information, and decide what should be shown and where.

For my next project, I plan to spend more time on this before jumping into wireframing or prototyping since they are closely related to the key functions.

A few tools and articles might be handy for doing this:


 

Baselines or principles to adhere to throughout the project to get a good outcome at the end.
Baselines or principles to adhere to throughout the project to get a good outcome at the end.

3 Initial Setups

Another critical step at the beginning of a project is to set up some baselines. I have the project scope: designing a mobile app, as mentioned earlier. Dacreed also outlined the business's core values, which I use as quality assurance.

What’s most important is how we collaborate. It’s about having agile mindsets and effective communication. It's beneficial to write down those agile principles at the start of the project with your teammates and ensure that our ways of working make everyone comfortable.

I really appreciate that in the project briefing presentation, David Sherwin clearly outlined the project scope and business core values. Shout out to my awesome teammates, Cameron Banks and Thiago Tavares —we all share the same mindset and are dedicated to doing our best work and embracing the feedback either positive or negative.

Articles about agile mindset:


 

Persona provides a big picture of the project for me so that pulls me back from details.
Persona provides a big picture of the project for me so that pulls me back from details.

3 Persona Groups

I don't know about others, but when I'm in the flow of designing something, I often get caught up in details for too long and end up spending too much time on minor things. I guess I geek out, get too picky, or just play around a bit too much. Anyway, I found that persona groups help me stay on track! Whenever I get lost in details, I can come back and read the persona, which helps me focus on the critical parts of the design job.

As part of the design thinking process & tools, personas are built around research findings, business goals regarding the product, or iterations based on user feedback. They aim to provide a smooth experience and service by keeping the user's needs at the forefront. I'd like to talk about this more maybe later in the future.


 

Prototyping helps me get better user testing results
Prototyping helps me get better user testing results

Heaps of Ideation & Iterations

This section covers a big chunk of the design thinking process, from defining, wireframing, and prototyping to testing. Personally, I find prototyping and testing very useful. Why? Because user testing provides valuable insights that can significantly improve the product, and prototyping supplies the materials needed for user testing.

I developed tasks and questions for testing while building prototypes, which helped me stay focused on designing key features. During user testing, I find it useful to break down the results into three categories: aesthetic, usability, and functionality. The priority is functionality first, aesthetics second, and usability last. Why? Because in my experience, usability issues are often resolved when the other two aspects are addressed. Others might have different experiences, but this approach works well for me.

Another thing I learned is that design is more constrained compared to art. As a fine arts graduate, I was used to creating freely, limited only by my imagination. However, in the design world, the product must be user-friendly for a diverse audience, making practicality a top priority. Only do something that benefits the users instead of my personal preferences.

Articles about design thinking:


 

We are trying to publish this to the market.
We are trying to publish this to the market.

1 Successful Design

Voila! This is the final design I completed in 10 weeks (actually, 8 weeks to be precise). I refined and redefined several elements regarding functionality, usability, and aesthetics based on user feedback and comments.

I truly appreciate everyone who supported me during this journey and the opportunity Dacreed offered. I'm thrilled that everyone is satisfied with the outcome, and now I'm blessed to have a short-term contract to complete this design and roll it out to the desktop version. Really lucky to work here with Cameron Banks & Thiago Tavares, the 2 talented devs.

We often talk about things like what can or cannot be done, how we can improve efficiency, what I am working on, and what changes are likely to happen. We also discuss where to get CSS icons, how to mark colours and font styles clearly, how the information architecture looks on my side, etc. I’m not sure I could design something like this without their support, so I truly appreciate it.

It's a blessing to have teammates who are so easy to communicate with. Collaboration is definitely one of the most important parts of a great outcome. This is the end of my article, and I hope to bring much more insight and pictures next time. I hope you have a great experience today. Cheers!


 

Looking forward to working with you guys again soon! Dream team!
Looking forward to working with you guys again soon! Dream team!

0 views0 comments

Comentários


bottom of page