top of page

The Inc - a Mobile App Design

2.png
4.png
1.png

CONTEXT

This is a collaborated project to design an iOS app for a multicultural media and social networking platform. I worked with three designers to utilize research, create information architect, wireframes and high-fidelity prototypes to pair with the platform's website.
The Incc.jpg

PROJECT GOAL

When we joined the team, the platform has already developed its website, identified users' needs and goals. The founders wanted us to design an iOS app to pair with the website and create an engaging experience for users. 

SOLUTION

Considering the time limitation and restricted resources, we analyzed the previous team's work, discovered current problems for the platform, and came up with an iOS solution that pairs with the current website and met the founders' expectations.

Research on current status

Since the platform had already established its website and the founders wanted to apply the website style to iOS app design. So the first thing we did after the stakeholder meeting was to analyze the current design and reports provided by the previous design team.  As we noticed, the platform was very content-heavy - it had features of digital publications, social media networking, content creation and business interaction. When we got back to the report from the previous design team, we summarised their goals to design the platform's website back then: 
1. Want users to have access to the cultural channels
2. Want users to be able to create content
3. Want a personal profile for users to network
 
These three goals would not be the goals for our project, but we took them as one of the guidelines for the structure of the mobile app design in order to be consistent. ​​​​
When we studied their final usability testing report, we discovered the major problems for the current platform were lack of focus and users didn't understand what the platform was really about. Some of the quotes from users include:
q3.png
q1.png
q2.png

Competitive analysis

Once we understood the website's design thinking, the next thing we did was to conduct a competitive analysis. Since the previous design team had already done a complete analysis of leading products that tackled similar features with the Inc in the market, our focus was on the onboarding process of these competitors iOS app, as it's the first part users would interact with the app.
com1.png
com2.png
com3.png
The key takeaways from this analysis were:
 
  •  It's important to allow users to personalize their homepage in the onboarding process for content-heavy platform (all three platforms do)
  • Both LinkedIn and Flipboard have a simple introduction about the main features.
  • It's universal and convenient to use other social media accounts to log in (all three platforms do)
  • Different platforms have different approaches to reinforce users interaction based on their focus, for example, LinkedIn encourages syncing contacts while Flipboard pushes more customized content.
  • None of the platforms introduce their subscriptions in the onboarding process.

Problem statement

Based on the secondary research and analysis we've conducted, we narrowed down to the focus and goals of this project. We phrased them as the following questions:
1. How might we create an iOS app of the Incc platform that are easy to use while formulating the design of its website
2. How might we design an iOS app of the Incc platform that has a clear focus for users
3. How might we create an iOS app of The Incc platform that has an engaging onboarding process

Information Architect

Our strategy to achieve the goals (also "How Might We" questions) consisted of three steps. The first step was to create a clear structure of the app implementing the website's design thinking. So the focuses of the iOS app were: 
  • Content creator
  • Content channel
  • Profile networking
Frame 3.png

Wireframes

The second step was to sketch ideas of the screens and created wireframes based on the sitemap. Since we didn't have time to test users with the wireframes, we decided to discuss with the founders, who were also the users of this project.
wireframes.png

Style guide

 
 
 
Since this was a collaborated project and each designer would be responsible for one section of the app,  the third step was to create a style guide. The thinking behind the style was on one had to wed with the Incc website design, on the other hand, reflect the focus of the app. For example, we used a dark base to contrast with the colour palette of blues and yellow, which showcased the energy and diversity of the platform. It would also be easier for readers to read with the dark mode. 

 

STYLE GUIDE.png

PROTOTYPE

We created the final prototype based on adjusted wireframes, which looked more consistent visually. 

 

prototype.png

reflection

The 40 hours' short term project ended with a final presentation on the prototype with the founders before Christmas, 2020. However, we were quite aware of some missing puzzles and things we would improve if we had more time. We also shared this with the founders.
First of all, we used secondary research from the previous team to follow the design of the existing website and meet the time restriction. If we had more time, we would conduct primary research to understand users’ behavior and needs for the iOS app.
 
Secondly, we didn't conduct a usability test with users. Since the third week was the week of Thanksgiving, we encountered difficulties recruiting users for the test, that’s why we only had feedback from the founders. This would cause many limitations in our prototype.
Thirdly,  designers could have worked better as a team. Each of us was responsible for one section of the content, for example, one of the designers was responsible for the design of the onboarding process, one was responsible for the home page, and one was responsible for the content section. Though we created our style guide, the screens were still not consistent. We had to spend time aligning the style of each section. 

Emily Zhang

UX researcher

linkedin-round.png
noun_Email_1198075 1.png
bottom of page