What is this project all about?
This is the portfolio I created during my mentored online training with CareerFoundry.
The task was to design a web application for project management called TASKLY. In this exciting 3 month course I discovered the overall UX process including lean canvas, user research, wireframes, prototypes, and visual design.
With feedback from my mentor and many users I constantly improved the outcome.
Please let me know how you like my first UX journey :-)
1. Strategy & Content
In this module I learned to think as an UX Designer, how my UX role in a professional setting would look like and to kick off my portfolio project by building user personas, an information architecture and developing content.
Aren't there already enough project management tools in the world?!
To find out if and how another one would fit into the market, I analyzed existing products:
What is their core message?
What is their target market?
What is their strenght and weakness?
Which marketing strategy do they use?
And yes, there are some gaps for new ideas!
All target groups have been analyzed in detail to meet their needs:
What are the goals and tasks they are trying to complete using the site?
How does their physical, social, and technological environment look like?
What is a quote that sums up what matters most to the persona as it relates to your site?
Now, let's welcome Sarah, Tom, Lisa and Chuck:
Hello, I am Sarah!
Sarah is the central persona I identified with help of user research, including interviews.
A young business woman looking for an online tool to manage her private projects as professional as in her job:
Which features do my users really need? This is the task list I created from user research, for example, an online survey.
That's the information architecture I created to visualize the pages and navigation flow in my web application TASKLY:
2. Wireframing & Prototyping
In the following weeks, we walked through UX best practices as I developed my product’s first wireframes. I studied grid systems, responsive design for mobile and begin testing my ideas with users which was quite exciting.
Prototyping the sketches was a lot of fun! To keep it simple, I started to sketch the mobile app first and switched to bigger formats in a later step.
These wireframes explain how the project lead will create a new task (10) and export a task list for external contacts (11):
Wireframes in UXPin
From the sketches, I created the first wireframes for a mobile app using the powerful online tool UXPin.
To understand the importance of responsive design, I created additionional wireframes with ipad and desktop resolution.
That's one of my first drafts to create a new project on your iphone:
Wireframes in AXURE
To create interactive wireframes of the web application and to learn another tool, I switched to AXURE. Many of my wireframes have been tested by the targeted user group and improved from their feedback.
That's why I decided to redesign the section how to choose the topic to work on - in the version below it's not clear that you can only choose one project template.
Tip: You can find the final version in the UI design section!
3. Visual Design & Analytics
Step by step I added elements of visual design to my project, learned how to gather data and use it. I continued testing and iterating while rounding out my knowledge with a variety of tools, such as Adobe Illustrator, InDesign, and Google Analytics.
Getting inspired by other websites and applications, I created a moodboard using Abobe Illustrator. My main inspiration sources have been flat design and material design. Like the guardian and many others, I decided to use a white text color and bright colored tiles. The icon font is called FontAwesome.
Which colors should I use for my stylish web application?!
From a quick survey, the winner was SMARAGD DREAM, displayed in the first row:
So, that's how my first UI kit currently looks like! As my testers complained about white on yellow a little bit hard to read, I switched the colors on the final screen design as you can see later.
These some example of screens where I applied the UI kit: My dashboard, My projects and Create Project.
Can you find out what is other than in the wireframe above?!
Tip: You might remember what I wrote about selecting a project template when creating a new project :-)
For example, I created an A/B test to verify if my users would prefer navigation buttons with an icon and text on it, or if text only would be suffient: Nearly all users prefer icons and text on the buttons!
Now, it's your turn!
I hope you had a nice journey through my first UX design project!
So, how do you like it - any questions, new ideas or other feedback?
Looking forward to your comments :-)
Looking forward to your comments :-)