2.2 WireFraming
As members of the March 2020 UX-UI Bootcamp for Ironhack, we were asked to develop exercises and challenges that will allow us to delve into the world we will try to become professionals in. This is the fourth of this series.
For this exercise, we were required to reverse-wireframe five screens of an app of our choice.
For this, I chose Co-Star, an astrology app catered specifically to your birth chart, and uses NASA technology to provide updates on your individual planets. What can I say? Astrology is the religion of the average millennial, and Co-Star has done an excellent job of it.
The Flow of it
The Flow I’ve chosen to work with is the basic flow of the app, from the login page, through the way one would go about using it on a day-to-day basis. It really is quite simple:
- Login Page.
- Your profile, with a small summary of your pros and cons for the day.
- Your personalized Natal Chart.
- Your list of friends, also on the app.
- The compatibility and contrast between your chart and your friends’.
The reason I chose to work with this, is both because it actually does work, and I’ve grown accustomed to the way it works, but that is not to say it’s without its kinks. Perhaps if I’m able to break it down, I’ll be better able to see the reasons it tends to frustrate me when using the app from time to time, and hopefully be able to avoid that when it’s my turn to design from scratch.
UI Time
This app relies more on a sort of flow-screen. It has, of course, a few buttons here and there, but it mostly has the user slide and scroll through the whole thing. It is mostly text-based, and their UI aesthetic seems wonderful to me, despite being monochromatic, they developed a style that goes well with the gist of what it stands for and replicates well into their website, branding and social media.
The inventory is quite simple:
- Scroll Bar on the Bottom to show the limit of the page
- Micro-Scroll bar on the top to show the screen the user is on
- Text for Buttons that indicate both the sections, sub-sections, and calendar dates
- Tailored Icons to depict Astrology Signs and Symbols
- Tailored Images to represent aspects of charts.
The Wireframe Building
Trying to create the workflow made me realize that there is a bit of an issue logically navigating the app. I came up with a few redesign solutions I would like to explore later.
The Prototype
I then used InVision to Prototype and see what it would look like on an actual phone. I attempted to program it to my liking, but will probably need some practice and further learning to be able to adapt my designs in the future.
You can check the prototype here.
The Learning
Throughout this exercise, it became apparent that despite now knowing the existence of these apps, there is a lot left to explore and learn, hopefully I will take less and less to do this in the future.