The Brief
Select one or two of the prototyping methods outlined this week and build quick prototypal representations of your chosen artefact. Note down any interesting characteristics of the artefact. Perhaps, you notice the colour palette is used in a certain way or the layout follows a standard grid system. Depending on your chosen artefact, you might want to annotate the dimensions and analyse the padding and spacing used. If you are creating a storyboard for a cutscene in a game, you could identify key components of the narrative arc or highlight various camera shots and how they are used to create drama.
This is an extremely open brief designed to allow you the freedom to choose an artefact you will find enjoyable to reverse engineer. We want you to dive in and have some fun. Don’t take the task too seriously – instead enjoy trying to get inside the minds of other creative practitioners.
The Challenge
When I initially read this week’s brief I was under the impression that we were to re-design a digital product. It was only after researching the concept in more detail and seeing the work of my peers that I understood that reverse engineering is a way of inspecting and analysing a finished product to understand the design choices behind the interface. (Nguyen, T, Csallner, C. 2013) I found this an interesting task as I enjoy exploring digital products that I feel are beautifully designed and functional at the same time. The sites I appreciate have an intuitive simplicity to their interface, with fun, playful details to create an experience that’s easeful and a pleasure to use.
Since in-depth prototyping is new to me, I wanted to take the chance to explore methods that are unfamiliar to me. Sketching on paper and creating wireframes are already part of my design process. However I have never creatied workflows and user flows, so I decided to reverse engineer the workflow of a digital product I admire. Originally known as a coding school, SuperHi have established themselves as the online course platform for creatives working in tech, they’re known for their bold, playful and sleek design. I wanted to explore how they combine a strong focus on aesthetics with efficient and effective function.
I used Figma as my tool for this task, I would usually use InDesign or Illustrator, so it’s a new challenge for me to use a tool other than Adobe. I believe that Figma will be useful going forward to collaborate with teams and to create high-fidelity prototypes.
SuperHi user flow
The user journey
The user journey from homepage to buying a course is easy to navigate. From the first screen you can open the chat feature to find FAQs and the first CTA takes you directly to the course selection page. The use of cards across a vertical grid of 3 (on desktop) gives away all the essential information on each course in a small space. Colour coding is used to denote ability levels (green = beginners course), text hierarchy is used to draw the eye in the following order title > paragraph > price > extra info.
Another feature which I thought was an excellent use of colour to show functionality is on the course platform. They show enrolled courses with colour illustration and display all the other courses below with monochrome illustrations. This allows the user to quickly navigate to the courses they are working on, and scroll down to see the other courses available to purchase.
On colour
Superhi use colour abundantly yet strategically. Their primary brand colour #2727DD is used across all major titles, icons and to indicate links. It’s a bright ‘digital blue’ colour which stands out against all the others in the palette. The users eye is drawn to this blue, as it becomes clear that it’s used to direct us to important information. According to UI designers, ‘digital blue’ is the most neutral colour of the primary colours, it’s safe and often symbolises technology & innovation. (Barševska, Rakele. 2019)
This blue is SuperHi’s most recognisable brand colour, used for their logo and signature smileys. There’s a strong emphasis on their brand identity, using this colour heavily across all pages means that viewers begin to associate SuperHi with this bright blue shade.
The palette as a whole is bold, there’s a confidence to the aesthetic which is important as they stand out in the saturated online education marketplace. They have positioned themselves as one of the more ‘fun’ digital skills schools aimed at creatives.
Design details
When reverse engineering the UI details and typography, what I noticed is that both are relatively minimalist. SuperHi use a very simple, clear typescale, header sizes go down in increments of 12. Header 3 style is only used in the student.superhi platform. Therefore the main site features only 3 header styles and 2 paragraph styles.
The minimal variation of typography and UI details such as icons, symbols & button structures is a welcome contrast to the maximalist visual design of SuperHi’s brand illustrations and use of colour. In fact their bold visual identity calls for simplicity in UI choices. They strike the balance between playful and serious, creating a user experience which is fun to look at and easy to use.
Consistent design rules across the site also keep the bold visual branding in check. For example, cards across the site have curved edges with a 8pt radius. To differentiate a static card and a link, SuperHi use a drop-shadow and a ‘float-up’ animation on hover.
My learnings
As a Fashion & Graphic designer, I have been using colour strategically to evoke feeling & appeal to a particular audience. What I’m learning is that in UX Design colour is also used to guide the eye and signify states. I’m learning that not only can colour evoke emotion, but it can also direct behavior. (Barševska, Rakele. 2019)
Breaking down SuperHi’s pages into the user journey workflow enabled me to appreciate the the subtle design details that guide the user’s navigation. Such as hiding the menu & footer in the sign-up page, and drop-shadows used on cards that take you to a new page. I’m noticing that there are certain universal rules in interface design that users are used to, which simplify the journey. Such as button shapes, hover states and type hierarchy.
I also wrote about my research on rapid ideation this week.
References
NGUYEN, Tuan Anh, CSALLNER, Christoph. 2013. ‘Reverse Engineering Mobile Application User Interfaces With REMAUI’. The University of Texas at Arlington. Available at: https://ranger.uta.edu/~csallner/papers/nguyen15reverse.pdf. [Accessed 19 June 2019].
BARSEVSKA, Zeltīte, RAKELE, Olga. 2019. ‘Colour in UI Design’. Daugavpils University. Available at: https://library.dctabudhabi.ae/eds/detail?db=asn&an=142413092. [Accessed 19 June 2019].
Figures
Fig 1 – 6. Screenshots & annotations of SuperHi site. 2021. Annotated by author. Available at: https://superhi.com.