If you haven’t already, have a look at Part 1 first…https://medium.com/@Sumayyah__/lookin-good-web-app-part-1-8541ef76db57
Ideations and Concepts
In order to come up with the best website design, some experiments has been conducted and 3 concepts has been developed, after which one has been approved on.
Concept 1
As visual language the website will be giving a sense of care and sophistication. There will be an extent of professionalism in the website to showcase the reputation of the company. Alongside there might be a strong focus on values and vision for personal confidence.
Coming to layout, a lot of geometric shapes will be used for this concept.This is to promote the visibilty of sophistication and elegance. It was found to be a strong design trend at the moment.
Mood Board
Layout Sketches
Mockups
Concept 2
This concept has used mostly pastel colours to create a nice aesthetic effect. The main colours are pink and purple, and is quite feminine and girly. The typography used is a quite decorative one for headings and big titles and a more
Mood Board
Layout Sketches
Mockups
Concept 3
For this one, I wanted to experiment with more neutral colours that are close to skin tones. Since the main goal was to help people dress better and feel better, the approach should be quite warm and cozy. The overall aesthetic should be friendly and inviting, but professional enough to really allude to the fact that, this we app is mainly for employees.
Mood Board
Layout Sketches
Mockups
The Prototype
Link to Figma Prototype:
After coming up with three different concepts, feedback revealed that the third concept was more appropriate for both genders. After carrying out further interviews with potential users, we noticed some issues with the visual in general and thus, adapted the visual. After doing a first prototype, more testings were carried out and a second prototype, a more refined one, was created.
Video of Prototype in Action
https://drive.google.com/file/d/1QVoQgLcAdMGP3ZXp307VnpGy91EVwLTt/view?usp=sharing
Embedding Prototype
<iframe style=”border: 1px solid rgba(0, 0, 0, 0.1);” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FfhHBiAB8SpyvMQ8DXMskEp%2FNew-DigEx-Desktop%3Fpage-id%3D0%253A1%26node-id%3D1%253A1453%26viewport%3D241%252C48%252C0.06%26scaling%3Dmin-zoom%26starting-point-node-id%3D1%253A154" allowfullscreen></iframe>
Last Words
Designing a web app like this one requires a lot of research pertaining to the subject itself, as well as the target audience. However, the process to the final product, was actually fun, and I look forward to work on more, like this one!
