Ironhack UX/UI Design Final Project :English Ninjas_Part 2
Hello, this post is about my final project at the Ironhack Paris, ux/ui design bootcamp. I have written the story of the ux design for this project in another post here. If you have read the first part , get ready ! It’s ui time now!
A quick reminder of the first part; i was working on an English speaking practice app, called English Ninjas (it will be an IOS app). The problems people have about practicing speaking are;
And after research, empathizing , identifying the problems; solutions i have ideated to make existing English Ninja’s app better are ;
WHAT I HAVE SO FAR, AS I BEGIN THE UI WORK?
- I have finished Empathize, Define, Ideate, Prototype, Test phases. I did my user research with my surveys and interviews. I created my persona. I understood the pains and gains of my users. What are their problems and “how might i help them with my project?”
- I have my user flow ( what will the user be doing with my app? )
- I have my tested and fixed paper prototype,
- I have my mid fidelity wireframes prepared with Sketch,
USER FLOW
Before starting with the moodboard and style tile. I would like to share the user flow i will work on. If you can remember from the UX post, we have our persona Sevnaz. Who will have an interview next week from a company based in London. So using the app ,she will be practicing for her job interview with a real tutor. Basically, the flow will be like this;
Also if she needs, she can add documents, some information about the company or the position she will be applying for. Enabling the tutor to have a look and help her prepare better.
NEXT STEP: UI BEGINS WITH THE MOODBOARD!
So its time for colors, mood and feelings! As i am alone in this project, i created the moodboard to inspire myself, get organized, experiment with the colors and the feeling i want to create.
If i was working with a client (ok this is a real company and a real app, but i am not working directly with them at every step) a moodboard would also be a great tool to allow me collaborate with them and be on the same page about the visual design of the project.
Here you can see the moodboard for this project.
STYLE TILE
As i work on projects and read whatever i can find about ux and ui, things begin to get more clear. In the beginning , i liked creating moodboards and style tiles but to be honest, i was feeling like they are quite the similar thing! But now i have learnt that they are especially important to communicate well with the clients about visual design ideas also with your team. If you don’t have them, all you have is black and white wireframes, when you have your solution to tell people.
Here you can see my style tile for this project. As i have written in the post about ux part, what i am trying to do with the look of the app is make it more fresh, young, simple and easy.
Second thing i learnt about them is, they are fluid, especially the style tile. As you experiment with colors, fonts, the icons you will use they change too.
Working on the Hi-Fi screens, i tried to keep all the screens that i tried colors in different ways. Here you can see them. In the beginning i was thinking of a colorful background;
What i was trying to do is making it look fresh and simple, when i checked it with people ,asking “how does the homepage make them feel?” and want them to give me keywords, fresh was not one of them :) I changed things a bit and i got this;
I felt better with these but, still not sure :) went on searching, trying to get inspired and testing! And the screens from final version are;
And the screens for choosing the tutors. I have used cards for tutor’s introductions and basic informations. I haven’t seen this in any speaking practice app. But i think it worked :) You can swipe and see the tutors, who are professionals at the topic you have selected. And choose one!
After i finished my screens for my user flow, i prepared my mockup on Marvel.
And the final project was ready! I prepared a 1 min pitch for the hackshow. Presented it, people voted and i was the winner!
All bootcamp was the experience of my life! Hopefully, it will be a turning point in my life :) Anyway, i will be writing another post about the whole experience at Ironhack Paris! Till then, take care ! Thanks for reading! You are the BEST! Love!
