PRODUCT: A responsive Web App // MY ROLE: UX and UI Designer, Branding // DURATION: 10 Month as a side project // TOOLS: Pen & Paper, Balsamiq, Google Forms, Optimal Workshop, Adobe XD, Photoshop, Illustrator, UsabilityHub // DATE: 2019
You're welcome to watch the product walk-through of levelup:
Overview
"levelup" is a responsive web app. It provides a platform for mentorship.
Advice seeking professionals need a way to get quick and reliable help from trustworthy experts, because they want to succeed in their new job or career level.
Purpose and Context
"levelup" was a personal project I designed through my Certified User Experience Course with CareerFoundry.
The goal was to learn the design process from the beginning to the end of a responsive web app focusing on Human Centred Design and Design Thinking principles.
Objective
Searching the internet is time-consuming and often doesn’t lead to a satisfying solution. Especially when it comes to mastering a challenge on a job, getting real insights and personal advice is highly valuable.
With levelup users can create a free account and get one-on-one advice from mentors and career coaches through different channels. They can search for mentors easily and schedule appointments for phone or video calls. An in-built messenger enables instant and quick connections.
To figure out if they are pairing with the appropriate expert, users get a free trial.
Challenge
Even though I have been in the situation of looking for advice from an expert myself, I didn’t have had any experiences with mentorship. I did not know what to expect from a mentor and how this relationship looks like.
So I started to do a lot of research on the internet. Especially website from the US and UK helped to understand the idea. With conducting a survey and interviews with my users I gained really good insights with which pain points my target group was struggling.
Responsibilities
The entire UX process from conducting market research and competitive analysis, conducting user surveys and interviews, creating personas, designing the information architecture, journey mapping, content auditing, creating wireframes from low to high fidelity, making prototypes, usability testing, affinity mapping, design iterations and final design with handoff for development.
THE PROCESS:
Discover – Define – Ideate – Test – Refine
Discover & Define the Problem
Methods: Competitive Analysis // Problem Statement // User & Job Strories // Affinity Mapping
What are my competitors selling?
To better understand the scope of the problem I wanted to solve, I analysed my competitors on the market. I focused on their strengths, weaknesses, opportunities and the threats they might face with a swot analysis.
The analysis helped me to form a problem statement and my strategy for levelup by identifying opportunities:
•Build trust.
•Give transparency throughout each process.
•Be affordable.
•Focus on key objectives.
S.W.O.T. analysis
What do my users need?
Now I knew the market, but what about my target group? Who are they? What do they really need? For better insights, I conducted an online survey to get an overview of how my target audience is seeking for advice, and what their pain points are:
•How do my users behave when they are seeking for advice?
•Which sources are they using to get advice?
•Which tasks would they like to complete while seeking for advice?
•In which context would they probably use a mentorship service?
•What makes a mentor trustworthy?
This quantitive data gave me an overview of my participants thoughts. In-person interviews with 5 participants of my potential target group, helped me to dig deeper and understand the problems better.
Online survey
I got a lot of great insights through the interviews. I gathered them all and did an affinity mapping to see patterns of behaviour, attitude, needs, goals and pain points.
Affinity mapping
Key user insights:
•Most professionals would like to improve their skills and to further their career or knowledge.
•People are trying to find help on the internet. Facing a specific problem, they want reliable advice and put a strong value on their professional network.
•To trust somebody people don't know and talk about sensitive topics needs proof of security and trust.
•Years of experience are more important than certificates or a degree.
Methods: User Personas // User Journey Maps // User Flows
Taking the findings from the survey and the interviews, three main personas evolved:
•Ava (is looking for a new role).
•Isabel (wants to further her career).
•Jason (wants to change his career).
Personas
What challenges are the three personas facing on their way to succeed? User journeys and user task flows helped me to sympathize with the challenges and experiences on their way.
User journey maps
User flows built the basis of the first draft from the upcoming sitemap. The next step would be to see, what my users would assume to find in which part of the web app.
User flows
Ideate
Methods: Card Sort // Information ARchitecture // Wireframes & Prototypes
An open card sort was conducted with 10 participants and 27 cards. I have had high expectations of my card sorting and the inconclusive results surprised me. Maybe my participants have been overtaxed with the classification into different categories?
I decided to go for another try and guide my users a little more: With a closed card sorting (22 cards and 4 categories) everything became clearer and so I could refine my IA according to the results. I didn’t have to make too much changes and all the prework was worth it.
Similarity matrix and popular placement matrix
Revised Sitemap after card sorting
Starting with pen and paper, I tried a variety of navigation types with rapid prototyping, like the hamburger menu and the bottom navigation. Since I don’t have more than 5 main categories here, I quickly decided against the hamburger menu and put navigation on top to make everything as visible and recognizable as possible for my users.
It was indeed an important step in the process of building the product because since the project brief expected the web app to be responsive, I was focusing too much on doing everything right. Of course, this was not possible for me to fulfil in these early stages since the process is iterative.
After a lot of drawing and trying, I went on with Adobe XD and created a mid-fidelity prototype for the usability testing.
Test
Methods: Usability Testing // A/B-Testing // User & Job Strories // Affinity Mapping
It's testing time!
I was really curious about the usability testing! Will my participants be able to fulfil the given tasks? Am I on the right path with my objectives? But before I could dive into the testing, I needed to make sure I was well prepared for the testing phase. I formulated a test script and a clear testing plan. This would also help my participants to feel as comfortable as possible while being tested.
Moderated remote testing
6 participants were recruited from my personal network and were asked to complete 3 task flows and asked the level of difficulty after having moved trough each task. The rainbow spreadsheet was a good way to illustrate the findings and prioritize 5 usability errors and make appropriate changings in the next iteration phase. The testing made quite clear to me where the pain points with my prototype are and where I have to improve. The errors were rated according to Jacob Nielsen’s 5 Components of Usabilty. In conclusion, the testing was successful!
Rainbow Spreadsheet
A/B testing, preference test
For further development of my project, I decided to test the header of my initial screen and the top navigation bar, e.g. on the dashboard, in interaction with colours of my chosen colour palette.
The goal was to find out which design was more appealing and functional in my user’s opinion.
A/B test (Preference test)
Refine
Methods: Interface iteration // Style Guide // Accessibility
Let it shine!
I decided very early to use a clean and simple design, but to shine with motivating vibrant colours.
I reached out to peers and asked them to review my web app, since I needed a fresh pair of eyes looking at my screens. Major changes weren’t necessary.
Most changes referred to cosmetic issues like incorrect spacing or adjustments. They were suggestions, but it was great to get this feedback, and I agreed with most and implemented them in my UI.
Consistency is very important for a harmonic and appealing UI, so I created a design language system and a style guide. I included rules for:
•Color
•Typography
•Iconography
•Common UI Components
•Grid
•Images and Illustrations
•Tone of Voice
•Accessibility
A selection of the (final) screens
Retrospective
What went well?
Having good communications skills helped me a lot to engage with my users through the interviews and usability testings later on. I also could estimate the scope of the tasks and therefore organise and structure the schedules for these interactions. I was well prepared and enjoyed this process. My software skills as a graphic designer have been an advantage to learn new design tools like Adobe XD. I applied design principles and worked with grids since the beginning intuitively. This saved me from serious modifications on my design.
What can be improved?
Even though I’ve been a graphic designer for many years, I didn’t work based on researched data. I learned how difficult it is to ask the right questions and how impactful it can be to do research properly. Doing affinity mapping after user interviews and usability testing was quite fun, and I got so many powerful insights from my users.
Design is a matter of taste but it’s not about creating fancy designs only. I never did so many iterations in my design process. Staying open-minded and receptive to all the feedback that was given, helped me taking things a step further to make sure that I carefully considered everything and made refinements to get to my (end) product.
Feel free to play around with the prototype!
Thank you for reading! For a more detailed version of the Case Study please visit me at Béhance.
