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
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:
Create mobile version “PDP” Tool
Searchable and quick filterable list of PDP tasks
Focus view on current tasks
Upcoming & Overdue
Ability to Add New Tasks and edit details of existing tasks
Quick start of a Course
Ability to move tasks in a timeline by dragging & dropping
Ability to update skills and preferences
Ability to set and change goals
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.
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
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:
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.
Use simple language so the users can understand
Organize the layout and all the buttons
Simplify the design regarding the colours and font sizes
Naming convention should be consistent
Might need to remove some items/functions
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
You might not agree with this but for me, in terms of building a persona, I only focus on 3 points:
All stakeholders/Groups
Goals/Wants/Needs
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
I feel these tools are guiding designers through a logical way and organizing the ideas or findings about the product.
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
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:
The feasibility about the design
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!
Testing & 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.
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.
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.
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!
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:
Week 1.5: Initial setup, research, and ideation/wireframing.
Week 1.5 - Week 6: Design iteration, user testing, and analysis.
Week 7 - Week 10: Fine-tuning, and next steps.
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.
Comments