top of page
Writer's pictureSong-Yi Feng

Turning a concept design to a MVP. Mobile & Desktop app.


I'd like to share the insights of what I've done over 12 weeks at Dacreed. It's fascinating to look back on what happened during this journey designing a product based on given concept. I will share what I did from the beginning to the end of my contract.


 

Beginning of the project

Beginning of project

In the beginning of the project there are a few things to identify. They are project scope, business core value and ways of collaboration.


Project scope

This was given by the CTO. They are:

  1. Create mobile version “PDP” Tool


  2. Searchable and quick filterable list of PDP tasks

  3. Focus view on current tasks

  4. Upcoming & Overdue

  5. Ability to Add New Tasks and edit details of existing tasks

  6. Quick start of a Course

  7. Ability to move tasks in a timeline by dragging & dropping

  8. Ability to update skills and preferences

  9. Ability to set and change goals

  10. Ability to see analytics & reports


This is incredibly helpful so the team will have the direction where to go.

So it's pretty clear that I have to go through the current design and get my head around it.

One valuable thing I'd like to mention here is, no matter what sort of instruction is given to you, don't just follow, make something better and justify your reasons.


Business core value

When first coming to a new business, I recommend finding something similar in the website. The core value might be a single line or a list like what I found below:


High Trust:

  • Security

  • Privacy

  • Accessibility

  • Transparency

  • Scalability


Exceptional User Experiences:

  • Anytime, anywhere access

  • Positive reinforcement

  • No confusion

  • High performance

  • Robust support


Personalization:

  • Treat users as individuals

  • Personalized paths

  • "Lean Flow" engine


This is like a checklist for quality assurance.

I reckon it's important because I want my design in line with the image of the company, in line with the marketing strategy, in line with what they have told their customers.


How we collaborate

How do we work together, this sounds like another cliche but I think is quite important as we were scheduled to work on this for 10 weeks, (Dacreed extended another 2 weeks later, so it was 12 weeks in the end) so it's really crucial how we communicate smooth and effectively.


What we used are Trello for logging, Slack for short comms and e-mail for long comms.


I love using Trello board to keep my design log :)

What I have added so many information in my Trello and then I came back here to grab the information I need for presentation to justify my ideas.

Trello board

The agile mindsets are also what we need to align with each others, making sure we can work comfortably. (shhh... I know no one works comfortably come on)

  • Maximizing our learning experience as well as the value to Dacreed.

  • User feedback is the first priority.

  • Embracing logical change at every step of the project.

  • Self-organizing.

Now we are ready to start doing some works!


 

Research - Current Design


Current design

Since I was designing based on the concept product, what I need to do first is to get myself familiar with the current design. As shown above, the design has some features marked with a few numbers. My job is to investigate and identify the functions behind each of them.


As this is their concept design and I need to design something for user testing in the future, I will use heuristic evaluation on this current design and also I will chat to people in the office about this product.


It's quite important to talk to as many people as you can in the company to find out the core functions about the product. It's like interview people in a less formal way, but this helped me understand the product a lot. If possible, reach out to the people in the office when they are available and then, ask some questions!


I suddenly have the idea that I should draw up the current information architecture so I can think about the user flow and how the user journey map will look like easier. So there you go, here is the current info architecture:


Current information architecture

Meanwhile I also applying heuristic design principles. I don't feel like list the 10 design principles here but in my interpretation, the heuristic design principles in a few words can be "The logic of the system designed for human".

After interviews, and running through the current design and drawing up information architecture, I spotted a few things in the current design that I can prevent or improve.

  1. Use simple language so the users can understand

  2. Organize the layout and all the buttons

  3. Simplify the design regarding the colours and font sizes

  4. Naming convention should be consistent

  5. Might need to remove some items/functions

  6. The content of the site manual is complicated


To be totally honest with you, the more I investigate, the more I am confused! I found some conflicts in between some functions and some functions they don't connect to each other and some don't work. But I believe I can do something pretty cool with all the information I have collected at this stage. Now I will start jumping to design.


 

Design - Design Thinking & Wireframing


This step is relatively quick as I've collected insights about this product hence it's not too difficult to consolidate the findings and trying to make the right design decisions. The tools I used for design thinking are persona, user story, problem statement and wireframing. I would recommend read the part about wireframing if you are too busy.


Persona
Persona

You might not agree with this but for me, in terms of building a persona, I only focus on 3 points:


  1. All stakeholders/Groups

  2. Goals/Wants/Needs

  3. Challenges/Frustrations


Getting a photo for a fictional character is the part of persona that makes me feel like to invest my time on something else. I just want to focus on " who are the audience", "what business and users want to achieve" and "how they feel about it" to design the product in an efficient way.

 
User Story & Problem Statement
User story & problem statement

I feel these tools are guiding designers through a logical way and organizing the ideas or findings about the product.

 
Wireframing
First wireframing

Wireframing is another way that I will include in my design thinking process as I can visually identify some stuff and also showing my ideas easier.


Why I include wireframing as a design thinking process? Here is the most interesting part, I like to make other people think as well! Because people can utilize critical thinking better when looking at someone else's mistakes. On top of that, my strategy is to make some mistakes in my design and the mistakes are similar to what we currently have in current design. Also, I have give myself the opportunity to experiment something crazier in the design. I really enjoy this process if you know what I mean. Highly recommend trying this method I have developed a few years.


 

Prototype - Design Iterations & Collaboration with Dev Team


In the beginning I still got lost in the colour selection and keep using the colours that the currently design has lol.

You can probably tell how much I enjoy wireframing & prototyping by looking at the design iterations above. Trying out different design possibilities is really fun and I always find a better idea in there. However, if my dev team don't enjoy as much as I do, I most likely won't do this.


What I want to talk about is the collaboration with dev team at this stage.

I reckon there are 2 things when working with developers:

  1. The feasibility about the design

  2. UI hand-over


I was quite lucky working with the developers who also want to push the boundary and learn as much as they can. They are absolutely supportive and easy to communicate with. However, I think it's still important to validate you design ideas before reaching out and be open to their suggestions.


Talking about UI handover, I think it will be much easier if I post what I delivered. Photos can say thousand words here. Only want to mention a bit about the icons, I use "Font Awesome" icons quite often as they have Figma plug-in and also the code on website for you to prepare for the devs. Be aware the licensing, make sure you paid or the ones you use are free! Likewise to the fonts you use!

The colour UIs

The mobile design UIs

 

Testing & Analysis


User testing and analysis

I conducted user testing both internally and externally on two of the design prototypes. During the test I have noticed their reactions. And although participants were able to complete the tasks, they had questions about the product.


The questions/reactions are:

  • Yep, I can finish this but what does this mean?

  • What's next then?

  • What can I do with this and that?

  • Where does this take me to, what is the purpose of it?


So, I also interviewed participants to understand how they feel about the product and how they think the product can help them better.


This means: Although the participants can complete the tasks you design for them, it doesn't mean it's a successful design. Those functions in the concept design don't really connect to nor work with each other. I soon realized this is a big issue! Their reactions during the testing is so valuable which makes me see spot the real issue.


We also discussed what information was most important to them in the setup scenario of user testing. I realized one thing which really confuses users are the connection between each function. So I spent a few days trying to figure out the current functions.


I broke down the feedback into 3 parts: Aesthetic, Usability and lastly Functionality.

I find the functionality is the most important one to address and it's urgent as that might change the whole structure quire a bit. So I work on that first and I draw up the functions as below.


This is the most important function that I introduced to the system in order to connect all the dots.

This is the second important part which replaced the timeline in their concept design.

I separated these functions as they are the admin part of functions which used to confuse users.

I removed a few functions and added a few functions to the product as shown above and ensured everything works in the way they should. This process also involved a lot of coordination and collaboration with the dev team. I want to make sure we don't change entirely as we had limited time for this job and we will still be able to solve the functionality issues as well.


What I show here is the one of many attempts that I am finally happy with and then I transformed those charts into a better information architecture chart for the dev team as shown below. So they know how to structure their programming folders connecting frontend and backend.



I love adding the screens associate with the action so the devs can understand that much easier.

Regarding the functionality, this is what I did, and I believe you can perceive the improvement in terms of the aesthetics which I reckon it's much easier part to address.



One of the pitch deck slides


 

Desktop version

Applying the design system back to desktop is quite easy. I just need to work on the responsive design and the breakpoints. The timeline is kept as requested although I don't quite like it but my job is to listen to the feedback and reflect it onto the design. I want to make them pixel perfect! There you go!


Breakpoint 1340px

Breakpoint 1122px


Breakpoint 784px


Breakpoint 628px


 

Next Steps

Next steps

There are some other functions remain to be added to the system and the largest piece will be the admin part. Potentially there will be various of content providers play the admin role and therefore there will be a significant amount of user testing and interview for the next step in order to design a system for them and tackle all the needs.



 


Time Breakdown


The entire design cycle into three main steps:

  1. Week 1.5: Initial setup, research, and ideation/wireframing.

  2. Week 1.5 - Week 6: Design iteration, user testing, and analysis.

  3. Week 7 - Week 10: Fine-tuning, and next steps.

  4. Week 11 - Week 12: Apply design system to desktop version and prepare pitch deck materials.


 

My Takeaways


I really enjoy this project and appreciate the opportunity and freedom they gave me. This project shows how they trust and respect me as a UX designer and I did more than what they expected in the beginning in return. This is a very rewarding journey, I hope them to be successful with this product in the future.


  • Persona groups draw me back while I get carried away by other things. So I check these personas quite often to stay focused on user-centred solutions.

  • Users completing your tasks in user testing doesn't necessarily mean the design is good. I preferred asking them more questions after user testing to explore more possibilities.

  • Identifying the hierarchy of the functions are the key for this project. I will do in all the future projects.

  • While I enjoy in drawing up information architecture, I also find it helps developers bstructure their backend folders which is a big time-saver.

  • On top of that, I presented information architecture with photos related to the specific parts so developers can understand the whole thing much better.

  • I presented my design multiple times at different stages and that helps me finish the tasks within the timeframe. I would suggest showing your design to people constantly and see how people feel and think about it.


1 view0 comments

Comments


bottom of page